/* Fresh-tape lettering with the approved cut-and-stacked layout. */
.dymo-heading { margin-bottom: .65em; }
.dymo-readable {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dymo-art {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .2em; padding: .05em .1em .12em;
}
.dymo-strip {
  --dymo-angle: -.8deg;
  position: relative; display: inline-block; isolation: isolate; max-width: 100%;
  padding: .45em .57em .43em .71em; color: #f7f5ed;
  font-family: "DM Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.5rem, 4.4vw, 2.875rem); font-weight: 500;
  line-height: 1.15; letter-spacing: .14em; white-space: nowrap;
  transform: rotate(var(--dymo-angle));
}
.dymo-strip:nth-child(2) { --dymo-angle: .8deg; margin-left: .5em; }
.dymo-strip:nth-child(3) { --dymo-angle: -.35deg; margin-left: .18em; }
.dymo-strip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(178deg, #353635 0%, #141514 8%, #070807 38%, #111210 88%, #252623 100%);
  box-shadow: inset 0 1px 1px #ffffff35, inset 0 -1px 1px #000;
  clip-path: polygon(1% 1.5%, 99.5% 0%, 100% 100%, 0% 98%);
}
.dymo-strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15;
  background: repeating-linear-gradient(2deg, transparent 0 5px, #ffffff0b 5px 6px, transparent 6px 11px);
}
.dymo-glyph {
  display: inline-block; position: relative;
  color: #ebe9df;
  background: linear-gradient(155deg, #fff 0%, #e6e5dd 45%, #fdfcf6 57%, #deddd5 100%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .15px #eee;
  filter: drop-shadow(-.4px -.5px 0 #fff7) drop-shadow(.7px 1px .15px #000);
}
.dymo-space { display: inline-block; width: .53em; }
.dymo-home .dymo-strip { font-size: clamp(1rem, 3.6vw, 2.25rem); }
.dymo-invitation .dymo-strip { font-size: clamp(1.375rem, 3vw, 2rem); }

/* Calm view, forced colours and print expose the complete original heading. */
body.calm .dymo-art { display: none; }
body.calm .dymo-readable {
  position: static; width: auto; height: auto; padding: 0; margin: 0;
  overflow: visible; clip-path: none; white-space: normal;
}
@media (forced-colors: active), print {
  .dymo-art { display: none; }
  .dymo-readable {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip-path: none; white-space: normal;
  }
}