/*
  Postcard Rack (v07): the postcards themselves, front and back.
  A card is any box with a set width and a height of 1.5 times that width.
  Inside a face, 1cqw is one hundredth of the card's width.
*/

.pc-front,
.pc-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  container-type: size;
}
.pc-front {
  background: var(--lite, #fff6e6);
  color: var(--ink, #222);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.12);
}
.pc-back {
  transform: rotateY(180deg);
  background: #fbf6ea;
  color: #2c2b3c;
}
.pc-front p,
.pc-back p { margin: 0; }

.pc-art {
  position: absolute;
  left: 2.6cqw;
  right: 2.6cqw;
  top: 2.6cqw;
  bottom: 17cqw;
  overflow: hidden;
  background: var(--bg);
  filter: saturate(calc(1 - var(--fade, 0) * 0.9));
}
.pc-art p { margin: 0; }

/* Sun fade and print grain, over the whole face. */
.pc-sun {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 249, 230, calc(var(--fade, 0) * 1.25)) 0%,
      rgba(255, 249, 230, calc(var(--fade, 0) * 0.7)) 48%,
      rgba(255, 249, 230, calc(var(--fade, 0) * 0.2)) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Caption printed along the bottom: number, title, kind. */
.pc-cap {
  position: absolute;
  left: 2.6cqw;
  right: 2.6cqw;
  bottom: 2.6cqw;
  height: 13cqw;
  margin: 0;
  padding: 0 2.2cqw;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-size: 5cqw;
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  color: #29283a;
  background: transparent;
  border: 0;
  border-top: 0.35cqw solid rgba(41, 40, 58, 0.22);
  border-radius: 0;
}
button.pc-cap {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
button.pc-cap::after {
  content: "";
  position: absolute;
  left: -2.6cqw;
  right: -2.6cqw;
  bottom: -2.6cqw;
  height: 150cqw;
  border-radius: 3px;
}
button.pc-cap:focus { outline: none; }
button.pc-cap:focus-visible::after {
  outline: 3px solid #ffd23f;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(15, 26, 60, 0.7);
}
.pc-no {
  flex: none;
  font-family: "Ultra", Georgia, serif;
  font-size: 7cqw;
  color: var(--deep);
}
.pc-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 6cqw;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-cap.is-long .pc-title {
  font-size: 4.6cqw;
  line-height: 1.04;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pc-kind {
  flex: none;
  font-size: 4.8cqw;
  letter-spacing: 0.14em;
  opacity: 0.72;
}

/* Large letters. */
.t-letters .lt-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--sun) 0 30cqw, transparent 30.4cqw),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.16) 0 6deg, transparent 6deg 12deg),
    repeating-linear-gradient(180deg, transparent 0 3cqw, rgba(255, 255, 255, 0.3) 3cqw 3.7cqw) 0 100% / 100% 27% no-repeat,
    linear-gradient(180deg, transparent 0 73%, var(--deep) 73%),
    var(--bg);
}
.t-letters .lt-greet {
  position: absolute;
  left: 0;
  right: 0;
  top: 7cqw;
  text-align: center;
  font-family: "Shrikhand", Georgia, serif;
  font-size: 10.5cqw;
  line-height: 1.1;
  color: var(--lite);
  text-shadow: 0.06em 0.06em 0 var(--deep);
  transform: rotate(-6deg);
}
.t-letters .lt-body {
  position: absolute;
  left: 0;
  right: 0;
  top: 24cqw;
  bottom: 7cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6cqw;
}
.t-letters .lt-small {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--lite);
  background: var(--deep);
  padding: 0.25em 0.6em 0.3em;
  transform: rotate(-2deg);
}
.lt-big {
  position: relative;
  font-family: "Ultra", Georgia, serif;
  line-height: 1.04;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lt-big span { display: block; }
.lt-ext {
  color: var(--deep);
  text-shadow:
    0.012em 0.012em 0 var(--deep), 0.024em 0.024em 0 var(--deep), 0.036em 0.036em 0 var(--deep),
    0.048em 0.048em 0 var(--deep), 0.06em 0.06em 0 var(--deep), 0.072em 0.072em 0 var(--deep),
    0.084em 0.084em 0 var(--deep), 0.096em 0.096em 0 var(--deep);
}
.lt-line,
.lt-fill {
  position: absolute;
  left: 0;
  top: 0;
}
.lt-line {
  color: var(--lite);
  -webkit-text-stroke: 0.08em var(--lite);
}
.lt-fill {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: repeating-linear-gradient(-40deg, var(--lite) 0 0.07em, var(--acc) 0.07em 0.14em);
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
}
.lt-fill.has-img {
  background-size: cover;
  background-position: 50% 45%;
}

/* Sunburst. */
.t-sunburst .sb-rays {
  position: absolute;
  inset: -10%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--bg) 0 7.5deg, var(--deep) 7.5deg 15deg);
}
.t-sunburst .sb-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56cqw;
  height: 56cqw;
  margin: -28cqw 0 0 -28cqw;
  border-radius: 50%;
  background: var(--lite);
  box-shadow: 0 0 0 2.2cqw var(--sun), 0 0 0 3.2cqw var(--deep);
  display: grid;
  place-items: center;
}
.t-sunburst .sb-motif { width: 44cqw; height: 44cqw; }
.t-sunburst .sb-arc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.t-sunburst .sb-arc-text {
  fill: var(--lite);
  stroke: var(--deep);
  stroke-width: 1.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.t-sunburst .sb-ribbon {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 104cqw;
  text-align: center;
}
.t-sunburst .sb-ribbon span {
  display: inline-block;
  max-width: 100%;
  font-family: "Shrikhand", Georgia, serif;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--deep);
  background: var(--sun);
  padding: 0.22em 1em 0.32em;
  transform: rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}

