/* Tallyhouse. Palette Dressed Face, archetype running bond.

   Every index on this site is laid in courses rather than set in a grid: a course is a row of two
   blocks, and every second course is pushed half a block to the right, so the vertical joints never
   line up. That is the one structural idea and it runs from the front page to the catalogue.

   Two faces, both served from this domain: Cuprum for anything that labels, Enriqueta for anything
   that is read. Nothing is fetched from anybody else's machine. */

@font-face {
  font-family: "Cuprum";
  src: url("/assets/tl-face-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cuprum";
  src: url("/assets/tl-face-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Enriqueta";
  src: url("/assets/tl-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Enriqueta";
  src: url("/assets/tl-text-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --tl-page: #e7e4dc;
  --tl-band: #d4cec2;
  --tl-raise: #f7f4ec;
  --tl-ink: #1d1e18;
  --tl-deep: #0b0c08;
  --tl-quiet: #5f6058;
  --tl-fired: #8e3a24;
  --tl-iron: #334a52;
  --tl-kiln: #a8842f;
  --tl-course: #c6bfae;
  --tl-moss: #3f6a56;

  --tl-face: "Cuprum", "Arial Narrow", Arial, sans-serif;
  --tl-text: "Enriqueta", Georgia, "Times New Roman", serif;

  --tl-lead: 1.53;
  --tl-unit: 27rem;
  --tl-half: 3.4rem;
  --tl-joint: 0.5rem;
  --tl-wide: 74rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--tl-page);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tl-page);
  color: var(--tl-ink);
  font: 400 1.0625rem/var(--tl-lead) var(--tl-text);
  text-underline-offset: 0.16em;
}

h1, h2, h3 {
  font-family: var(--tl-face);
  font-weight: 700;
  line-height: 1.11;
  letter-spacing: 0.004em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--tl-iron); }
a:hover { color: var(--tl-fired); }

:focus-visible {
  outline: 3px solid var(--tl-fired);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--tl-band);
  padding: 0.06em 0.3em;
  border-radius: 2px;
}

blockquote {
  margin: 0 0 1.05em;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 4px solid var(--tl-course);
  color: var(--tl-quiet);
}

/* ------------------------------------------------------------------ skip */

.tl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tl-deep);
  color: var(--tl-page);
  padding: 0.7rem 1.1rem;
  font-family: var(--tl-face);
  z-index: 40;
}
.tl-skip:focus {
  left: 0.6rem;
  top: 0.6rem;
}

/* ------------------------------------------------------------------ masthead */

.tl-top {
  background: var(--tl-deep);
  color: var(--tl-page);
  border-bottom: var(--tl-joint) solid var(--tl-fired);
}

.tl-top-in {
  max-width: var(--tl-wide);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
}

.tl-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--tl-face);
  font-weight: 700;
  font-size: 1.72rem;
  letter-spacing: 0.02em;
  color: var(--tl-page);
  text-decoration: none;
  text-transform: uppercase;
}
a.tl-name:hover { color: var(--tl-kiln); }

.tl-mark {
  width: 34px;
  height: 22px;
  flex: none;
  fill: var(--tl-kiln);
}

.tl-strap {
  margin: 0;
  font-family: var(--tl-face);
  font-size: 0.9rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tl-course);
}

.tl-where {
  margin: 0 0 0 auto;
  font-family: var(--tl-face);
  font-size: 0.9rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tl-course);
}

