/* Shared tokens. Concept: an editor's markup on a conference name tag. */
:root {
  --paper: #f5f6fb;
  --card: #ffffff;
  --ink: #181b3a;
  --ink-2: #5b6087;
  --line: #d9dcec;
  --blue: #3d52f5;
  --blue-ink: #ffffff;
  --red: #e0323a;
  --amber: #b86e00;
  --amber-bg: #fff3d6;
  --hi: #ffe55c;
  --display: "Archivo", system-ui, sans-serif;
  --marker: "Permanent Marker", "Marker Felt", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.5 var(--display);
  font-variation-settings: "wdth" 100;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The struck-out header words, shared by phone and screen */
.banned { display: flex; flex-wrap: wrap; gap: .4em .9em; padding: 0; margin: 0; list-style: none; }
.banned li {
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: .14em;
}

/* Name tag */
.tag {
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(24, 27, 58, .45);
}
.tag-band {
  background: var(--blue);
  color: var(--blue-ink);
  padding: .7em 1.1em .6em;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  letter-spacing: .01em;
  line-height: 1.1;
}
.tag-band small { display: block; font-weight: 500; font-variation-settings: "wdth" 100; opacity: .85; }
.tag-body { padding: .9em 1.1em 1.2em; }
.tag-name { font-family: var(--marker); font-size: 2.3em; line-height: 1.05; margin: 0 0 .25em; word-break: break-word; }
.tag-hook { font-weight: 700; font-size: 1.2em; line-height: 1.3; margin: 0 0 .5em; }
.tag-opener { margin: 0; color: var(--ink-2); font-size: 1.05em; }