/* The unmodified Google Fonts variable files are served locally in this WIP. */
@font-face {
  font-family: "Fraunces";
  src: url("typeface/fraunces-roman.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("typeface/fraunces-italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
html[data-wip-typeface="fraunces"] {
  --pluritual-wip-serif: "Fraunces", Georgia, serif;
  --pluritual-serif: "Fraunces", Georgia, serif;
}
/* Restrained forms, with optical sizing chosen by the rendered text size. */
html[data-wip-typeface="fraunces"] :is(body, body *) {
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
/* The landing headline keeps its original bold sans. Only its timer changes. */
html[data-wip-typeface="fraunces"] main.landing.imprint-landing .imprint-entry > .imprint-next-reveal strong,
html[data-wip-typeface="fraunces"] main.ritual-room > header.pluritual-header .imprint-next-reveal strong,
html[data-wip-typeface="fraunces"] .clock-personal-duration {
  font-family: var(--pluritual-wip-serif);
}
body[data-pluritual-wip="true"] .wip-typeface-controls {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #c5b89b;
}
body[data-pluritual-wip="true"] .wip-typeface-controls h3 {
  margin: 0 0 4px;
  font: 600 11px/1.4 Arial, sans-serif;
}
body[data-pluritual-wip="true"] .wip-typeface-controls button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #c5b89b;
  border-radius: 4px;
  font: 12px/1.3 Arial, sans-serif;
}
body[data-pluritual-wip="true"] .wip-typeface-controls button[aria-pressed="true"] {
  background: #eae1d1;
}