/* Notes from visitors — a fanned deck of the same postcard backs as /cards.html.
   Card interiors match gallery.css (.gc). The fan is the only new composition.
   Spacing follows the homepage: the section label is the existing 11px kicker. */

.vn {
  --pc-paper: #f3ebdd;
  --pc-ink: #2a2827;
  --vn-sh: 0 0 0 0.5px rgba(42, 36, 24, 0.08), 0 1px 2px rgba(42, 36, 24, 0.06), 0 10px 22px -12px rgba(42, 36, 24, 0.22);
  --vn-sh-hi: 0 0 0 0.5px rgba(42, 36, 24, 0.1), 0 8px 18px -10px rgba(42, 36, 24, 0.28);
  margin: 0 0 64px;
  color: var(--text);
}
.vn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.vn-label {
  margin: 0 0 6px;
}
.vn-all {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 3px;
}
.vn-all:hover { text-decoration-color: currentColor; }
.vn-all:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.vn-n {
  display: inline-block;
  min-width: 1.5ch;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.vn-n.is-wait {
  width: 1.6em;
  height: 0.55em;
  min-width: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  vertical-align: 0.05em;
  color: transparent;
}
.vn-intro {
  max-width: 38em;
  margin: 0;
}
.vn-stage {
  position: relative;
  height: 136px;
  margin-top: 12px;
}
.vn-fan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
}
.vn-card,
.vn-fan .gc-skel {
  --vn-w: 158px;
  position: absolute;
  bottom: 0;
  width: var(--vn-w);
  aspect-ratio: 4 / 3;
  margin: 0;
  transform-origin: 50% 100%;
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), box-shadow 280ms cubic-bezier(0.2, 0, 0, 1);
}
.vn-fan .gc:nth-child(1),
.vn-fan .gc-skel:nth-child(1) { z-index: 1; transform: rotate(-12deg) translate(-8%, 0); }
.vn-fan .gc:nth-child(2),
.vn-fan .gc-skel:nth-child(2) { z-index: 3; transform: rotate(-1deg) translateY(-8%); }
.vn-fan .gc:nth-child(3),
.vn-fan .gc-skel:nth-child(3) { z-index: 2; transform: rotate(11deg) translate(8%, 0); }

@media (hover: hover) and (pointer: fine) {
  .vn-fan:hover .gc:nth-child(1),
  .vn-fan:focus-within .gc:nth-child(1) { transform: rotate(-18deg) translate(-18%, -4%); }
  .vn-fan:hover .gc:nth-child(2),
  .vn-fan:focus-within .gc:nth-child(2) { transform: rotate(-1deg) translateY(-14%); }
  .vn-fan:hover .gc:nth-child(3),
  .vn-fan:focus-within .gc:nth-child(3) { transform: rotate(17deg) translate(18%, -6%); }
}
.vn-card:active { scale: 0.98; }
.vn-fan.is-in .vn-card {
  animation: vn-in 320ms cubic-bezier(0.2, 0, 0, 1) backwards;
}
.vn-fan.is-in .vn-card:nth-child(2) { animation-delay: 40ms; }
.vn-fan.is-in .vn-card:nth-child(3) { animation-delay: 80ms; }
@keyframes vn-in {
  from { opacity: 0; scale: 0.95; }
  to { opacity: 1; scale: 1; }
}

.vn-fallback { margin: 0; }
.vn-fallback[hidden] { display: none; }
.vn.is-fallback .vn-head,
.vn.is-fallback .vn-intro,
.vn.is-fallback .vn-stage { display: none; }
.vn.is-fallback .vn-fallback { display: block; }
.vn-fallback-link {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 3px;
}
.vn-fallback-link:hover { text-decoration-color: currentColor; }
.vn-fallback-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* The gallery card, at deck size. Kept in step with gallery.css .gc. */
.vn .gc {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  color: var(--pc-ink);
  background: var(--pc-paper) var(--paper-sm, none) var(--bp, 50% 50%) / 112% 112% no-repeat;
  box-shadow: var(--vn-sh);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.vn .gc:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 8px;
}
.vn .gc.gc-skel {
  cursor: default;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: none;
  overflow: hidden;
}
.vn .gc.gc-skel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: vn-shimmer 1.35s cubic-bezier(0.2, 0, 0, 1) infinite;
}
.vn .gc.gc-skel::after { content: none; }
@keyframes vn-shimmer {
  to { transform: translateX(120%); }
}

/* The interior is a gallery card (the size where the FROM name still fits),
   scaled down to the fan. Type, the FROM label, and “Raufan” shrink together. */
