/* The look 1.5.0: colors, faces and base text, built from its
   design tokens by Style Dictionary 5.6.0. Do not edit; change the tokens. */

/* Text Texturina, the mark and titles New Rocker, codes Texturina. */

/* One theme, with no dark half: the page's colors whatever the device asks. */
:root {
  color-scheme: light;
  --ground: #e4e7ee;
  --paper: #e4e7ee;
  --raised: #e4e7ee;
  --ink: #1a171d;
  --muted: #52485f;
  --rule: #a9a0b4;
  --link: #52485f;
  --visited: #52485f;
  --mark: #b53434;
  --panel: #1a171d;
  --panel-ink: #a9a0b4;
  --panel-muted: #a9a0b4;
  --panel-link: #a9a0b4;
  --panel-mark: #b53434;
  --f-main: "Wizard Text", "Noto Serif", Georgia, serif;
  --f-mark: "Wizard Mark", "Wizard Text", "Noto Serif", Georgia, serif;
  --f-psych: "Wizard Echo Psych", var(--f-mark);
  --f-wood: "Wizard Echo Wood", var(--f-mark);
  --f-mono: "Wizard Code", "Noto Serif", Georgia, serif;
  --w-text: 400; --w-strong: 600; --w-mark: 400;
  --t-small: 14px; --l-small: 21px;
  --t-body: 18px; --l-body: 28px;
  --t-head: 24px; --l-head: 28px;
  --t-title: 32px; --l-title: 42px;
  --t-display: 40px; --l-display: 49px;
  --t-poster: 56px; --l-poster: 63px;
  --t-vertical: 72px; --l-vertical: 77px;
  --t-hero: 144px; --l-hero: 154px;
  --s-1: 7px; --s-2: 14px; --s-3: 21px; --s-4: 28px; --s-5: 42px; --s-6: 56px; --s-7: 84px; --s-8: 112px;
  --rule-hair: 1px; --rule-firm: 2px; --heavy: 6px;
  --r-enclosure: 6px; --r-round: 50%;
  --mark-faces: 4; --f-anim-1: var(--f-main); --f-anim-2: var(--f-psych); --f-anim-3: var(--f-wood);
  --mark-wait-min: 180ms; --mark-wait-max: 700ms; --mark-ink: 0.7;
}

@media (max-width: 720px) {
  :root { --t-title: 24px; --l-title: 28px; --t-display: 32px; --l-display: 42px; --t-poster: 40px; --l-poster: 49px; --t-vertical: 40px; --l-vertical: 49px; --t-hero: 72px; --l-hero: 77px; --heavy: 4px; }
}

/* Faces: each a subset beside this file, with its licence. The echoes are
   for the mark's movement only, each cut to the letters of its words. */
@font-face { font-family: "Wizard Text"; src: url("fonts/texturina.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Wizard Text"; src: url("fonts/texturina-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Wizard Mark"; src: url("fonts/title.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Wizard Echo Psych"; src: url("fonts/boecklins-mark.woff2") format("woff2"); font-display: swap; size-adjust: 91%; }
@font-face { font-family: "Wizard Echo Wood"; src: url("fonts/sancreek-mark.woff2") format("woff2"); font-display: swap; size-adjust: 77.8%; }
@font-face { font-family: "Wizard Code"; src: url("fonts/texturina.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Wizard Code"; src: url("fonts/texturina-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

/* Base text: what every site shares. No layout. */

:root { font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: var(--w-text) var(--t-body)/var(--l-body) var(--f-main);
  font-kerning: normal; font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; height: auto; }
p, ul, ol, dl, pre, table, form, details, blockquote { margin: 0 0 var(--s-2); }
p { text-wrap: pretty; }
ul, ol { padding-left: var(--s-4); }
li { margin: 0 0 var(--s-1); }
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-strong); text-wrap: balance; hyphens: manual; }
b, strong { font-weight: var(--w-strong); }
/* Links are underlined, in main on paper and tint on ink; visited the same. */
a { color: var(--link); text-decoration: underline 1px; text-underline-offset: 3px; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
::selection { background: var(--link); color: var(--paper); }
code, kbd, samp, pre, .hash { font-family: var(--f-mono); font-size: var(--t-small); line-height: var(--l-small); font-variant-ligatures: none; }
code { overflow-wrap: anywhere; }
pre { background: none; border: 0; padding: 0 0 0 var(--s-4); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
/* No rules between sections: a break is space. */
hr { border: 0; margin: var(--s-5) 0; }
.num, td, time { font-variant-numeric: lining-nums tabular-nums; }

/* Figures in this set's text face, Texturina, everywhere. */
body, .num, td, time { font-variant-numeric: normal; }

/* Codes in this set's face: Texturina. */
code, kbd, samp, pre, .hash { font-variant-numeric: normal; }