/* wall.css. Owner: package P1 (wall). The full-screen wall of every site, the
   plate that grows out of the hero link, the pan on hover (#6) and the list
   view (#8). */

/* The plate's type. It shows the link's own words while it grows. */
.wall-frame {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: var(--font); font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em;
  text-align: center; text-wrap: balance;
}

/* ── the wall ───────────────────────────────────────────────────────────── */

/* A full-window layer on the same page. The plate is what grows out of the
   link. The body, with the wall on it, fades in over the plate once it lands. */
.wall { position: fixed; inset: 0; z-index: 200; color: var(--ground); outline: none; }
.wall[hidden] { display: none; }

.wall-frame {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: var(--ink-lift); color: var(--white);
  border: 2px solid var(--white);
}
.wall-frame > span { visibility: hidden; }

.wall-body {
  position: absolute; inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity .4s ease;
}
.wall.is-shown .wall-body { opacity: 1; }

.wall-view {
  position: absolute; inset: 0;
  overflow: hidden; overflow: clip;
  perspective-origin: 50% 50%;
  touch-action: none;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
  transform: scale(1.12);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.wall.is-shown .wall-view { transform: none; }
.wall-view.is-dragging { cursor: grabbing; }
.wall.is-still .wall-body, .wall.is-still .wall-view { transition: none; }

/* The stage's own plane sits at z=0, in front of every tile curved away
   behind it, so it would take every hover and click. Only the tiles are hit. */
.wall-stage { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }

/* 16:10. wall.js sets --tw and --th, and each tile's transform. */
.wall-tile {
  position: absolute; left: 50%; top: 50%;
  width: var(--tw, 260px); height: var(--th, 162px);
  margin: calc(var(--th, 162px) / -2) 0 0 calc(var(--tw, 260px) / -2);
  display: block; overflow: hidden;
  pointer-events: auto;
  background: var(--ink-lift);
  border: 2px solid transparent;
  backface-visibility: hidden;
  will-change: transform;
  -webkit-user-drag: none;
  transition: border-color .15s ease;
}
.wall-tile.is-hot, .wall-tile:focus-visible { border-color: var(--white); }
.wall .wall-tile:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
/* Full colour. Only the shade over each tile darkens it toward the edges. */
.wall-tile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  pointer-events: none; -webkit-user-drag: none;
}
.wall-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 12px; text-align: center;
  font-weight: 800; letter-spacing: -0.02em; color: var(--ground);
}
.wall-fallback[hidden], .wall-tile img[hidden] { display: none; }
.wall-tile .wall-pan { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; object-fit: fill; will-change: transform; }
.wall-tile .wall-pan[hidden] { display: none; }
.wall-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--ink); opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) { .wall-tile { transition: none; } }
:root[data-motion="reduce"] .wall-tile { transition: none; }

.wall-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(32, 30, 29, 0) 55%, rgba(32, 30, 29, 0.9) 100%);
}

.wall-close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 10px 16px;
  font-family: var(--font); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  background: var(--ink); color: var(--ground);
  border: 2px solid rgba(243, 242, 242, 0.4);
  cursor: pointer;
}
.wall-close span { font-size: 1.4em; line-height: 0.7; }
.wall-close:hover, .wall-close:focus-visible { background: var(--ink-lift); color: var(--white); border-color: var(--white); }
.wall .wall-close:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.wall-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: 8px 24px;
  padding: 48px 20px 18px;
  background: linear-gradient(to top, rgba(32, 30, 29, 0.9), rgba(32, 30, 29, 0));
  pointer-events: none;
  font-size: 0.75rem; line-height: 1.4;
}
.wall-hint {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
  color: rgba(243, 242, 242, 0.72);
}
.wall-cap { min-height: 1.4em; text-align: center; font-size: 0.875rem; }
.wall-cap-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); }
.wall-cap-ind { color: rgba(243, 242, 242, 0.78); }
.wall-cap-ind:not(:empty)::before { content: " \00B7  "; }
/* A concept's label (Conner, 2026-09-28), the caption's third part in the
   industry's own colour after the same dot. Hidden for client work. */
