/* Doorstone. One stylesheet.

   The archetype is a rule-weight ledger. The paper has one visual key and it is the weight of a
   horizontal rule: a hairline means nobody to ask, a heavy bar means the edge is all you get.
   Colour carries nothing anywhere on this site, which is why the palette is quiet and why the
   accessibility page can say plainly that no meaning is lost to a colour-blind reader.

   Body text sits in a narrow measure offset to the left, with the wide right margin left empty on
   a large screen. That is a print habit rather than a web one and it is the point: this reads as
   a paper, not as a landing page. */

@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/ds-text-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/ds-text-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/ds-text-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("/assets/ds-face-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("/assets/ds-face-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ds-paper: #f6f4ed;
  --ds-card: #e6e2d6;
  --ds-ink: #191713;
  --ds-rule: #2f2b24;
  --ds-quiet: #666158;
  --ds-hair: #cdc7b6;
  --ds-mark: #7a3b2e;
  --ds-cool: #3f5d52;

  --ds-text: "Brygada 1918", Georgia, "Times New Roman", serif;
  --ds-face: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ds-lead: 1.52;
  --ds-measure: 58ch;
  --ds-gutter: clamp(1.1rem, 4vw, 3.25rem);
  --ds-slab: clamp(2.2rem, 5vw, 4rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-text);
  font-size: 1.0625rem;
  line-height: var(--ds-lead);
  font-kerning: normal;
}

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

a { color: var(--ds-mark); text-underline-offset: 0.16em; text-decoration-thickness: from-font; }
a:hover { color: var(--ds-ink); }

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

.ds-skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--ds-ink); color: var(--ds-paper); padding: 0.8rem 1rem;
  font-family: var(--ds-face); font-size: 0.9rem;
  display: inline-block; min-height: 44px; line-height: 1.6;
}
.ds-skip:focus { left: 0.5rem; top: 0.5rem; }

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

.ds-top { border-bottom: 2px solid var(--ds-rule); background: var(--ds-paper); }
.ds-top-in {
  max-width: 78rem; margin: 0 auto; padding: 1.35rem var(--ds-gutter) 1.1rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}

.ds-mast { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.85rem; }
.ds-mast a {
  display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit;
  min-height: 44px;
}
/* The mark is generated: two rules, hairline over heavy, which is the same key the bands use. */
.ds-mast a::before {
  content: ""; width: 30px; height: 16px; display: inline-block; flex: none;
  border-top: 2px solid var(--ds-rule);
  border-bottom: 7px solid var(--ds-rule);
}
.ds-mast-name {
  font-family: var(--ds-text); font-weight: 600; font-size: 1.65rem;
  letter-spacing: -0.012em;
}
.ds-mast-strap {
  font-family: var(--ds-face); font-weight: 500; font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ds-quiet);
}

.ds-top-reach {
  margin: 0; text-align: right; font-family: var(--ds-face); font-size: 0.82rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
/* The telephone is the only tap target in the masthead and it measured 20px on a phone, well
   under the 44px a tap target needs. The padding is negative-margined back so the type keeps
   sitting on the same baseline as before. */
.ds-top-reach a {
  font-weight: 600; text-decoration: none;
  display: inline-block; padding: 0.72rem 0; margin: -0.72rem 0;
  min-height: 44px; line-height: 1.6;
}
.ds-top-reach span { color: var(--ds-quiet); }

.ds-nav { border-top: 1px solid var(--ds-hair); }
.ds-nav-in { max-width: 78rem; margin: 0 auto; padding: 0 var(--ds-gutter); overflow-x: auto; }
.ds-nav ul {
  margin: 0; padding: 0; list-style: none; display: flex; gap: 1.4rem; white-space: nowrap;
}
.ds-nav a {
  display: block; padding: 0.7rem 0; text-decoration: none; color: var(--ds-ink);
  font-family: var(--ds-face); font-weight: 500; font-size: 0.86rem;
  border-bottom: 3px solid transparent;
}
.ds-nav a:hover { border-bottom-color: var(--ds-hair); }
.ds-nav a[aria-current="page"] { border-bottom-color: var(--ds-mark); color: var(--ds-mark); }

/* ------------------------------------------------------------------ the piece */

main { display: block; }

.ds-piece { max-width: 78rem; margin: 0 auto; padding: 0 var(--ds-gutter) var(--ds-slab); }

.ds-piece-head { padding: var(--ds-slab) 0 1.6rem; border-bottom: 1px solid var(--ds-hair); }

.ds-brow {
  margin: 0 0 0.9rem; font-family: var(--ds-face); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--ds-mark);
}