.tl-nav {
  background: var(--tl-ink);
}
.tl-nav ul {
  max-width: var(--tl-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.tl-nav a {
  display: block;
  padding: 0.62rem 0.9rem;
  font-family: var(--tl-face);
  font-size: 0.97rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tl-page);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.tl-nav a:hover { color: var(--tl-kiln); }
.tl-nav a[aria-current="page"] {
  border-bottom-color: var(--tl-kiln);
  color: var(--tl-kiln);
}

/* ------------------------------------------------------------------ page */

.tl-page {
  max-width: var(--tl-wide);
  margin: 0 auto;
  padding: 2.6rem 1.25rem 3.4rem;
}

.tl-head {
  border-left: var(--tl-joint) solid var(--tl-kiln);
  padding-left: 1.35rem;
  margin-bottom: 2.2rem;
}

.tl-brow {
  margin: 0 0 0.5rem;
  font-family: var(--tl-face);
  font-size: 0.86rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tl-fired);
}

.tl-head h1 {
  font-size: clamp(2.05rem, 5.4vw, 3.3rem);
  max-width: 30ch;
}

.tl-stand {
  margin: 0.95rem 0 0;
  font-size: 1.16rem;
  line-height: 1.46;
  color: var(--tl-quiet);
  max-width: 62ch;
}

/* The reading measure belongs to the prose, not to the section. A course of blocks, a group list,
   a table and a frame are all laid to the full width of the page; only text is held to 66ch. Putting
   the measure on the section itself squeezed the running bond into the column and broke the whole
   archetype, which is the one thing this site is built out of. */
.tl-sec {
  margin: 0 0 2.3rem;
}
.tl-sec > p,
.tl-sec > ul,
.tl-sec > ol,
.tl-sec > blockquote,
.tl-sec > h2,
.tl-sec > h3 {
  max-width: 66ch;
}
/* the five making groups are an ordered list by rights, and a full width one */
.tl-sec > ol.tl-groups {
  max-width: none;
}
.tl-sec h2 {
  font-size: 1.52rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--tl-course);
}
.tl-sec h3 {
  font-size: 1.16rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--tl-iron);
}
.tl-sec ul,
.tl-sec ol {
  margin: 0 0 1.05em;
  padding-left: 1.3rem;
}
.tl-sec li { margin-bottom: 0.38em; }

.tl-back {
  margin: 2.6rem 0 0;
  padding-top: 1rem;
  border-top: 2px solid var(--tl-course);
  font-family: var(--tl-face);
  font-size: 0.98rem;
  letter-spacing: 0.03em;
  color: var(--tl-quiet);
}

/* ------------------------------------------------------------------ the three cells */

.tl-cells {
  margin: 0 0 2.4rem;
  background: var(--tl-raise);
  border: 2px solid var(--tl-course);
  border-left: var(--tl-joint) solid var(--tl-iron);
  padding: 1.2rem 1.35rem 1.35rem;
  display: grid;
  gap: 0.15rem 1.4rem;
}
.tl-cells dt {
  font-family: var(--tl-face);
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-fired);
  padding-top: 0.8rem;
}
.tl-cells dt:first-child { padding-top: 0; }
.tl-cells dd {
  margin: 0.14rem 0 0;
  font-size: 1.03rem;
}

@media (min-width: 46rem) {
  .tl-cells {
    grid-template-columns: repeat(3, 1fr);
  }
  .tl-cells dt { padding-top: 0; }
  .tl-cells dd { border-top: 2px solid var(--tl-course); padding-top: 0.5rem; margin-top: 0.45rem; }
}

/* ------------------------------------------------------------------ running bond */

.tl-lay {
  margin: 0 0 2.6rem;
  max-width: none;
}

.tl-run {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-joint);
  margin-bottom: var(--tl-joint);
}
.tl-run.is-off { padding-left: var(--tl-half); }

.tl-block {
  flex: 1 1 var(--tl-unit);
  min-width: min(100%, 17rem);
  display: block;
  background: var(--tl-raise);
  border: 2px solid var(--tl-course);
  padding: 1.15rem 1.25rem 1.3rem;
  text-decoration: none;
  color: var(--tl-ink);
  transition: background 140ms linear, border-color 140ms linear;
}
.tl-block:hover {
  background: var(--tl-band);
  border-color: var(--tl-iron);
}

.tl-block-group {
  display: block;
  font-family: var(--tl-face);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-fired);
  margin-bottom: 0.5rem;
}
.tl-block-name {
  display: block;
  font-family: var(--tl-face);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.17;
  margin-bottom: 0.45rem;
}
.tl-block-said {
  display: block;
  font-size: 0.99rem;
  color: var(--tl-quiet);
}

@media (max-width: 46rem) {
  .tl-run.is-off { padding-left: 0; }
}

/* ------------------------------------------------------------------ the five groups */

