#jcard .template {
   --heightJCardCover: calc(
    var(--lengthJCardCover) * var(--jCardCoverHeightFactor)
  );
  --lengthJCardBack: var(--lengthJCardBackStandard);
  --lengthJCardBackDelta: calc(
    var(--lengthJCardBackTemplate) - var(--lengthJCardBack)
  );
  --lengthJCardBackShort: 0.5in;
  --lengthJCardBackStandard: .7in;
  --lengthJCardBackTemplate: var(--lengthJCardBackStandard);
  --lengthJCardBleed: 0.1in;
  --lengthJCardBleedMirror: -0.1in;
  --lengthJCardBleed2: 0.1in;
  --lengthJCardBleed2Mirror: -0.1in;
  --lengthJCardCover: min(var(--lengthJCardHeight), var(--lengthJCardFront));
  --lengthJCardFront:  2.12in;
  --lengthJCardHeight: 2.87in;
  --lengthJCardSpine: var(--lengthJCardSpineStandard);
  --lengthJCardSpineDelta: calc(
    var(--lengthJCardSpineTemplate) - var(--lengthJCardSpine)
  );
  --lengthJCardSpineShort: 0.4in;
  --lengthJCardSpineStandard: 0.5in;
  --lengthJCardSpineTemplate: var(--lengthJCardSpineStandard);
  --spacerJCard: 0.1in;
  --spacerJCardShortBack: 0.075i

);

/* DAT spine */
--lengthJCardSpineShort: 0.394in;
--lengthJCardSpineStandard: 0.394in;
--lengthJCardSpineTemplate: var(--lengthJCardSpineStandard);

/* Spacing scaled down */
--spacerJCard: 0.08in;
--spacerJCardShortBack: 0.05in;


}

#font-size-test {
  border-width: 1px;
  font-family: "Alte Haas Grotesk";
  font-size: calc(12pt / var(--jCardFontSizeFactorInvert));
  line-height: 1;
  padding: 0.25em;
}

#jcard {
  margin: auto;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

#jcard .black-and-white {
  filter: grayscale() contrast(255);
}

#jcard .bold {
  font-weight: bold;
}

#jcard .force-caps {
  text-transform: uppercase;
}

#jcard .hidden,
#jcard .template-back.hidden,
#jcard .template-front-group.hidden,
#jcard .template-spine.hidden {
  display: none;
}

#jcard .italicize {
  font-style: italic;
}

#jcard .printable {
  margin: var(--lengthJCardBleed2);
  position: relative;
  z-index: 0;
}

#jcard .printable-bleed,
#jcard .printable-crop,
#jcard .template-boundaries {
  background-color: inherit;
}

#jcard .printable-bleed {
  z-index: -2;
  position: absolute;
  top: var(--lengthJCardBleedMirror);
  left: var(--lengthJCardBleedMirror);
  right: var(--lengthJCardBleedMirror);
  bottom: var(--lengthJCardBleedMirror);
}

#jcard .printable-crop {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#jcard .printable-crop::before,
#jcard .printable-crop::after,
#jcard .printable-fold::before {
  border-color: var(--jCardTextColor);
  border-width: var(--widthJCardOutline);
  content: "";
  filter: grayscale();
}

#jcard .printable-crop::before {
  border-left-style: solid;
  border-right-style: solid;
  position: absolute;
  top: var(--lengthJCardBleed2Mirror);
  left: 0;
  right: 0;
  bottom: var(--lengthJCardBleed2Mirror);
}

#jcard .printable-crop::after {
  border-bottom-style: solid;
  border-top-style: solid;
  position: absolute;
  top: 0;
  left: var(--lengthJCardBleed2Mirror);
  right: var(--lengthJCardBleed2Mirror);
  bottom: 0;
}

#jcard .printable-fold {
  width: var(--widthJCardOutline);
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
}

