/* nosuch.js's own styles, loaded with it (public/lazy.js) the first time a screen that
   uses it opens; the page's always-on styles are in the stylesheets public/index.html links. */

/* ==== from nosuch.css ==== */

.ns-ipo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 4px; font-size: 16px; font-weight: 600; color: var(--text); }
.ns-ipo .wi-btn.ns-ipo-btn { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ns-ipo .wi-btn.ns-ipo-btn:hover { background: var(--text); border-color: var(--text); }
.ns-tag { color: var(--accent); }
.ns-ask { margin: 12px 0 0; color: var(--text-2); }
.ns-src { margin-top: 10px; overflow-wrap: anywhere; }
.ns-share { margin-top: 14px; }

.ns-grave { display: flex; margin: 16px 0 0; }
.ns-stone {
  width: min(340px, 100%); padding: 44px 16px 22px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--stone); color: var(--stone-ink); border: 4px solid var(--stone-ink); border-radius: 170px 170px 6px 6px;
  box-shadow: 0 6px 0 -2px var(--dim);
}
.ns-rip, .ns-hand { font-family: 'Caveat', cursive; font-weight: 700; }
.ns-rip { font-size: 30px; line-height: 1; }
.ns-tk { font-weight: 800; font-size: 56px; letter-spacing: -.04em; line-height: 1.05; }
.ns-name { font-weight: 800; font-size: 16px; margin: 4px 0 8px; }
.ns-hand { font-size: 24px; line-height: 1.1; }
.ns-day { font-weight: 800; font-size: 16px; margin-top: 4px; }

.ns-cert { margin: 4px 0 0; }
.ns-cert img { display: block; width: 100%; max-width: 760px; height: auto; background: var(--panel-2); border: 1px solid var(--rule-strong); }

.ns-table .ns-cell { max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-table td, .ns-table th { white-space: nowrap; }
@media (max-width: 639px) {
  .ns-table .ns-what, .ns-table .ns-srccol { display: none; }
  .ns-table .ns-cell { width: 100%; }
}

@media (min-width: 900px) {
  .ns-page > .ns-mini { grid-column: 2; grid-row: 1 / span 8; align-self: start; margin-top: 4px; }
}

.ns-quote { margin-top: 8px; }
.ns-quote .code { color: var(--dim); }

.ns-mini {
  --paper-ink: #2A1A10; --paper-red: #C23B2A;
  position: relative; display: block; container-type: inline-size; width: 100%; max-width: 440px; margin: 14px 0 0;
}
.ns-mini img { display: block; width: 100%; height: auto; }
.ns-mini:hover { text-decoration: none; filter: brightness(1.06); }
.ns-mini-big, .ns-mini-stamp { position: absolute; white-space: nowrap; line-height: 1; pointer-events: none; }
.ns-mini-big { left: 49%; top: 43.5%; transform: translate(-50%, -50%) rotate(-1.5deg); font-size: 11cqw; font-weight: 800; letter-spacing: -.04em; color: var(--paper-ink); }
.ns-mini-stamp {
  left: 4%; top: 55%; transform: rotate(-10deg); padding: .5cqw 1.4cqw;
  border: .5cqw solid var(--paper-red); border-radius: 1cqw; font-size: 2.1cqw; font-weight: 800; letter-spacing: .15cqw; color: var(--paper-red); opacity: .88;
}

.ns-yard { margin-top: 18px; }
.ns-yard-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ns-mini-stone {
  width: 84px; height: 100px; display: flex; align-items: center; justify-content: center; padding-top: 18px;
  background: var(--stone); color: var(--stone-ink); border: 3px solid var(--stone-ink); border-radius: 42px 42px 4px 4px;
  font-weight: 800; font-size: 18px; letter-spacing: -.02em;
}
.ns-mini-stone:hover { text-decoration: none; background: var(--text); }
@media (max-width: 639px) {
  .ns-yard-row { gap: 8px; }
  .ns-mini-stone { width: calc((100% - 24px) / 4); height: 88px; font-size: 16px; }
}