.ds-piece-head h1 {
  margin: 0; max-width: 20ch;
  font-weight: 600; font-size: clamp(2.15rem, 6.2vw, 3.75rem);
  line-height: 1.06; letter-spacing: -0.021em;
}

.ds-stand {
  margin: 1.15rem 0 0; max-width: 54ch;
  font-size: clamp(1.08rem, 2.1vw, 1.28rem); line-height: 1.44; color: var(--ds-rule);
}

.ds-body { padding-top: 2rem; }
.ds-body > * { max-width: var(--ds-measure); }
.ds-body > h2 {
  max-width: 34ch; margin: 2.9rem 0 0.9rem;
  font-weight: 600; font-size: clamp(1.4rem, 3vw, 1.85rem); line-height: 1.16;
  letter-spacing: -0.013em;
  border-top: 1px solid var(--ds-hair); padding-top: 1.15rem;
}
.ds-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.ds-body > h3 {
  max-width: 40ch; margin: 1.9rem 0 0.55rem;
  font-family: var(--ds-face); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.005em;
}
.ds-body > p { margin: 0 0 1.1rem; }
.ds-body > ul, .ds-body > ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.ds-body > ul li, .ds-body > ol li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------ the bands */

.ds-bands, .ds-spine { list-style: none; margin: 0 0 1.6rem; padding: 0; max-width: 100%; }

.ds-bands li, .ds-spine li { margin: 0; }

.ds-bands a, .ds-spine a {
  display: grid; gap: 0.3rem 1.6rem; padding: 1.1rem 0 1.25rem;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--ds-hair);
}
.ds-bands a:hover, .ds-spine a:hover { background: var(--ds-card); }

/* The access band, drawn. Four weights, generated rather than marked up, so that nothing in the
   document exists purely to be painted. The band is written out in words beside every rule, so a
   reader who never sees the rule loses nothing. */
.ds-bands a::before, .ds-spine a::before {
  content: ""; display: block; grid-column: 1 / -1;
  border-top-style: solid; border-top-color: var(--ds-rule);
  width: 100%; margin-bottom: 0.55rem;
}
.ds-bands .is-open a::before,   .ds-spine .is-open a::before   { border-top-width: 1px; }
.ds-bands .is-posted a::before, .ds-spine .is-posted a::before { border-top-width: 3px; }
.ds-bands .is-asked a::before,  .ds-spine .is-asked a::before  { border-top-width: 6px; }
.ds-bands .is-edge a::before,   .ds-spine .is-edge a::before   { border-top-width: 11px; }

.ds-band-name, .ds-entry-name {
  font-weight: 600; font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.18;
  letter-spacing: -0.011em;
}
.ds-band-said, .ds-entry-said { color: var(--ds-rule); max-width: 62ch; }

.ds-entry-band {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-quiet);
}

@media (min-width: 62rem) {
  .ds-bands a, .ds-spine a { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .ds-bands a::before, .ds-spine a::before { margin-bottom: 0.35rem; }
  .ds-entry-band { grid-column: 1; }
  .ds-band-name, .ds-entry-name { grid-column: 1; }
  .ds-band-said, .ds-entry-said { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}

/* ------------------------------------------------------------------ tables */

.ds-grid-wrap { overflow-x: auto; margin: 0 0 1.6rem; max-width: 100%; }

.ds-cells, .ds-grid {
  border-collapse: collapse; width: 100%; font-size: 0.98rem;
  margin: 0 0 1.6rem;
}
.ds-cells caption, .ds-grid caption {
  text-align: left; font-family: var(--ds-face); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-quiet);
  padding-bottom: 0.6rem;
}
.ds-cells th, .ds-cells td, .ds-grid th, .ds-grid td {
  text-align: left; vertical-align: top; padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--ds-hair);
}
.ds-grid thead th {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ds-quiet);
  border-bottom: 2px solid var(--ds-rule);
}
.ds-cells th[scope="row"], .ds-grid th[scope="row"] {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.86rem;
  width: 15rem; padding-right: 1.5rem;
}
.ds-cells { max-width: 100%; }

/* ------------------------------------------------------------------ plates */