#jcard .printable-fold::before {
  border-left-style: solid;
  position: absolute;
  top: var(--lengthJCardBleed2Mirror);
  left: calc(-1 * (var(--widthJCardOutline) / 2));
  right: 0;
  bottom: var(--lengthJCardBleed2Mirror);
}

#jcard .template {
  color: var(--jCardTextColor);
  font-family: var(--jCardFontFamily);
  height: var(--lengthJCardHeight);
  line-height: 1.1;
  width: calc(
    var(--lengthJCardBackTemplate) + var(--lengthJCardSpineTemplate) +
      var(--lengthJCardFront)
  );
}

#jcard .template.short-back {
  --lengthJCardBack: var(--lengthJCardBackShort);
}

#jcard .template.short-back .template-back {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--spacerJCardShortBack);
}

#jcard .template.short-back .template-side-a-contents,
#jcard .template.short-back .template-side-b-contents {
  flex-grow: 1;
  margin: 0 var(--spacerJCardShortBack);
}

#jcard .template.short-back .template-side-a-label,
#jcard .template.short-back .template-side-b-label {
  display: none;
}

#jcard .template.short-spine {
  --lengthJCardSpine: var(--lengthJCardSpineShort);
}

#jcard .template.reverse,
#jcard .template.reverse .template-foreground {
  transform: rotateY(180deg);
}

#jcard .template-back {
  display: flex;
  flex-flow: column nowrap;
  font-size: calc(var(--jCardBackSize) / var(--jCardFontSizeFactorInvert));
  height: var(--lengthJCardBack);
  justify-content: center;
  padding: 0 var(--spacerJCard);
  position: absolute;
  text-align: var(--jCardBackContentsAlignment);
  transform: translate(
      calc(var(--lengthJCardBackDelta) + var(--lengthJCardSpineDelta)),
      calc(-1 * var(--lengthJCardBack))
    )
    rotate(90deg);
  transform-origin: bottom left;
  width: var(--lengthJCardHeight);
}

#jcard .template-boundaries {
  background-color: var(--jCardCardColor);
  position: absolute;
  top: 0;
  left: calc(var(--lengthJCardBackDelta) + var(--lengthJCardSpineDelta));
  right: 0;
  bottom: 0;
}

#jcard .template-contents,
#jcard .template-front-title-group.center {
  margin-block-end: auto;
  margin-block-start: auto;
}

#jcard .template-contents {
  font-size: calc(var(--jCardFrontSize) / var(--jCardFontSizeFactorInvert));
  line-height: 1.2;
  text-align: var(--jCardFrontContentsAlignment);
}

#jcard .template-cover {
  height: var(--heightJCardCover);
  object-fit: cover;
  position: absolute;
  width: var(--lengthJCardCover);
}

#jcard .template-cover.fill {
  height: inherit;
  width: inherit;
  z-index: 1;
}

#jcard .template-fold-1 {
  left: calc(var(--lengthJCardBackTemplate) + var(--lengthJCardSpineDelta));
}

#jcard .template-fold-2 {
  left: calc(var(--lengthJCardBackTemplate) + var(--lengthJCardSpineTemplate));
}

#jcard .template-footer {
  font-size: calc(var(--jCardFooterSize) / var(--jCardFontSizeFactorInvert));
  text-align: var(--jCardFooterAlignment);
}

#jcard .template-front {
  height: var(--lengthJCardHeight);
  width: var(--lengthJCardFront);
  position: absolute;
  left: calc(var(--lengthJCardBackTemplate) + var(--lengthJCardSpineTemplate));
}

#jcard .template-front-group {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  height: calc(var(--lengthJCardHeight) - var(--heightJCardCover));
  justify-content: space-between;
  padding: calc(var(--spacerJCard) / 3) var(--spacerJCard);
  position: relative;
  top: var(--heightJCardCover);
}

#jcard .template-front-title-group,
#jcard .template-spine-title-group {
  font-weight: bold;
  white-space: nowrap;
}

