/* Placeholder «Школа Марселя скоро откроется»: a sheet of squared paper with the red margin line.
   Colours are the tokens of static/css/tetrad.css. deploy.py copies the site's fonts (static/fonts/*.woff2), the
   logo and the favicon (static/img/brand/) next to this file; without them system fonts are used. */
:root {
  --paper: #f6f1e4;
  --sheet: #fffdf6;
  --ink: #1c2a4a;
  --ink-2: #46506a;
  --pen-ink: #b5301f;
  --grid: rgba(43, 79, 166, .085);
  --grid-sheet: rgba(43, 79, 166, .07);
  --margin-line: rgba(214, 64, 44, .3);
  --shadow: 0 1px 2px rgba(28, 42, 74, .08), 0 10px 28px rgba(28, 42, 74, .1);
  --f-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-head: "Unbounded", "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}

@font-face {
  font-family: "Golos Text";
  src: url("/golos-text.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/unbounded.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("/caveat.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 30px 30px;
  color: var(--ink);
  font: 400 18px/1.55 var(--f-text);
}

.sheet {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: 32px 20px 28px 52px;
  background-color: var(--sheet);
  background-image: linear-gradient(var(--grid-sheet) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-sheet) 1px, transparent 1px);
  background-size: 30px 30px;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* the red margin line of a school notebook */
.sheet::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 34px;
  width: 2px;
  background: var(--margin-line);
}

.logo { display: block; width: 142px; height: 40px; }

h1 {
  margin: 28px 0 14px;
  font: 700 clamp(24px, 6.4vw, 36px)/1.2 var(--f-head);
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0 0 12px; }

.lead { font-size: 20px; }

p:not(.lead):not(.hand) { color: var(--ink-2); }

.hand {
  margin: 22px 0 0;
  font: 600 30px/1.1 var(--f-hand);
  color: var(--pen-ink);
  transform: rotate(-2deg);
  transform-origin: left center;
}

@media (min-width: 600px) {
  .sheet { padding: 48px 48px 44px 84px; }
  .sheet::before { left: 56px; }
}