/* Photo wall — the Designers' universe on the front page (markup from wall.js).
   A lilac plaster wall fills #space in place of the 3D canvas; twine sags
   between wooden knobs and polaroids hang from it on clothespins. Phones
   (<640px) drop the twine: one column of prints held by gold push-pins.
   Breakpoints match the matchMedia queries in wall.js (640 / 1024).

   The strings and prints are not tied to the front page: any element with
   class `wall-board` can host them (the designers' profile pages do, see
   profile-wall.css), and `html.wall-page` plasters a whole page. */

/* ── Frame: the wall takes over #space while its universe is showing ──── */
/* the hint has nothing to say here; keep its About link as a chip the prints can pass under */
#space.wall-on #hint-text { display: none; }
#space.wall-on .hint { right: 22px; background: rgba(26, 20, 14, .82); border: 1px solid var(--line); padding: 4px 8px; }
#space.wall-on .hint .about-link { margin-left: 0; }

.wall, .wall-board {
  --card: 204px; /* print width; everything on a print is sized from it */
  --sag: 30px;   /* how far the twine dips at mid-span */
  --wood: #c4935a;
  --ink-soft: #2c2433;
  color: var(--ink-soft);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.wall {
  --card: 176px; /* four to a string even where the container units below are unknown */
  position: absolute;
  inset: 0;
  z-index: 10; /* over the canvas, under the corner brackets, warp buttons, finder and Oxie */
  overflow-x: hidden;
  overflow-y: auto;
  container-type: size;
  scrollbar-width: thin;
  scrollbar-color: rgba(86, 62, 124, .5) transparent;
}
.wall[hidden] { display: none; }
@supports (width: 1cqw) {
  /* sized from the frame, so two strings fit a laptop screen and prints never outgrow a tall one;
     17cqw leaves four prints on a string a gap of 35px or more from 1024px up */
  .wall { --card: clamp(150px, min(17cqw, 37cqh), 232px); --sag: clamp(20px, 3.2cqw, 40px); }
}

/* The plaster scrolls with the prints: light from the top left, a lilac
   vignette bottom right, soft mottling and a fine grain (inline SVG noise). */
.wall-inner {
  min-height: 100%;
  padding: 84px clamp(14px, 4cqw, 56px) 150px; /* clears the finder bar above and Oxie below */
}
.wall-inner, .wall-page body {
  background-color: #d9cdea;
  background-image:
    radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    radial-gradient(95% 55% at 100% 100%, rgba(98, 70, 140, .24), rgba(98, 70, 140, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .45 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 240px 240px, 700px 700px;
}
.wall-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wall-rows { max-width: 1200px; margin: 0 auto; } /* four full-size prints to a string, 44px apart */
.wall-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── A string: knob, twine, knob — and the prints hanging from it ─────── */
.wall-row {
  --peg-room: 34px; /* the pegs stand this far above the twine */
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: var(--peg-room) calc(var(--inset) * 100%) 0;
  margin-bottom: clamp(24px, 5cqh, 52px);
}
.wall-row.is-centred { justify-content: center; }
.wall-row::before, .wall-row::after {
  content: '';
  position: absolute;
  top: calc(var(--peg-room) - 9px);
  z-index: 2;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ecc892 0 16%, var(--wood) 46%, #865a30 100%);
  box-shadow: 0 3px 4px rgba(40, 20, 60, .45), inset 0 -1px 1px rgba(0, 0, 0, .25);
}
.wall-row::before { left: -9px; }
.wall-row::after { right: -9px; }
.wall-string {
  position: absolute;
  left: 0;
  top: calc(var(--peg-room) - var(--sag) * .1); /* viewBox y 0…100 = the knobs' height … + sag */
  width: 100%;
  height: calc(var(--sag) * 1.2);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(1px 5px 2px rgba(58, 38, 92, .34));
}
.wall-string path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.twine { stroke: #b08a52; stroke-width: 3px; }
.twine-twist { stroke: #ead2a2; stroke-width: 1.3px; stroke-dasharray: 3 4; } /* the ply of the twine */

.wall-slot {
  --drop: calc(var(--sag) * var(--hang)); /* the twine's height at this print, from wall.js */
  position: relative;
  flex: 0 0 calc(100% / var(--per));
  display: flex;
  justify-content: center;
  min-width: 0;
}
.wall-slot:hover, .wall-slot:focus-within, .wall-slot.is-hot { z-index: 5; }
.wall-hang { position: relative; width: var(--card); padding-top: calc(var(--drop) + 4px); }
.wall-peg, .wall-pin { position: absolute; left: 50%; z-index: 3; pointer-events: none; }
.wall-peg {
  top: calc(var(--drop) - 27px); /* the jaws bite the twine and the print's top edge */
  width: 15px; height: 39px;
  margin-left: -7.5px;
  transform: rotate(calc(var(--tilt) * .4));
  filter: drop-shadow(1px 2px 1.5px rgba(40, 20, 60, .4));
}
.wall-pin { display: none; top: -7px; width: 25px; height: 27px; margin-left: -11px; }

/* ── A polaroid ───────────────────────────────────────────────────────── */
.polaroid {
  position: relative;
  display: block;
  padding: calc(var(--card) * .058) calc(var(--card) * .058) 0;
  background: #fdfcf8;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(40, 20, 60, .2), 0 7px 13px -3px rgba(40, 20, 60, .34);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0; /* it swings from the peg */
  transition: transform .32s cubic-bezier(.2, .8, .3, 1.15);
  -webkit-tap-highlight-color: transparent;
}
/* the deeper shadow fades in on its own layer — nothing but transform and opacity moves */
.polaroid::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 20px 30px -8px rgba(40, 20, 60, .55);
  opacity: 0;
  transition: opacity .32s;
  pointer-events: none;
}
.polaroid:hover, .polaroid:focus-visible, .polaroid:active, .is-hot .polaroid {
  transform: translateY(-5px) rotate(calc(var(--tilt) * .12)) scale(1.035);
}
.polaroid:hover::after, .polaroid:focus-visible::after, .polaroid:active::after, .is-hot .polaroid::after { opacity: 1; }
.polaroid:focus-visible { outline: 3px solid #c88916; outline-offset: 4px; }
.is-hot .polaroid { outline: 3px solid #e3ba36; outline-offset: 4px; }

.polaroid-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--tint, #8a78a8) linear-gradient(150deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 58%);
  box-shadow: inset 0 0 0 1px rgba(30, 20, 45, .1);
}
.polaroid-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-photo::after { /* gloss */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
/* no cover photo (none uploaded, or it failed to load): studio colour + initials */
.polaroid-initials { display: none; }
.is-bare .polaroid-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 calc(var(--card) * .34)/1 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 6px rgba(30, 20, 45, .25);
}
.polaroid-stamp {
  position: absolute;
  top: 7px; right: 7px;
  z-index: 1;
  padding: 3px 5px 2px;
  font: 700 8px/1 ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(30, 20, 45, .55);
}

.polaroid-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(var(--card) * .31); /* the thick bottom margin — every print the same shape */
  padding: calc(var(--card) * .02) 0 calc(var(--card) * .04);
  overflow: hidden;
  text-align: center;
}
.polaroid-name {
  --name: .112; /* wall.js writes longer names smaller so they keep to the margin */
  font: 700 calc(var(--card) * var(--name))/1.02 'Caveat', 'Segoe Print', 'Bradley Hand', 'Noteworthy', cursive;
  letter-spacing: .01em;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.polaroid-meta {
  margin-top: 3px;
  font-size: max(10px, calc(var(--card) * .05));
  letter-spacing: .03em;
  color: #6f647c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the last print: an empty frame that leads to the designer sign-up */
.polaroid-photo.is-empty {
  display: grid;
  place-items: center;
  background: #f1ebf8;
  box-shadow: none;
  outline: 2px dashed #b7a3d6;
  outline-offset: calc(var(--card) * -.05);
}
.polaroid-photo.is-empty::after { content: none; }
.polaroid-plus { font: 300 calc(var(--card) * .46)/1 ui-sans-serif, system-ui, sans-serif; color: #c88916; transition: transform .32s; }
.polaroid-join:hover .is-empty, .polaroid-join:focus-visible .is-empty { outline-color: #c88916; }
.polaroid-join:hover .polaroid-plus, .polaroid-join:focus-visible .polaroid-plus { transform: scale(1.12) rotate(90deg); }
.polaroid-join .polaroid-meta { color: #8a5d06; font-weight: 600; }

/* the sign-up offer written in that frame (wall.js JOIN_OFFER, while it runs):
   "free" under a swipe of gold highlighter, two sparks, and the + moved down */
.polaroid-photo.has-offer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--card) * .02); }
.polaroid-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--card) * .018);
  color: var(--ink-soft);
  text-align: center;
  transform: rotate(-3deg);
}
.offer-lead { font: 700 calc(var(--card) * .155)/1 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; white-space: nowrap; }
.offer-lead mark {
  padding: 0 .14em;
  color: inherit;
  background: linear-gradient(176deg, transparent 0 46%, rgba(243, 216, 67, .9) 47% 90%, transparent 91%);
}
.offer-rest { font: 700 max(8px, calc(var(--card) * .04))/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #6f647c; }
.offer-date { font: 700 calc(var(--card) * .125)/1 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; color: #8a5d06; white-space: nowrap; }
.offer-spark { position: absolute; font-size: calc(var(--card) * .07); line-height: 1; color: #e3ba36; animation: offer-twinkle 2.4s ease-in-out infinite; }
.offer-spark:first-child { top: -.9em; right: -.5em; }
.offer-spark:last-child { bottom: -.2em; left: -.9em; font-size: calc(var(--card) * .05); animation-delay: -1.2s; }
@keyframes offer-twinkle { 50% { transform: scale(1.35) rotate(25deg); opacity: .55; } }
.has-offer .polaroid-plus { font-size: calc(var(--card) * .27); }

/* the finder found nothing: a note pegged where the prints would be */
.wall-note {
  padding: 18px 14px 22px;
  background: #fff6c9;
  font: 600 calc(var(--card) * .1)/1.2 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  text-align: center;
  box-shadow: 0 6px 12px -3px rgba(40, 20, 60, .3);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
}

/* ── Finder on the wall: a bar across the top instead of a panel over the first print ── */
@media (min-width: 1100px) {
  #space.wall-on .finder { top: 16px; width: auto; flex-direction: row; align-items: center; gap: 10px; padding: 7px 10px; }
  #space.wall-on .finder label { flex-direction: row; font-size: 0; } /* the selects and the placeholder already say what they are */
  #space.wall-on .finder select, #space.wall-on .finder input { width: 148px; }
}
@media (min-width: 641px) and (max-width: 1099px) {
  /* no room for the bar beside the warp button: collapse behind FIND, as phones do */
  #space.wall-on .finder-toggle {
    display: inline-block;
    position: absolute;
    left: 22px; top: 18px;
    z-index: 1600;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #ffd27a;
    background: rgba(26, 20, 14, .9);
    border: 1px solid var(--line);
    padding: 8px 12px;
    cursor: pointer;
  }
  #space.wall-on .finder-toggle[hidden] { display: none; }
  #space.wall-on .finder { display: none; top: 56px; }
  #space.wall-on .finder.open { display: flex; }
}

/* ── Tablet: two prints to a string ───────────────────────────────────── */
@media (max-width: 1023px) {
  .wall-inner { padding-top: 72px; }
  @supports (width: 1cqw) {
    .wall { --card: clamp(168px, min(31cqw, 44cqh), 236px); --sag: clamp(18px, 4cqw, 34px); }
  }
}

/* ── Phone: no twine — a single column of pinned prints ───────────────── */
@media (max-width: 639px) {
  .wall { --card: 250px; --sag: 0px; }
  @supports (width: 1cqw) { .wall { --card: min(72cqw, 280px); } }
  .wall-inner { padding: 52px 14px 118px; }
  .wall-row { --peg-room: 10px; margin-bottom: 26px; }
  .wall-row::before, .wall-row::after, .wall-string, .wall-peg { display: none; }
  .wall-pin { display: block; }
  /* hung by hand: alternate prints drift left and right */
  .wall-row:nth-child(odd) .wall-slot { justify-content: flex-start; padding-left: 5%; }
  .wall-row:nth-child(even) .wall-slot { justify-content: flex-end; padding-right: 5%; }
  .polaroid { transform-origin: 50% 8px; } /* it swings from the pin */
  .polaroid-stamp { top: 9px; right: 9px; }
  #space.wall-on .finder-toggle { top: 10px; }
  #space.wall-on .finder { top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid::after, .polaroid-plus { transition: none; }
  .offer-spark { animation: none; }
  /* nothing moves: the deeper shadow and the outline answer on their own */
  .polaroid:hover, .polaroid:focus-visible, .polaroid:active, .is-hot .polaroid { transform: rotate(var(--tilt)); }
  .polaroid-join:hover .polaroid-plus, .polaroid-join:focus-visible .polaroid-plus { transform: none; }
}