.wall-cap-tag { color: rgba(243, 242, 242, 0.78); }
.wall-cap-tag::before { content: " \00B7  "; }
.wall-note {
  justify-self: end; text-align: right; max-width: 42ch;
  font-size: 0.6875rem; color: rgba(243, 242, 242, 0.62);
}
@media (max-width: 800px) {
  .wall-foot { grid-template-columns: minmax(0, 1fr); padding: 40px 16px 14px; gap: 6px; }
  .wall-cap { order: -1; }
  .wall-note { justify-self: start; text-align: left; }
  .wall-close { top: 12px; right: 12px; }
}

/* ── list view (#8) ────────────────────────────────────────────────────── */

.wall-views { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; }
.wall-view-btn {
  min-height: 44px; padding: 10px 16px;
  font-family: var(--font); font-weight: 800; font-size: 0.9375rem; line-height: 1;
  background: var(--ink); color: var(--ground);
  border: 2px solid rgba(243, 242, 242, 0.4);
  cursor: pointer;
}
.wall-view-btn + .wall-view-btn { margin-left: -2px; }
.wall-view-btn[aria-pressed="true"] { position: relative; z-index: 1; background: var(--ground); color: var(--ink); border-color: var(--ground); }
.wall-view-btn[aria-pressed="false"]:hover, .wall-view-btn[aria-pressed="false"]:focus-visible { background: var(--ink-lift); color: var(--white); }
.wall-view-btn:hover, .wall-view-btn:focus-visible { position: relative; z-index: 2; border-color: var(--white); }
.wall .wall-view-btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.wall-list { display: none; position: absolute; top: 76px; right: 0; bottom: 96px; left: 0; z-index: 2; overflow-y: auto; overscroll-behavior: contain; }
.wall.is-list .wall-list { display: block; }
.wall.is-list .wall-view, .wall.is-list .wall-vignette, .wall.is-list .wall-hint, .wall.is-list .wall-cap { display: none; }
.wall-rows { list-style: none; margin: 0 auto; padding: 6px var(--gutter); max-width: 1100px; }
.wall-row:first-child .wall-row-link { border-top: 2px solid rgba(243, 242, 242, 0.18); }
.wall-row-link {
  display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 2px solid rgba(243, 242, 242, 0.18);
  color: var(--ground); text-decoration: none;
}
.wall-row-link { scroll-margin-block: 8px; }
.wall-row-num { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.16em; color: var(--red-300); }
.wall-row-name { font-weight: 800; font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.wall-row-ind { font-size: 0.9375rem; color: rgba(243, 242, 242, 0.72); }
/* A concept's label, on its own line under the industry, in the caption's
   colour and a size smaller (Conner, 2026-09-28). */
.wall-row-tag { display: block; margin-top: 4px; font-size: 0.8125rem; color: rgba(243, 242, 242, 0.78); }
.wall-row-link:hover, .wall-row-link:focus-visible { border-bottom-color: var(--red-300); }
.wall-row-link:hover .wall-row-name, .wall-row-link:focus-visible .wall-row-name { color: var(--red-300); }
.wall .wall-row-link:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
:root[data-motion="full"] .wall-row-link, :root[data-motion="full"] .wall-row-name { transition: color .15s ease, border-color .15s ease; }

.wall-peek {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 320px; height: 200px; object-fit: cover; object-position: top center;
  border: 2px solid var(--white); background: var(--ink-lift); pointer-events: none;
}
.wall-peek[hidden] { display: none; }

@media (max-width: 800px) {
  .wall-views { top: 12px; left: 12px; }
  .wall-list { top: 68px; bottom: 120px; }
}
@media (max-width: 640px) {
  .wall-row-link { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
  .wall-row-ind { grid-column: 2; }
}