@font-face { font-family: "Special Elite"; src: url(/static/vendor/fonts/special-elite-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 400; src: url(/static/vendor/fonts/playfair-display-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 400; font-style: italic; src: url(/static/vendor/fonts/playfair-display-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; src: url(/static/vendor/fonts/playfair-display-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: italic; src: url(/static/vendor/fonts/playfair-display-latin-700-italic.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 900; src: url(/static/vendor/fonts/playfair-display-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-style: italic; src: url(/static/vendor/fonts/playfair-display-latin-900-italic.woff2) format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-weight: 400; src: url(/static/vendor/fonts/old-standard-tt-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-weight: 400; font-style: italic; src: url(/static/vendor/fonts/old-standard-tt-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Old Standard TT"; font-weight: 700; src: url(/static/vendor/fonts/old-standard-tt-latin-700-normal.woff2) format("woff2"); }

:root {
  --paper: #ece2c6;
  --paper-2: #e2d5b1;
  --paper-3: #d6c69c;
  --ink: #1d1a16;
  --ink-2: #4a4237;
  --ink-3: #7a6e5c;
  --blood: #8b1414;
  --blood-2: #a52a2a;
  --rule: #2a251f;
  --night: #121110;
  --night-2: #1d1b18;
  --gold: #b08d3c;
  --ok: #2f5d2f;
  --f-head: "Playfair Display", "Bodoni 72", Didot, Georgia, serif;
  --f-body: "Old Standard TT", "Times New Roman", Georgia, serif;
  --f-type: "Special Elite", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.18), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.stamp {
  display: inline-block; font-family: var(--f-type); text-transform: uppercase; letter-spacing: .08em;
  border: 3px double currentColor; padding: .1em .45em; transform: rotate(-4deg); color: var(--blood);
  opacity: .9; font-size: .8rem; line-height: 1.2;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.2 1.6'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.stamp.ok { color: var(--ok); }
.stamp.ink { color: var(--ink); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: .6rem 0; }
.rule.double { border-top: 3px double var(--rule); }
.kicker { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--ink-2); }
.type { font-family: var(--f-type); }
.muted { color: var(--ink-3); }
.hidden { display: none !important; }

button, .btn {
  font-family: var(--f-type); font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--ink); color: var(--paper); border: 0; padding: .8rem 1.1rem; border-radius: 2px;
  cursor: pointer; min-height: 44px; touch-action: manipulation;
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
button:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
button.ghost, a.btn.ghost, label.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
button.red { background: var(--blood); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea, select {
  font-family: var(--f-type); font-size: 1.05rem; background: #f6efda; color: var(--ink);
  border: 1.5px solid var(--ink-2); border-radius: 2px; padding: .7rem .8rem; width: 100%; min-height: 44px;
}
input:focus, textarea:focus { outline: 2px solid var(--blood); outline-offset: 1px; }

/* classificação indicativa */
.age { display: inline-flex; align-items: center; justify-content: center; min-width: 1.45em; height: 1.45em; padding: 0 .25em; font: 700 .72rem/1 var(--f-type, monospace);
  color: #fff; background: #2e9f4f; border-radius: 3px; vertical-align: middle; letter-spacing: 0; box-sizing: border-box; }
.age-10 { background: #1b8dd6; } .age-12 { background: #e7b416; color: #111; } .age-14 { background: #e8741c; } .age-16 { background: #d62b2b; } .age-18 { background: #111; border: 1px solid #888; }
.age-why { font-family: var(--f-type, monospace); font-size: .7rem; margin-left: .5em; opacity: .8; vertical-align: middle; }