/* Affordable Legal Highlights — plain, light, old-fashioned. No JavaScript. */

html { font-size: 21px; }     /* root size: all rem units scale from this */

body {
  background: #ffffff;
  color: #000000;
  font-family: "EB Garamond", Garamond, "Liberation Serif", "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

a { color: #000000; }

/* ---- header ---- */
header { position: relative; text-align: center; padding-top: 1.2rem; }

nav.corner-left {
  position: absolute; top: 0; left: 0;
  font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.3rem;
  font-weight: bold;
}
nav.corner-left a { text-decoration: none; }
nav.corner-left a:hover { text-decoration: underline; }

nav.corner {
  position: absolute; top: 0; right: 0;
  font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.3rem;
  font-weight: bold;
}
nav.corner a { text-decoration: none; }
nav.corner a:hover { text-decoration: underline; }

h1.site-title {
  font-variant: small-caps;
  font-weight: normal;
  letter-spacing: 0.10em;
  font-size: 3rem;
  margin: 1.6rem 0 0.9rem;
}

.rule { border: none; border-top: 4px double #000; margin: 0.4rem 0 1.6rem; }

/* section ornament — a paragraph mark, in keeping with the subject */
.ornament { text-align: center; font-size: 1.6rem; margin: 1.6rem 0; }

/* ---- introduction ---- */
.intro { text-align: justify; hyphens: auto; }

/* ---- icon grid: 4 columns x 8 rows ---- */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  justify-content: center;
  column-gap: 2.2rem;
  row-gap: 2.6rem;
  margin: 2rem 0;
}
.cell { width: 200px; }
.tile { text-decoration: none; text-align: center; display: block; width: 200px; }
.tile img { width: 200px; height: 200px; display: block; }
.tile .label { display: block; margin-top: 0.55rem; font-size: 1.15rem; font-weight: bold; line-height: 1.3; }
.tile:hover .label { text-decoration: underline; }
.cell .desc {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: justify;
  hyphens: auto;
}

@media (max-width: 980px) { .icon-grid { grid-template-columns: repeat(2, 200px); } }
@media (max-width: 500px)  { .icon-grid { grid-template-columns: 200px; } }

/* ---- footer ---- */
footer { margin-top: 2.5rem; text-align: center; }
footer .rule { margin-bottom: 1.2rem; }
footer a { font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.15rem; }

/* ---- subpages ---- */
.subpage { text-align: center; padding-top: 4rem; }
.subpage h1 { font-weight: normal; font-size: 2.2rem; margin-bottom: 2.2rem; }
.subpage .back { font-variant: small-caps; letter-spacing: 0.05em; }

/* ---- analysis form ---- */
form.analyse { display: inline-block; text-align: left; margin: 0 auto 1rem; }
form.analyse input[type=text] {
  font-family: inherit; font-size: 1rem; padding: 0.25rem 0.4rem;
  border: 1px solid #000; width: 22rem; max-width: 90vw; background: #fff; }
form.analyse input[type=file] { font-family: inherit; font-size: 1rem; margin-top: 0.3rem; }
form.analyse button {
  font-family: inherit; font-variant: small-caps; letter-spacing: 0.05em;
  font-size: 1.15rem; padding: 0.35rem 1.6rem; background: #fff;
  border: 1px solid #000; cursor: pointer; }
form.analyse button:hover { background: #000; color: #fff; }
.subpage .note { max-width: 34rem; margin: 0.6rem auto 1.4rem; font-size: 1rem;
                 text-align: justify; hyphens: auto; }

/* ---- legal page ---- */
.legal h1 { font-variant: small-caps; font-weight: normal; letter-spacing: 0.08em;
            text-align: center; font-size: 2.4rem; }
.legal h2 { font-variant: small-caps; font-weight: normal; letter-spacing: 0.06em;
            font-size: 1.5rem; margin-top: 2.2rem; border-bottom: 1px solid #000;
            padding-bottom: 0.15rem; }
.legal .placeholder { color: #444; }
.legal .back { display: block; text-align: center; margin-top: 3rem;
               font-variant: small-caps; letter-spacing: 0.05em; }