/*
 * The Quit Claim Deed facsimile (R13).
 *
 * Its own file because Propshaft's `stylesheet_link_tag :app` includes every
 * stylesheet in this directory; application.css holds what every page shares.
 *
 * The document is set on paper rather than in the page's own dark surface, and
 * in a serif rather than the interface face. That is the point of it: a reader
 * has to be able to tell at a glance that this is a rendering of a document
 * and not another panel of a website. The stamp across the top is the other
 * half of the same job -- the thing that looks most like a real deed is the
 * thing that most needs to say it is not one -- so it is set in the document's
 * own type size and colour, not in fine print at the bottom.
 */

.deed {
  --deed-paper: #f3ece3;
  --deed-ink: #241c17;
  --deed-ink-muted: #6b5c4f;
  --deed-rule: #cbbcab;

  background: var(--deed-paper);
  color: var(--deed-ink);
  border: 1px solid var(--deed-rule);
  border-radius: 3px;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height: 1.6;
  margin-top: 1.25rem;
  padding: 1.4rem 1.25rem;
}

/* On paper the site's sand link colour is close to invisible, so links inside
   the document get their own. */
.deed a {
  color: #9a3d16;
}

.deed__stamp {
  border: 2px solid var(--rust);
  border-radius: 2px;
  color: var(--rust);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 1.4rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
  text-transform: uppercase;
}

.deed__header {
  border-bottom: 1px solid var(--deed-rule);
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  text-align: center;
}

.deed__title {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.deed__reference {
  color: var(--deed-ink-muted);
  font-size: 0.85rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.deed__clause {
  margin: 0 0 1rem;
}

.deed__clause--reservation {
  border-left: 3px solid var(--rust);
  padding-left: 0.9rem;
}

.deed__section {
  border-top: 1px solid var(--deed-rule);
  margin-top: 1.2rem;
  padding-top: 1.1rem;
}

.deed__section-heading {
  color: var(--deed-ink-muted);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.deed__facts {
  margin: 0;
}

.deed__fact {
  display: grid;
  gap: 0.15rem;
  padding: 0.35rem 0;
}

/* Two columns once there is room for the term and the value to sit side by
   side; stacked below that, which is how a phone can carry a coordinate pair
   without the line breaking mid-number. */
@media (min-width: 30rem) {
  .deed__fact {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.75rem;
  }
}

.deed__fact dt {
  color: var(--deed-ink-muted);
  font-size: 0.85rem;
}

.deed__fact dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.deed__corners {
  color: var(--deed-ink-muted);
  font-size: 0.9rem;
  margin: 0.8rem 0 0;
  padding-left: 1.4rem;
}

/* The code is the one thing on this document a reader will retype, so it is
   set in a monospace face at a size that can be read off a screen, and broken
   across lines rather than clipped on a narrow one. */
.deed__code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
  overflow-wrap: anywhere;
}

.deed__note {
  color: var(--deed-ink-muted);
  font-size: 0.9rem;
  margin: 0;
}

.deed__footer {
  border-top: 1px solid var(--deed-rule);
  margin-top: 1.2rem;
  padding-top: 1.1rem;
}

.deed__execution {
  margin: 0 0 0.6rem;
}

.deed__provenance {
  color: var(--deed-ink-muted);
  font-size: 0.85rem;
  margin: 0;
}