.vn .gc-fit {
  --vn-ref: 400px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--vn-ref);
  height: calc(var(--vn-ref) * 3 / 4);
  transform: scale(calc(var(--vn-w) / var(--vn-ref)));
  transform-origin: top left;
  container-type: inline-size;
}
.vn .gc-body {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 28%;
  column-gap: 4.6cqw;
  padding: 6.4cqw 6.4cqw 5.4cqw;
  color: var(--pc-ink);
  --line: color-mix(in srgb, var(--pc-ink) 22%, transparent);
  pointer-events: none;
  text-align: left;
}
.vn .g-lab {
  font-size: 11px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 500; opacity: 0.55; white-space: nowrap;
}
.vn .gc-left { display: flex; flex-direction: column; min-width: 0; }
.vn .gc-msg {
  --lh: 1.5em;
  font-family: "Bradley Hand", "Segoe Print", "Apple Chancery", "Noto Sans JP", cursive;
  font-size: clamp(15px, 6.1cqw, 21px);
  line-height: var(--lh);
  letter-spacing: 0;
  height: calc(var(--lh) * 3);
  flex: none;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px) var(--lh));
}
.vn .gc-sig { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; margin-top: 1.6cqw; }
.vn .g-ink {
  position: absolute; left: 0; bottom: 6%; display: block;
  aspect-ratio: var(--ar, 3);
  width: min(calc(var(--fw, 0.6) * 100cqw), calc(88cqh * var(--ar, 3)));
  background: currentColor;
  -webkit-mask: var(--sig) center / 100% 100% no-repeat;
  mask: var(--sig) center / 100% 100% no-repeat;
}
.vn .gc-from, .vn .gc-to {
  display: flex; align-items: baseline; gap: 2.2cqw;
  height: calc(clamp(15px, 6cqw, 20px) * 1.65);
  box-shadow: inset 0 -1px 0 var(--line);
  white-space: nowrap; overflow: hidden; flex: none;
}
.vn .gc-name, .vn .gc-toname {
  font-family: "Bradley Hand", "Segoe Print", "Apple Chancery", "Noto Sans JP", cursive;
  font-size: clamp(14px, 5.7cqw, 19px);
  line-height: 1.65; letter-spacing: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.vn .is-anon { opacity: 0.5; }
.vn .gc-rule { background: var(--line); margin: 2cqw 0; }
.vn .gc-right { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.vn .gc-mark { position: relative; align-self: flex-end; width: 23cqw; aspect-ratio: 1; margin: -1cqw -1cqw 0 0; }
.vn .gc-mark .g-pm { position: absolute; inset: 0; width: 100%; height: 100%; }
.vn .g-pm { color: var(--pc-ink); opacity: 0.62; rotate: -9deg; overflow: visible; }
.vn .g-pm text { font-family: Georgia, "Times New Roman", serif; }
.vn .g-stamp {
  position: absolute; right: 0; top: 0; width: 100%; aspect-ratio: 4 / 3.3; padding: 4.5%;
  background: #fbf8f1; rotate: 2deg;
  -webkit-mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
  mask: radial-gradient(circle at 3px 3px, transparent 1.7px, #000 2px) -3px -3px / 6px 6px round, linear-gradient(#000 0 0) 3px 3px / calc(100% - 6px) calc(100% - 6px) no-repeat;
}
.vn .g-stamp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vn .gc-mark.has-stamp .g-pm { inset: auto; width: 78%; height: auto; left: -38%; top: 46%; }

[data-theme="dark"] .vn {
  --pc-paper: #2a231c;
  --pc-ink: #f0e3cb;
  --vn-sh: 0 0 0 0.5px rgba(255, 236, 200, 0.06), 0 8px 18px -8px rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .vn .g-stamp { background: #ebe2d1; }
[data-theme="dark"] .vn .gc.gc-skel {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vn {
    --pc-paper: #2a231c;
    --pc-ink: #f0e3cb;
    --vn-sh: 0 0 0 0.5px rgba(255, 236, 200, 0.06), 0 8px 18px -8px rgba(0, 0, 0, 0.65);
  }
  :root:not([data-theme="light"]) .vn .g-stamp { background: #ebe2d1; }
  :root:not([data-theme="light"]) .vn .gc.gc-skel {
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }
}

html[data-lang="ja"] .vn .gc-toname { font-size: clamp(11px, 4.4cqw, 14px); }

@media (max-width: 420px) {
  .vn { margin-bottom: 56px; }
  .vn-stage { height: 118px; }
  .vn-card, .vn-fan .gc-skel { --vn-w: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-card, .vn-fan .gc-skel, .vn .gc.gc-skel::before { transition: none; animation: none; }
  .vn-fan.is-in .vn-card { animation: none; }
}