/* A drawn object. */
.t-motif .mo-field {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 33%, rgba(255, 255, 255, 0.32) 0 26cqw, transparent 50cqw), var(--bg);
}
.t-motif .mo-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--deep) 0.55cqw, transparent 0.65cqw) 0 0 / 3cqw 3cqw;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 45%, #000 100%);
}
.t-motif .mo-frame {
  position: absolute;
  inset: 3.4cqw;
  border: 0.8cqw dashed var(--lite);
  border-radius: 2cqw;
  opacity: 0.7;
}
.t-motif .mo-pic {
  position: absolute;
  left: 50%;
  top: 9cqw;
  width: 70cqw;
  height: 70cqw;
  margin-left: -35cqw;
}
.t-motif .mo-title {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 82cqw;
  bottom: 6cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Ultra", Georgia, serif;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0.05em 0.05em 0 var(--sh), 0.08em 0.08em 0 var(--sh);
}
.t-motif .mo-title span { display: block; white-space: nowrap; }

/* Sea and sky, with the title reflected in the water. */
.t-reflect .rf-sky {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56%;
  background: linear-gradient(180deg, var(--deep) 0%, var(--acc) 52%, var(--bg) 82%, var(--sun) 100%);
}
.t-reflect .rf-sun {
  position: absolute;
  left: 74%;
  top: 56%;
  width: 30cqw;
  height: 30cqw;
  margin: -15cqw 0 0 -15cqw;
  border-radius: 50%;
  background: var(--sun);
  clip-path: inset(0 0 50% 0);
}
.t-reflect .rf-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 56%;
  bottom: 0;
  background:
    radial-gradient(ellipse 10cqw 46cqw at 74% 0, rgba(255, 224, 138, 0.75), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 2.2cqw, rgba(255, 255, 255, 0.13) 2.2cqw 2.8cqw),
    linear-gradient(180deg, var(--deep), #1c1f4f);
}
.t-reflect .rf-title,
.t-reflect .rf-mirror {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44%;
  text-align: center;
  font-family: "Ultra", Georgia, serif;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--deep);
}
.t-reflect .rf-title { text-shadow: 0.04em 0.04em 0 var(--sun); }
.t-reflect .rf-title span,
.t-reflect .rf-mirror span { display: block; white-space: nowrap; }
.t-reflect .rf-mirror {
  color: var(--lite);
  transform-origin: 50% 100%;
  transform: scaleY(-1);
  opacity: 0.45;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 1.5cqw, transparent 1.5cqw 2.4cqw);
  mask-image: repeating-linear-gradient(180deg, #000 0 1.5cqw, transparent 1.5cqw 2.4cqw);
}

/* Photograph with a ribbon. */
.t-photo .pc-art { background: #fbf6ea; }
.t-photo .ph-frame {
  position: absolute;
  left: 3.2cqw;
  right: 3.2cqw;
  top: 3.2cqw;
  height: 88cqw;
  overflow: hidden;
  background: #c9c2b4;
}
.t-photo .ph-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: sepia(0.28) saturate(1.35) contrast(1.06) brightness(1.04);
}
.t-photo .ph-dots {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(20, 10, 0, 0.2) 0.35cqw, transparent 0.45cqw) 0 0 / 1.6cqw 1.6cqw;
}
.t-photo .ph-ribbon {
  position: absolute;
  left: -4cqw;
  right: -4cqw;
  top: 72cqw;
  text-align: center;
  transform: rotate(-7deg);
}
.t-photo .ph-ribbon span {
  display: inline-block;
  font-family: "Shrikhand", Georgia, serif;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--ink);
  background: var(--bg);
  padding: 0.18em 0.7em 0.28em;
  box-shadow: 0.8cqw 0.8cqw 0 rgba(0, 0, 0, 0.22);
}
.t-photo .ph-hand {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  top: 97cqw;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 8.4cqw;
  line-height: 1.1;
  color: #2a4aa0;
  transform: rotate(-3deg);
}

