/* The same two-ink press as the app: square corners, hard cream borders,
   unblurred offset shadows. A rounded, soft support page under a hard-edged
   app reads as somebody else's website, and reviewers do open these links. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Courier+Prime:wght@400;700&display=swap');

:root {
  --base: #16140f;
  --deep: #0d0b08;
  --paper: #221e17;
  --cream: #ede3d0;
  --red: #f0512f;
  --blue: #5f81f1;
  --yellow: #f2c81c;

  /* The halftone field is texture, not content. At full-strength cream it
     competes with the sheet edge and reads as noise; at this alpha it registers
     as printed paper and stops pulling the eye. */
  --dots: rgba(237, 227, 208, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--deep);
  background-image: radial-gradient(var(--dots) 1.1px, transparent 1.2px);
  background-size: 9px 9px;
  color: var(--cream);
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 15px;
  line-height: 1.6;
  padding: 32px 18px 72px;
}

/* The dotted field belongs to the page, never under running text. In the app
   every surface is a solid panel with a hard border, and this sheet is the
   same rule: the halftone shows in the margin around it, and everything you
   have to read sits on solid ink. The first version let the dots run straight
   under the body copy and it was unreadable at normal sizes. */
.wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--base);
  border: 3px solid var(--cream);
  box-shadow: 9px 9px 0 var(--red);
  padding: 26px 26px 34px;
}

.masthead {
  background: var(--paper);
  border: 3px solid var(--cream);
  box-shadow: 6px 6px 0 var(--cream);
  padding: 22px 20px;
  margin-bottom: 30px;
}

.kicker { font-size: 11px; letter-spacing: .2em; font-weight: 700; }

h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 7vw, 46px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 8px 0 0;
}

h2 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--cream);
}

h3 { font-size: 14px; font-weight: 700; margin: 20px 0 6px; letter-spacing: .04em; }

p, li { margin: 0 0 12px; }
ul { padding-left: 20px; }

a { color: var(--red); text-decoration: none; border-bottom: 2px solid var(--red); }
a:hover { color: var(--cream); border-color: var(--cream); }

.panel {
  background: var(--paper);
  border: 2px solid var(--cream);
  padding: 16px 18px;
  margin: 18px 0;
}

.panel.loud {
  background: var(--yellow);
  color: var(--base);
  border-width: 3px;
  box-shadow: 5px 5px 0 var(--cream);
}
.panel.loud a { color: var(--base); border-color: var(--base); }

.stamp {
  display: inline-block;
  background: var(--red);
  color: var(--base);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.updated { font-size: 11px; letter-spacing: .1em; font-weight: 700; opacity: .75; }

label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 14px 0 5px; }

input, textarea {
  width: 100%;
  background: var(--base);
  color: var(--cream);
  border: 2px solid var(--cream);
  border-radius: 0;
  padding: 12px;
  font: inherit;
}
input:focus, textarea:focus { outline: 3px solid var(--red); outline-offset: 2px; }
textarea { min-height: 130px; resize: vertical; }

button {
  margin-top: 18px;
  width: 100%;
  background: var(--red);
  color: var(--paper);
  border: 3px solid var(--cream);
  box-shadow: 5px 5px 0 var(--cream);
  border-radius: 0;
  padding: 16px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
}
button:active { transform: translate(5px, 5px); box-shadow: none; }

footer {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 2px solid var(--cream);
  font-size: 11px;
  letter-spacing: .08em;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

table { width: 100%; border-collapse: collapse; margin: 14px 0; }
th, td { border: 2px solid var(--cream); padding: 9px 10px; text-align: left; font-size: 13px; vertical-align: top; }
th { background: var(--paper); font-weight: 700; }

/* The dotted field is decorative; at very small sizes it costs legibility more
   than it adds character. */
@media (max-width: 640px) {
  body { padding: 14px 10px 48px; background-image: none; }
  .wrap { padding: 16px 15px 24px; box-shadow: 6px 6px 0 var(--red); }
  .masthead { padding: 16px 14px; }
  table, th, td { font-size: 12px; }
}