/* Cromlix Bonded Warehouse No. 3 - ullage book.
   Slate and brass: an excise office, not a printed form and not a screen. */

:root {
  --slate:   #1b2027;
  --slate-2: #232a33;
  --rule:    #3a4450;
  --chalk:   #e8e4da;
  --chalk-2: #a9b2bd;
  --brass:   #c9a227;
  --brass-2: #8d7219;
  --seal:    #8c2f39;
  --bond:    #4f7d5c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2rem 1rem 5rem;
  background:
    linear-gradient(180deg, #151a20 0%, var(--slate) 22%, var(--slate) 100%);
  color: var(--chalk);
  font-family: Georgia, "Liberation Serif", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.55;
}

.sheet { max-width: 880px; margin: 0 auto; }

/* --------------------------------------------------------------- heading */
.crown {
  text-align: center;
  padding-bottom: 1.1rem;
  border-bottom: 3px double var(--brass-2);
  margin-bottom: 1.5rem;
}

.crown .cypher {
  font-size: 2.1rem;
  color: var(--brass);
  letter-spacing: .5rem;
  line-height: 1;
}

.crown h1 {
  margin: .5rem 0 .2rem;
  font-size: 1.35rem;
  font-weight: normal;
  letter-spacing: .06em;
}

.crown .sub {
  margin: 0;
  font-size: .82rem;
  color: var(--chalk-2);
  font-variant: small-caps;
  letter-spacing: .13em;
}

/* ------------------------------------------------------------------- nav */
nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: .55rem 0 .7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
  font-variant: small-caps;
  letter-spacing: .1em;
  font-size: .92rem;
}

nav a { color: var(--brass); text-decoration: none; border-bottom: 1px solid transparent; }
nav a:hover, nav a:focus { border-bottom-color: var(--brass); outline: none; }
nav a.sealed::after { content: " \2014 under seal"; color: var(--chalk-2); font-size: .8em; }

/* ----------------------------------------------------------------- block */
.block {
  background: var(--slate-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brass-2);
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
}

.block > h2 {
  margin: 0 0 .8rem;
  font-size: .82rem;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .18em;
  color: var(--chalk-2);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--rule);
}

.block.broken { border-left-color: var(--seal); }
.block.broken > h2 { color: #d99; }

/* ----------------------------------------------------------------- table */
table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .1em;
  font-size: .82rem;
  color: var(--chalk-2);
  border-bottom: 1px solid var(--rule);
  padding: .3rem .6rem .35rem 0;
}

td {
  padding: .4rem .6rem .4rem 0;
  border-bottom: 1px solid #2b323b;
  font-size: .95rem;
}

tr:last-child td { border-bottom: none; }

td.no { color: var(--brass); letter-spacing: .04em; }

/* ------------------------------------------------------------------ bond */
dl.bond { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .35rem 1rem; }
dl.bond dt { font-variant: small-caps; letter-spacing: .1em; color: var(--chalk-2); font-size: .88rem; }
dl.bond dd { margin: 0; }
dl.bond dd.right { color: var(--bond); }

/* ----------------------------------------------------------------- marks */
.mark {
  display: block;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--brass);
  background: #1f2530;
  color: var(--brass);
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 1.02rem;
  letter-spacing: .05em;
  word-break: break-all;
  text-align: center;
}

p.note { margin: .6rem 0 0; font-size: .88rem; color: var(--chalk-2); }

footer {
  margin-top: 2rem;
  padding-top: .7rem;
  border-top: 3px double var(--brass-2);
  font-size: .78rem;
  color: var(--chalk-2);
  font-variant: small-caps;
  letter-spacing: .11em;
  text-align: center;
}

@media (max-width: 560px) {
  body { padding: 1.2rem .8rem 3rem; }
  dl.bond { grid-template-columns: 1fr; gap: .1rem; }
  dl.bond dd { margin-bottom: .55rem; }
  .crown .cypher { font-size: 1.7rem; }
  table { font-size: .9rem; }
}