/* Deckchair stripes. */
.t-stripes .st-field {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--bg) 0 11.85cqw, var(--lite) 11.85cqw 23.7cqw);
}
.t-stripes .st-field::before,
.t-stripes .st-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4.6cqw;
  background: linear-gradient(180deg, #c99a5f, #8b5d2e);
}
.t-stripes .st-field::before { top: 0; }
.t-stripes .st-field::after { bottom: 0; }
.t-stripes .st-greet {
  position: absolute;
  left: 0;
  right: 0;
  top: 9cqw;
  text-align: center;
  font-family: "Shrikhand", Georgia, serif;
  font-size: 8cqw;
  line-height: 1;
  color: var(--lite);
  text-shadow: 0.06em 0.06em 0 var(--deep), -0.03em -0.03em 0 var(--deep), 0.03em -0.03em 0 var(--deep), -0.03em 0.03em 0 var(--deep);
  transform: rotate(-4deg);
}
.t-stripes .st-panel {
  position: absolute;
  left: 9cqw;
  right: 9cqw;
  top: 24cqw;
  bottom: 9cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3cqw;
  background: var(--lite);
  border-radius: 3cqw;
  box-shadow: 1.2cqw 1.2cqw 0 rgba(0, 0, 0, 0.18);
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
  text-align: center;
}
.t-stripes .st-panel span { display: block; white-space: nowrap; letter-spacing: 0.01em; }
.t-stripes .st-a { color: var(--deep); }
.t-stripes .st-b { color: var(--acc); }

/* A big number. */
.t-numeral .nu-field {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.t-numeral .nu-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--lite) 1.6cqw, transparent 1.7cqw) 0 0 / 9cqw 9cqw;
  opacity: 0.3;
}
.t-numeral .nu-no {
  position: absolute;
  left: 0;
  right: 0;
  top: 3cqw;
  text-align: center;
  font-family: "Ultra", Georgia, serif;
  line-height: 1;
  color: var(--sun);
  -webkit-text-stroke: 0.025em var(--deep);
  text-shadow: 0.05em 0.05em 0 var(--deep);
}
.t-numeral .nu-title {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 7cqw;
  padding: 3cqw;
  background: var(--lite);
  color: var(--deep);
  font-family: "Antonio", "Arial Narrow", sans-serif;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
  text-align: center;
}
.t-numeral .nu-title span { display: block; white-space: nowrap; }
.t-numeral .nu-kind {
  position: absolute;
  right: 6cqw;
  top: 56cqw;
  width: 24cqw;
  height: 24cqw;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acc);
  color: var(--lite);
  font-family: "Antonio", sans-serif;
  font-size: 5cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(12deg);
}
.t-numeral .nu-pic {
  position: absolute;
  left: 6cqw;
  top: 56cqw;
  width: 26cqw;
  height: 26cqw;
}

/* A painted wall. */
.t-wall .wl-bricks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.t-wall .wl-body {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 9cqw;
  bottom: 38cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  text-align: center;
}
.t-wall .wl-small {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--deep);
  background: var(--lite);
  padding: 0.22em 0.55em 0.28em;
}
.t-wall .wl-big {
  font-family: "Ultra", Georgia, serif;
  line-height: 1;
  white-space: nowrap;
  color: var(--lite);
  text-shadow: 0.05em 0.05em 0 var(--deep), 0.08em 0.08em 0 var(--deep);
}

/* Stickers. */
.t-stickers .sk-field {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.28), transparent 60%), var(--bg);
}
.t-stickers .sk-s {
  position: absolute;
  width: 40cqw;
  height: 26.7cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2cqw;
  box-sizing: border-box;
  text-align: center;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 6.4cqw;
  font-weight: 700;
  line-height: 1;
  color: #1d1d2b;
  background: #fffdf6;
  border-radius: 1.6cqw;
  box-shadow: 0.6cqw 0.8cqw 0 rgba(0, 0, 0, 0.2);
}
.t-stickers .sk-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 40cqw;
  text-align: center;
  font-family: "Shrikhand", Georgia, serif;
  line-height: 0.92;
  color: var(--lite);
  text-shadow: 0.05em 0.05em 0 var(--deep), 0.09em 0.09em 0 var(--deep);
  transform: rotate(-6deg);
}
.t-stickers .sk-title span { display: block; white-space: nowrap; }