.ds-plate { margin: 2rem 0; max-width: 100%; }
.ds-plate img { border: 1px solid var(--ds-hair); }
.ds-plate figcaption {
  margin-top: 0.6rem; font-size: 0.9rem; color: var(--ds-rule); max-width: 56ch;
}

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

.ds-letter, .ds-fare {
  max-width: 100%; margin: 0 0 2rem; padding: 1.5rem var(--ds-gutter) 1.6rem;
  background: var(--ds-card); border-top: 4px solid var(--ds-rule);
}

.ds-fine { font-size: 0.9rem; color: var(--ds-rule); margin: 0 0 1.1rem; max-width: 62ch; }
.ds-fine:last-child { margin-bottom: 0; }

.ds-fare-said {
  margin: 0 0 1.4rem; max-width: 64ch; font-size: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--ds-hair);
}

.ds-fields, .ds-fare-fields { display: grid; gap: 0.9rem 1.2rem; margin-bottom: 1.1rem; }

@media (min-width: 40rem) {
  .ds-fields { grid-template-columns: 1fr 1fr; }
  .ds-field-wide { grid-column: 1 / -1; }
  .ds-fare-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .ds-fare-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ds-field { display: flex; flex-direction: column; gap: 0.3rem; }
.ds-field label {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-rule);
}
.ds-field input, .ds-field select, .ds-field textarea {
  font: inherit; font-size: 1rem; color: var(--ds-ink);
  background: var(--ds-paper); border: 1px solid var(--ds-quiet); border-radius: 0;
  padding: 0.62rem 0.7rem; width: 100%; min-height: 44px;
}
.ds-field textarea { min-height: 9rem; resize: vertical; }
.ds-field input:focus, .ds-field select:focus, .ds-field textarea:focus { border-color: var(--ds-mark); }
.ds-field [aria-invalid="true"] { border-color: var(--ds-mark); border-width: 2px; }

.ds-wrong {
  font-family: var(--ds-face); font-size: 0.8rem; color: var(--ds-mark); margin: 0.25rem 0 0;
}

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

.ds-send { margin: 0 0 1.1rem; }
.ds-send button {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.05em;
  background: var(--ds-rule); color: var(--ds-paper);
  border: 2px solid var(--ds-rule); border-radius: 0;
  padding: 0.72rem 1.6rem; min-height: 44px; cursor: pointer;
}
.ds-send button:hover { background: var(--ds-mark); border-color: var(--ds-mark); }
.ds-send button[disabled] { background: var(--ds-quiet); border-color: var(--ds-quiet); cursor: not-allowed; }

.ds-off, .ds-broke {
  font-size: 0.92rem; margin: 0 0 1.1rem; padding: 0.8rem 1rem;
  border-left: 4px solid var(--ds-mark); background: var(--ds-paper); max-width: 62ch;
}

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

.ds-asks { max-width: 100%; }
.ds-ask { border-top: 1px solid var(--ds-hair); padding: 1.2rem 0 0.4rem; }
.ds-ask h3 {
  margin: 0 0 0.6rem; max-width: 46ch;
  font-weight: 600; font-size: 1.18rem; line-height: 1.24;
}
.ds-ask p { margin: 0 0 0.9rem; max-width: var(--ds-measure); }

/* ------------------------------------------------------------------ elsewhere */

