:root {
  --frame-dark: #1f1b17;
  --frame-light: #5d5142;
  --frame-corner-size: 26px;
  --frame-outer-offset: 2.5px;
  --frame-inner-offset: 8px;
  --frame-outer-width: 2.6px;
  --frame-inner-width: 1.3px;
}

.newspaper-card {
  position: relative;
  overflow: hidden;
  background: rgba(246, 235, 204, 0.18);
}

.card-content {
  position: relative;
  z-index: 6;
  height: 100%;
}

.frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.frame .edge {
  position: absolute;
  display: block;
}

.frame .edge.outer.top {
  top: var(--frame-outer-offset);
  left: calc(var(--frame-corner-size) - 2px);
  right: calc(var(--frame-corner-size) - 2px);
  border-top: var(--frame-outer-width) solid var(--frame-dark);
}

.frame .edge.outer.bottom {
  bottom: var(--frame-outer-offset);
  left: calc(var(--frame-corner-size) - 2px);
  right: calc(var(--frame-corner-size) - 2px);
  border-bottom: var(--frame-outer-width) solid var(--frame-dark);
}

.frame .edge.outer.left {
  left: var(--frame-outer-offset);
  top: calc(var(--frame-corner-size) - 2px);
  bottom: calc(var(--frame-corner-size) - 2px);
  border-left: var(--frame-outer-width) solid var(--frame-dark);
}

.frame .edge.outer.right {
  right: var(--frame-outer-offset);
  top: calc(var(--frame-corner-size) - 2px);
  bottom: calc(var(--frame-corner-size) - 2px);
  border-right: var(--frame-outer-width) solid var(--frame-dark);
}

.frame .edge.inner.top {
  top: var(--frame-inner-offset);
  left: calc(var(--frame-corner-size) - 1px);
  right: calc(var(--frame-corner-size) - 1px);
  border-top: var(--frame-inner-width) solid var(--frame-light);
  opacity: .9;
}

.frame .edge.inner.bottom {
  bottom: var(--frame-inner-offset);
  left: calc(var(--frame-corner-size) - 1px);
  right: calc(var(--frame-corner-size) - 1px);
  border-bottom: var(--frame-inner-width) solid var(--frame-light);
  opacity: .9;
}

.frame .edge.inner.left {
  left: var(--frame-inner-offset);
  top: calc(var(--frame-corner-size) - 1px);
  bottom: calc(var(--frame-corner-size) - 1px);
  border-left: var(--frame-inner-width) solid var(--frame-light);
  opacity: .9;
}

.frame .edge.inner.right {
  right: var(--frame-inner-offset);
  top: calc(var(--frame-corner-size) - 1px);
  bottom: calc(var(--frame-corner-size) - 1px);
  border-right: var(--frame-inner-width) solid var(--frame-light);
  opacity: .9;
}

.frame .corner {
  position: absolute;
  width: var(--frame-corner-size);
  height: var(--frame-corner-size);
  background-repeat: no-repeat;
  background-size: var(--frame-corner-size) var(--frame-corner-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M 28 4 H 15 C 15 10 10 15 4 15 V 28' fill='none' stroke='%231f1b17' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M 28 9 H 18 C 18 14 14 18 9 18 V 28' fill='none' stroke='%235d5142' stroke-width='1.3' stroke-linejoin='round' opacity='.9'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.8' fill='%231f1b17'/%3E%3C/svg%3E");
}

.frame .corner.tl { top: 0; left: 0; }
.frame .corner.tr { top: 0; right: 0; transform: scaleX(-1); }
.frame .corner.bl { bottom: 0; left: 0; transform: scaleY(-1); }
.frame .corner.br { bottom: 0; right: 0; transform: scale(-1, -1); }

.simple-card {
  border: 2.2px solid var(--frame-dark);
  box-shadow:
    inset 0 0 0 4px rgba(246, 235, 204, 0.28),
    inset 0 0 0 5.2px rgba(31, 27, 23, .42);
}