/* The printed back seen on the rack. */
.pc-plain { background: #f2ecdc; }
.pc-plain span { position: absolute; display: block; }
.pc-plain .pb-head {
  left: 0;
  right: 0;
  top: 6cqw;
  text-align: center;
  font-family: "Antonio", sans-serif;
  font-size: 5cqw;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #8b8577;
}
.pc-plain .pb-rule { left: 50%; top: 20cqw; bottom: 10cqw; width: 0.6cqw; background: #bcb5a5; }
.pc-plain .pb-stamp { right: 7cqw; top: 20cqw; width: 22cqw; height: 26cqw; border: 0.6cqw dashed #bcb5a5; }
.pc-plain .pb-lines {
  left: 56cqw;
  right: 7cqw;
  top: 70cqw;
  height: 50cqw;
  background: repeating-linear-gradient(180deg, transparent 0 11cqw, #cbc4b4 11cqw 11.6cqw);
}

/* The written back. */
.bk-in {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  container-type: size;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(240, 210, 150, 0.22), transparent 60%),
    #fbf6ea;
}
.bk-head {
  font-family: "Antonio", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--deep);
}
.bk-msg {
  min-height: 0;
  overflow: hidden;
  font-family: "Kalam", "Comic Sans MS", cursive;
  line-height: 1.28;
  color: #20398a;
}
.bk-msg p + p { margin-top: 0.45em; }
.bk-ps-mark { font-weight: 700; }
.bk-sign {
  text-align: right;
  font-size: 1.2em;
  font-weight: 700;
  transform: rotate(-4deg);
}
.bk-rule {
  position: relative;
  font-family: "Antonio", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8f8a80;
}
.bk-side { position: relative; min-width: 0; min-height: 0; }
.bk-stamp { display: block; height: auto; filter: drop-shadow(1px 1.5px 0 rgba(0, 0, 0, 0.18)); }
.bk-mark { position: absolute; height: auto; color: rgba(62, 46, 112, 0.62); pointer-events: none; }
.bk-addr {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "Kalam", "Comic Sans MS", cursive;
  line-height: 1.6em;
  color: #20398a;
  background: repeating-linear-gradient(180deg, transparent 0 calc(1.6em - 1.5px), #a29c8f calc(1.6em - 1.5px) 1.6em);
}
.bk-addr li { min-height: 1.6em; }

/* Landscape back: the card is turned on its side to read it. */
.bk-in.is-land {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(90deg);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) 3.2cqw minmax(0, 0.88fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 2.8cqw;
  row-gap: 2.4cqh;
  padding: 3.6cqh 4.4cqw 5cqh;
}
.is-land .bk-head { grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: 2.3cqw; }
.is-land .bk-msg { grid-column: 1; grid-row: 2; font-size: 3.5cqw; padding-top: 2cqh; }
.is-land .bk-rule { grid-column: 2; grid-row: 2; }
.is-land .bk-rule::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1.5px;
  background: #9c968a;
}
.is-land .bk-rule span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.35cqw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.is-land .bk-side { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; }
.is-land .bk-stamp { align-self: flex-end; width: 14.5cqw; transform: rotate(2deg); }
.is-land .bk-mark { top: 7cqh; right: 8cqw; width: 29cqw; transform: rotate(-9deg); }
.is-land .bk-addr { margin-top: auto; font-size: 2.9cqw; }

/* Portrait back, used on a phone. */
.bk-in.is-port {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 25cqw;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  column-gap: 3cqw;
  padding: 5cqw 5.5cqw 6cqw;
}
.is-port .bk-side { display: contents; }
.is-port .bk-head { grid-column: 1; grid-row: 1; font-size: 3.8cqw; align-self: start; padding-top: 1cqw; }
.is-port .bk-stamp { grid-column: 2; grid-row: 1 / span 2; width: 25cqw; justify-self: end; transform: rotate(2deg); }
.is-port .bk-mark { top: 14cqw; right: 17cqw; width: 50cqw; transform: rotate(-9deg); }
.is-port .bk-msg { grid-column: 1 / -1; grid-row: 3; font-size: 5.6cqw; padding-top: 5cqw; }
.is-port .bk-rule {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 3cqw;
  padding-top: 1.6cqw;
  border-top: 1.5px solid #9c968a;
  font-size: 2.6cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.is-port .bk-addr { grid-column: 1 / -1; grid-row: 5; margin-top: 3cqw; font-size: 4.8cqw; }