/* Work wall: an expanding gallery of the twenty demonstrations. Linked from work.html (render-blocking, so the
   wall never flashes unstyled) and used by work-wall.js. New file, no changes to site.css. Uses the site's own
   tokens (--blade --ink --case --case-2 --case-line --on-case --on-case-2 --display --text --ease) and conventions:
   2px corners, 3px blade focus rings on dark fields, no glass (no backdrop blur), no gradient text.
   Every class is prefixed "wall". See DESIGN.md, "Work wall". */

/* keep the layout still when the page scroll is locked behind the open panel */
html:has(.wall){scrollbar-gutter:stable}
html:has(dialog.wall-stage[open]){overflow:hidden}

.wall{
  --wall-gap:clamp(.6rem,.4rem + .8vw,1rem);
  --wall-row:clamp(210px,26vw,340px);
  --wall-rows:10;
  --wall-fs:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);
  --wall-pad:clamp(2rem,1.5rem + 2vw,3rem);
  padding-top:var(--wall-pad)}
/* Before the script has filled the (empty) section, hold exactly its final height so nothing below it jumps
   (layout shift). Only when JavaScript is on (the site sets .js on <html>); the script removes the section if it
   cannot build the wall, so no hole is ever left. */
/* without JavaScript the placeholder must not exist at all (the site marks that state with .no-js on <html>) */
.no-js .wall{display:none}
.js .wall:empty{min-height:calc(var(--wall-pad) + .95*var(--wall-fs) + .75rem + 2px + 1.25rem + var(--wall-rows)*var(--wall-row) + (var(--wall-rows) - 1)*var(--wall-gap))}

/* same look as the group headings below it (.group h2), without borrowing .group's margins */
.wall__h{font-size:var(--wall-fs);color:var(--blade);padding-bottom:.75rem;border-bottom:2px solid var(--case-line);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.wall__h small{font-family:var(--text);font-weight:400;font-size:.95rem;color:var(--on-case-2);letter-spacing:0}

.wall__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:var(--wall-row);
  gap:var(--wall-gap);margin-top:1.25rem}
/* 2 / 1 / 1 / 2: two wide cards on a diagonal, never three equal tiles in a row */
.wall__card:nth-child(4n+1),.wall__card:nth-child(4n){grid-column:span 2}

.wall__card{
  position:relative;display:block;margin:0;padding:0;overflow:hidden;
  border:2px solid var(--case-line);border-radius:2px;background:var(--case-2);color:var(--on-case);
  font:inherit;text-align:left;cursor:pointer;min-height:0}
.wall__card:focus-visible{outline:3px solid var(--blade);outline-offset:3px}
.wall__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform .6s var(--ease)}
/* hover effects only where there is a real hover (a tap on a touch screen must not leave one stuck) */
@media (hover:hover){
  .wall__card:hover{border-color:var(--blade)}
  .wall__card:hover img{transform:scale(1.03)}
  .wall__card:hover .wall__cap{border-top-color:var(--blade)}
}

/* honesty label, visible before the card is opened: the full sentence, including "Not a client." */
.wall__label{position:absolute;left:.6rem;top:.6rem;max-width:calc(100% - 1.2rem);padding:.12rem .5rem;
  background:var(--ink);border:1px solid var(--on-case-2);font-size:.78rem;font-weight:700;line-height:1.35;color:var(--on-case)}
.wall__label--real{border-color:var(--blade);color:var(--blade)}

/* caption plate: solid ink, so the name never depends on the screenshot behind it */
.wall__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.15rem;
  padding:.65rem .8rem .7rem;background:var(--ink);border-top:2px solid var(--case-line)}
.wall__cap b{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);line-height:1;letter-spacing:-.005em;word-spacing:.06em}
.wall__cap i{font-style:normal;font-size:.85rem;line-height:1.3;color:var(--on-case-2)}

/* ---- the open panel: a native modal dialog that only hosts the scrim and the panel ------------ */
dialog.wall-stage{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:inherit;overflow:hidden}
dialog.wall-stage::backdrop{background:transparent}
.wall-scrim{position:absolute;inset:0;background:rgba(20,20,20,.78)}
.wall-panel{
  position:fixed;display:flex;flex-direction:column;overflow:hidden;
  background:var(--case-2);border:2px solid var(--blade);border-radius:2px;color:var(--on-case);
  box-shadow:0 24px 80px rgba(0,0,0,.55);overscroll-behavior:contain}
.wall-panel__shot{position:relative;flex:1 1 50%;min-height:120px;background:var(--case)}
.wall-panel__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.wall-panel__body{flex:0 0 auto;max-height:62%;overflow:auto;overscroll-behavior:contain;
  padding:clamp(1rem,.6rem + 1.4vw,1.75rem) clamp(1.1rem,.7rem + 1.8vw,2.1rem) max(clamp(1rem,.7rem + 1.2vw,1.6rem),env(safe-area-inset-bottom));
  background:var(--ink);border-top:2px solid var(--blade)}
.wall-panel h3{font-size:clamp(1.9rem,1.4rem + 1.8vw,3rem);color:var(--on-case)}
.wall-panel .where{margin-top:.35rem;color:var(--on-case-2)}
.wall-panel .tag{margin-top:.75rem}
.wall-panel__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 2rem;margin:1rem 0 0}
.wall-panel__facts div{min-width:0}
.wall-panel__facts dt{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;color:var(--blade)}
.wall-panel__facts dd{margin:.15rem 0 0;font-size:.95rem;line-height:1.5;color:var(--on-case)}
.wall-panel__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1.15rem}
.wall-panel__acts .btn svg{width:1.1rem;height:1.1rem;flex:none}
.wall-panel__close{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.35rem .9rem;
  background:transparent;border:2px solid var(--on-case-2);border-radius:2px;color:var(--on-case);
  font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
@media (hover:hover){.wall-panel__close:hover{border-color:var(--blade);color:var(--blade)}}
.wall-stage :focus-visible{outline:3px solid var(--blade);outline-offset:3px}

@media (max-width:860px){
  .wall{--wall-row:clamp(190px,36vw,300px)}
  .wall__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall__card:nth-child(4n+1),.wall__card:nth-child(4n){grid-column:auto}
  .wall-panel__facts{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .wall{--wall-row:clamp(210px,60vw,300px);--wall-rows:20}
  .wall__grid{grid-template-columns:minmax(0,1fr)}
  .wall-panel__shot{flex-basis:34%}
  .wall-panel__body{max-height:72%}
}
@media (prefers-reduced-motion:reduce){
  .wall__card img{transition:none}
  .wall__card:hover img{transform:none}
}