#jcard .template-front-title-group {
  position: relative;
  text-align: var(--jCardFrontTitleAlignment);
}

#jcard .template-front-title-lower,
#jcard .template-spine-title-lower {
  font-size: calc(
    var(--jCardTitleLowerSize) / var(--jCardFontSizeFactorInvert)
  );
}

#jcard .template-front-title-upper,
#jcard .template-spine-title-upper {
  font-size: calc(
    var(--jCardTitleUpperSize) / var(--jCardFontSizeFactorInvert)
  );
}

#jcard .template-note-group,
#jcard .template-spine-title-group {
  padding: 0 var(--spacerJCard);
  position: inherit;
  width: var(--lengthJCardHeight);
}

#jcard .template-note-group {
  font-size: calc(var(--jCardNoteSize) / var(--jCardFontSizeFactorInvert));
  text-align: var(--jCardNoteAlignment);
}

#jcard .template-side-a-contents {
  margin-bottom: 0.5em;
}

#jcard .template-side-a-contents:empty,
#jcard .template-side-a-label:empty,
#jcard .template-side-b-contents:empty,
#jcard .template-side-b-label:empty {
  display: none;
}

#jcard .template-side-a-label,
#jcard .template-side-b-label {
  font-weight: bold;
}

#jcard .template-spine {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  height: var(--lengthJCardSpine);
  justify-content: space-between;
  position: absolute;
  transform: translate(
      calc(var(--lengthJCardBackTemplate) + var(--lengthJCardSpineDelta)),
      calc(-1 * var(--lengthJCardSpine))
    )
    rotate(90deg);
  transform-origin: bottom left;
  width: var(--lengthJCardHeight);
}

#jcard .template-spine-title-group {
  text-align: var(--jCardSpineTitleAlignment);
}

#output {
  background-color: var(--colorAccentLowDent);
  border-block-end-color: var(--colorAccentHigh);
  border-block-end-style: solid;
  border-block-end-width: var(--widthBorderDentEnd);
  border-block-start-color: var(--colorAccentLow);
  border-block-start-style: solid;
  border-block-start-width: var(--widthBorderDentStart);
  border-inline-end-color: var(--colorAccentHigh);
  border-inline-end-style: solid;
  border-inline-end-width: var(--widthBorderDentEnd);
  border-inline-start-color: var(--colorAccentLow);
  border-inline-start-style: solid;
  border-inline-start-width: var(--widthBorderDentStart);
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  overflow: auto;
  padding: var(--paddingEntry);
  width: 100%;
}

form .follow-font-family {
  font-family: var(--jCardFontFamily);
}

form label > sub,
form label > sup {
  color: var(--colorAccentHigh);
}

@media (prefers-color-scheme: light) {
  body:not(.dark) #output {
    border-block-end-color: var(--colorAccentLow);
    border-block-start-color: var(--colorAccentHigh);
    border-inline-end-color: var(--colorAccentLow);
    border-inline-start-color: var(--colorAccentHigh);
  }
}

@media print {
  #jcard {
    display: flex;
    flex-flow: row wrap;
    margin: unset;
  }

  #jcard .printable.half-margin {
    margin: calc(var(--lengthJCardBleed2) / 2);
  }

  #jcard .printable.outline .printable-bleed,
  #jcard .printable.outline .printable-crop {
    outline: var(--widthJCardOutline) dotted var(--jCardTextColor);
  }

  #jcard .template.variable-width {
    --lengthJCardBackTemplate: var(--lengthJCardBack);
    --lengthJCardSpineTemplate: var(--lengthJCardSpine);
  }

  #output {
    background-color: unset;
    border: unset;
    overflow: hidden;
    padding: unset;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@font-face {
  font-family: "Alte Haas Grotesk";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/alte-haas-grotesk.ttf") format("truetype");
}

@font-face {
  font-family: "Alte Haas Grotesk";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/alte-haas-grotesk-bold.ttf") format("truetype");
}