.tl-groups {
  list-style: none;
  margin: 0 0 2.6rem;
  padding: 0;
  counter-reset: bond;
  border-top: 2px solid var(--tl-course);
}
.tl-groups li { counter-increment: bond; }
.tl-groups a {
  display: grid;
  gap: 0.2rem 1.3rem;
  padding: 1.05rem 0.4rem 1.05rem 0;
  border-bottom: 2px solid var(--tl-course);
  text-decoration: none;
  color: var(--tl-ink);
}
.tl-groups a:hover { background: var(--tl-raise); }
.tl-groups a::before {
  content: counter(bond, decimal-leading-zero);
  font-family: var(--tl-face);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: var(--tl-kiln);
}
.tl-groups-name {
  font-family: var(--tl-face);
  font-weight: 700;
  font-size: 1.24rem;
}
.tl-groups-said { color: var(--tl-quiet); }
.tl-groups-n {
  font-family: var(--tl-face);
  font-size: 0.85rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tl-fired);
}

@media (min-width: 52rem) {
  .tl-groups a {
    grid-template-columns: 2.6rem 15rem 1fr 11rem;
    align-items: baseline;
  }
}

/* ------------------------------------------------------------------ onward */

.tl-on {
  margin: 2.6rem 0 0;
  border-top: var(--tl-joint) solid var(--tl-iron);
  padding-top: 1.3rem;
}
.tl-on ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tl-joint);
}
.tl-on a {
  display: block;
  padding: 0.95rem 1.05rem;
  background: var(--tl-band);
  text-decoration: none;
  color: var(--tl-ink);
}
.tl-on a:hover { background: var(--tl-course); }
.tl-on-name {
  display: block;
  font-family: var(--tl-face);
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 0.24rem;
}
.tl-on-said {
  display: block;
  font-size: 0.96rem;
  color: var(--tl-quiet);
}

@media (min-width: 46rem) {
  .tl-on ul { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------------ bands and frames */

.tl-band {
  margin: 0 0 2.4rem;
  overflow-x: auto;
  border: 2px solid var(--tl-course);
  background: var(--tl-raise);
}
.tl-band table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.99rem;
}
.tl-band th,
.tl-band td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--tl-course);
  vertical-align: top;
}
.tl-band th {
  font-family: var(--tl-face);
  font-size: 0.83rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--tl-deep);
  color: var(--tl-page);
  border-bottom-color: var(--tl-deep);
}
.tl-band tbody tr:last-child td { border-bottom: 0; }

.tl-frame {
  margin: 0 0 2.4rem;
}
.tl-frame img {
  width: 100%;
  border: var(--tl-joint) solid var(--tl-deep);
}
.tl-frame figcaption {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--tl-quiet);
  max-width: 62ch;
}

/* ------------------------------------------------------------------ questions */

.tl-asked h3 {
  font-family: var(--tl-face);
  font-size: 1.14rem;
  margin: 1.9rem 0 0.55rem;
  padding-left: 1rem;
  border-left: 4px solid var(--tl-kiln);
}
.tl-asked h3:first-child { margin-top: 0; }
.tl-asked p {
  max-width: 66ch;
  margin-left: 1rem;
}

/* ------------------------------------------------------------------ forms */

.tl-fields {
  display: grid;
  gap: 1rem;
  margin: 1.2rem 0;
}

@media (min-width: 46rem) {
  .tl-fields { grid-template-columns: repeat(2, 1fr); }
  .tl-letter .tl-field:last-of-type { grid-column: 1 / -1; }
}

.tl-field label {
  display: block;
  font-family: var(--tl-face);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tl-quiet);
  margin-bottom: 0.32rem;
}
.tl-field input,
.tl-field select,
.tl-field textarea {
  width: 100%;
  font: 400 1rem/1.4 var(--tl-text);
  color: var(--tl-ink);
  background: var(--tl-raise);
  border: 2px solid var(--tl-quiet);
  padding: 0.6rem 0.7rem;
  border-radius: 0;
}
.tl-field textarea { resize: vertical; }
.tl-field.is-off input,
.tl-field.is-off select,
.tl-field.is-off textarea { border-color: var(--tl-fired); }

.tl-wrong {
  margin: 0.35rem 0 0;
  font-size: 0.93rem;
  color: var(--tl-fired);
}

.tl-letter,
.tl-look {
  margin: 0 0 2.6rem;
  background: var(--tl-band);
  border-top: var(--tl-joint) solid var(--tl-iron);
  padding: 1.4rem 1.35rem 1.5rem;
}
.tl-look h2 {
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
}

.tl-told {
  border-left: 4px solid var(--tl-fired);
  padding-left: 0.9rem;
}

