/* pupwifpoop - white gallery, one tired dog */

@font-face{
  font-family:'Gochi Hand';
  src:url('assets/fonts/gochi-hand-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('assets/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight:700;font-display:swap;
}

:root{
  --ink:#141414;
  --tan:#d59a52;
  --tan-deep:#a86a2c;
  --poop:#7a4a1f;
  --paper:#ffffff;
  --hair:#e9e6e0;
  --grot:'Space Grotesk',system-ui,sans-serif;
  --hand:'Gochi Hand',var(--grot);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grot);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* faint gallery grid so pure white is not dead */
  background-image:
    radial-gradient(circle at 50% 42%, rgba(0,0,0,.035), transparent 60%);
}

.stage{
  min-height:100%;
  max-width:760px;
  margin:0 auto;
  padding:clamp(18px,4vw,40px) 20px 88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.canary{
  font-family:var(--hand);
  font-size:15px;
  color:#b6b0a6;
  letter-spacing:.02em;
  margin:0 0 6px;
  min-height:1em;
}

.wordmark{
  width:min(88%,560px);
  height:auto;
  margin:2px 0 clamp(4px,2vw,14px);
  user-select:none;
  -webkit-user-drag:none;
}

/* the plinth = the gallery pedestal the dog stands on */
.plinth{
  position:relative;
  width:min(78%,360px);
  margin-top:4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#floor{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:180%;
  height:190px;
  pointer-events:none;
  z-index:0;
}
.pup{
  position:relative;
  z-index:1;
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:50% 100%;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.08));
  transition:transform .09s ease;
}
.plinth:active .pup{transform:translateY(3px) scale(.992)}
.plinth.plop .pup{animation:plop .34s ease}
@keyframes plop{
  0%{transform:translateY(0)}
  40%{transform:translateY(6px) scaleY(.97)}
  100%{transform:translateY(0)}
}

.poke{
  position:absolute;
  left:50%;bottom:-6px;
  transform:translateX(-50%);
  font-family:var(--hand);
  font-size:14px;
  color:#c0392b;
  white-space:nowrap;
  opacity:.9;
  transition:opacity .3s;
  pointer-events:none;
}
.plinth.used .poke{opacity:0}

.label{
  margin-top:clamp(20px,5vw,34px);
  max-width:440px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.l-ticker{
  font-family:var(--hand);
  font-size:30px;
  line-height:1;
  color:var(--tan-deep);
}
.l-desc{
  font-size:14.5px;
  line-height:1.55;
  color:#5a554d;
}
.l-count{
  font-family:var(--grot);
  font-size:13px;
  color:#8a857c;
  letter-spacing:.01em;
}
.l-count b{color:var(--poop);font-weight:700}

/* the plate = museum label under the exhibit: CA + links */
.plate{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.ca{
  font-family:var(--grot);
  display:inline-flex;
  align-items:stretch;
  border:1.5px solid var(--ink);
  border-radius:10px;
  background:#fff;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  font-size:12.5px;
  transition:transform .08s ease, box-shadow .12s ease;
  box-shadow:2px 2px 0 var(--ink);
}
.ca:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.ca:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.ca-k{
  background:var(--ink);color:#fff;
  padding:8px 9px;font-weight:700;letter-spacing:.06em;
  display:flex;align-items:center;
}
.ca-v{
  padding:8px 11px;
  color:var(--ink);
  font-weight:500;
  letter-spacing:.01em;
  max-width:56vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;
}
.ca.copied .ca-v{color:var(--tan-deep)}

.link{
  font-family:var(--grot);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:10px;
  padding:9px 13px;
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .08s ease, box-shadow .12s ease, background .12s;
}
.link:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.link:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--ink)}
.buy{background:var(--tan);}
.buy:hover{background:#e0a75f}
.x-mark{
  font-family:var(--hand);
  font-size:19px;
  line-height:.7;
  transform:translateY(1px);
}

.foot{
  margin-top:26px;
  font-family:var(--hand);
  font-size:15px;
  color:#b6b0a6;
}
.mute{
  cursor:pointer;
  color:#8a857c;
  border-bottom:1.5px dotted #c9c4bb;
}
.mute:hover{color:var(--ink)}

/* floating poop that drops in on click (DOM sprites) */
.drop{
  position:fixed;
  width:44px;height:auto;
  z-index:5;
  pointer-events:none;
  will-change:transform;
}

@media (max-width:520px){
  .plinth{width:min(82%,320px)}
  .ca-v{max-width:64vw}
  .l-ticker{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  .plinth.plop .pup{animation:none}
}