.ds-also { margin: 2.8rem 0 0; max-width: 100%; border-top: 2px solid var(--ds-rule); padding-top: 1.2rem; }
.ds-also h2 {
  margin: 0 0 1rem; font-family: var(--ds-face); font-weight: 600; font-size: 0.72rem;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--ds-quiet);
}
.ds-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 2rem; }
@media (min-width: 48rem) { .ds-also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .ds-also ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ds-also a { display: block; text-decoration: none; color: inherit; }
.ds-also a:hover .ds-also-name { color: var(--ds-mark); }
.ds-also-name { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 0.2rem; }
.ds-also-said { display: block; font-size: 0.92rem; color: var(--ds-rule); }

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

.ds-keep {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: var(--ds-ink); color: var(--ds-paper);
  padding: 1rem var(--ds-gutter);
}
.ds-keep[hidden] { display: none; }
.ds-keep p { margin: 0 0 0.7rem; max-width: 62ch; font-size: 0.92rem; }
.ds-keep a { color: var(--ds-paper); }
.ds-keep-go { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0; }
.ds-keep button {
  font-family: var(--ds-face); font-weight: 600; font-size: 0.85rem;
  background: transparent; color: var(--ds-paper);
  border: 2px solid var(--ds-paper); border-radius: 0;
  padding: 0.5rem 1.15rem; min-height: 44px; cursor: pointer;
}
.ds-keep button:hover { background: var(--ds-paper); color: var(--ds-ink); }

/* ------------------------------------------------------------------ colophon */

.ds-foot { border-top: 2px solid var(--ds-rule); margin-top: var(--ds-slab); background: var(--ds-card); }
.ds-foot-in {
  max-width: 78rem; margin: 0 auto; padding: var(--ds-slab) var(--ds-gutter) 1.6rem;
  display: grid; gap: 2rem;
}
@media (min-width: 58rem) { .ds-foot-in { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; } }

.ds-foot-say p { margin: 0 0 0.8rem; font-size: 0.92rem; max-width: 40ch; }
.ds-foot-name { font-weight: 600; font-size: 1.3rem; }
.ds-foot-say a { text-decoration: none; }

.ds-foot-cols { display: grid; gap: 1.6rem 2rem; }
@media (min-width: 34rem) { .ds-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-foot-cols h2 {
  margin: 0 0 0.7rem; font-family: var(--ds-face); font-weight: 600; font-size: 0.7rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--ds-quiet);
}
.ds-foot-cols ul { list-style: none; margin: 0; padding: 0; }
.ds-foot-cols li { margin-bottom: 0.4rem; }
.ds-foot-cols a { font-size: 0.94rem; text-decoration: none; color: var(--ds-ink); }
.ds-foot-cols a:hover { color: var(--ds-mark); }

.ds-foot-line {
  max-width: 78rem; margin: 0 auto; padding: 1.1rem var(--ds-gutter) 2rem;
  border-top: 1px solid var(--ds-hair);
  font-family: var(--ds-face); font-size: 0.78rem; color: var(--ds-quiet);
}

/* ------------------------------------------------------------------ narrow screens */

@media (max-width: 47.99rem) {
  .ds-top-in { flex-direction: column; align-items: flex-start; }
  .ds-top-reach { text-align: left; }
  .ds-cells th[scope="row"], .ds-grid th[scope="row"] { width: auto; }
}

@media print {
  .ds-nav, .ds-keep, .ds-letter, .ds-fare-form { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------ the fare search offers

   The place fields are comboboxes: a reader types, the paper's own list answers, and only a code
   picked out of that list is sent. Nothing here loads from anywhere else. */

.ds-gate { position: relative; }

.ds-tray {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 0.2rem 0 0; padding: 0; list-style: none;
  background: var(--ds-paper); border: 1px solid var(--ds-rule);
  box-shadow: 0 6px 18px rgba(25, 23, 19, 0.16);
  max-height: 17rem; overflow-y: auto;
}
.ds-tray li { margin: 0; }
.ds-tray button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--ds-hair);
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.95rem; color: var(--ds-ink);
}
.ds-tray li:last-child button { border-bottom: 0; }
.ds-tray button:hover,
.ds-tray li.is-lit button { background: var(--ds-card); }
.ds-tray-code {
  font-family: var(--ds-face); font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--ds-cool); margin-right: 0.35rem;
}

.ds-field.is-adrift input,
.ds-field.is-adrift select { border-color: var(--ds-mark); outline: 2px solid var(--ds-mark); }

.ds-word {
  display: inline-block; margin-left: 0.7rem;
  font-family: var(--ds-face); font-size: 0.88rem; color: var(--ds-mark);
}
.ds-word.is-done { color: var(--ds-cool); }

.ds-fare-form button[disabled] { opacity: 0.55; cursor: not-allowed; }


/* The quiet ink measured 3.38:1 on the paper and 2.87:1 on a card, on type as small as 11.2px,
   while /accessibility/ told the reader every pairing passed. #666158 gives 5.59 and 4.75. */

/* A footer link stood 18px tall while /accessibility/ promised nothing tappable was under 44px.
   The links are a list of destinations rather than words inside a sentence, so they can carry the
   height without changing how the footer reads. */
.ds-foot-cols li { margin-bottom: 0; }
.ds-foot-cols li a {
  display: block; padding: 0.72rem 0; min-height: 44px;
  display: flex; align-items: center;
}