.tl-small {
  font-size: 0.94rem;
  color: var(--tl-quiet);
  max-width: 68ch;
}

.tl-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 1.2rem 0 1rem;
}
.tl-send button {
  font: 700 1rem/1 var(--tl-face);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tl-page);
  background: var(--tl-deep);
  border: 2px solid var(--tl-deep);
  padding: 0.8rem 1.5rem;
  cursor: pointer;
}
.tl-send button:hover {
  background: var(--tl-fired);
  border-color: var(--tl-fired);
}
.tl-send button[disabled] {
  background: var(--tl-quiet);
  border-color: var(--tl-quiet);
  cursor: default;
}

.tl-word {
  font-size: 0.95rem;
  color: var(--tl-fired);
}
.tl-word.is-laid { color: var(--tl-moss); }

.tl-broke {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  color: var(--tl-fired);
}

.tl-gate {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* the place field and its list of offers */

.tl-place { position: relative; }

.tl-offers {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  background: var(--tl-raise);
  border: 2px solid var(--tl-iron);
  max-height: 17rem;
  overflow-y: auto;
}
.tl-offers li + li { border-top: 1px solid var(--tl-course); }
.tl-offers button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: 400 0.97rem/1.35 var(--tl-text);
  color: var(--tl-ink);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}
.tl-offers li.is-on button,
.tl-offers button:hover {
  background: var(--tl-band);
}
.tl-offers-code {
  font-family: var(--tl-face);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--tl-fired);
}

/* ------------------------------------------------------------------ storage card */

.tl-card {
  max-width: var(--tl-wide);
  margin: 0 auto 2.6rem;
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--tl-raise);
  border: 2px solid var(--tl-iron);
  border-left: var(--tl-joint) solid var(--tl-iron);
}
.tl-card p { font-size: 0.97rem; }
.tl-card-go {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.tl-card-go button {
  font: 700 0.92rem/1 var(--tl-face);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.66rem 1.1rem;
  cursor: pointer;
  border: 2px solid var(--tl-deep);
}
.tl-card-go button[data-tl-yes] {
  background: var(--tl-deep);
  color: var(--tl-page);
}
.tl-card-go button[data-tl-no] {
  background: transparent;
  color: var(--tl-deep);
}
.tl-card-go button:hover {
  border-color: var(--tl-fired);
  color: var(--tl-fired);
  background: var(--tl-band);
}

@media (min-width: 46rem) {
  .tl-card { margin-left: auto; margin-right: auto; }
}

/* ------------------------------------------------------------------ footer */

.tl-foot {
  background: var(--tl-deep);
  color: var(--tl-course);
  border-top: var(--tl-joint) solid var(--tl-kiln);
  padding: 2.4rem 1.25rem 2.6rem;
}
.tl-foot-cols {
  max-width: var(--tl-wide);
  margin: 0 auto 2rem;
  display: grid;
  gap: 1.7rem;
}
.tl-foot h2 {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tl-kiln);
  margin-bottom: 0.6rem;
}
.tl-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-foot li { margin-bottom: 0.34rem; }
.tl-foot a {
  color: var(--tl-page);
  text-decoration: none;
  font-size: 0.98rem;
}
.tl-foot a:hover {
  color: var(--tl-kiln);
  text-decoration: underline;
}

.tl-imprint {
  max-width: var(--tl-wide);
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tl-quiet);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tl-course);
}
.tl-imprint strong { color: var(--tl-page); }
.tl-imprint a { color: var(--tl-page); }
.tl-imprint p { margin-bottom: 0.62em; }

@media (min-width: 46rem) {
  .tl-foot-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 66rem) {
  .tl-foot-cols { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ reveal */

.tl-js .tl-rise {
  opacity: 0;
  transform: translateY(9px);
}
.tl-js .tl-rise.is-laid {
  opacity: 1;
  transform: none;
  transition: opacity 300ms linear, transform 300ms ease-out;
}
.tl-nojs .tl-rise {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tl-js .tl-rise,
  .tl-js .tl-rise.is-laid {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tl-block { transition: none; }
}

@media print {
  .tl-nav, .tl-card, .tl-on, .tl-look, .tl-letter { display: none; }
  body { background: #ffffff; color: #000000; }
  .tl-top, .tl-foot { background: #ffffff; color: #000000; }
}