@import url("fonts.css");

/* Telephony - lines, exchanges and services of the Republic of Fluid.

   Own stylesheet. Telephony loads nothing from the state frame and nothing
   from any other cooperative, because it is none of them.

   The design is from the printed telephone directory the federation posts to
   every household: cheap grey-buff stock, tight leading, and the blue pages
   at the front where the services are listed. The repeating unit is a
   directory entry: the name of a thing on the left, and the
   address it answers on at the right. */

:root {
  /* paper stocks */
  --paper:   #e4e2d8;
  --paper-2: #dad7cb;
  --white:   #f2f1eb;
  --blue:    #c7d3db;   /* the blue pages */
  --yellow:  #e6d8a6;   /* the trade pages */

  /* ink */
  --ink:   #23201a;
  --ink-2: #575245;
  --ink-3: #665f50;
  --rule:  #b3ac9c;
  --rule-2:#cbc5b6;
  --mark:  #1e3a5f;     /* the spot colour on the cover */
  --red:   #9b2226;     /* emergency rules */

  /* the cover wordmark keeps the directory face; everything read at length
     uses a screen serif with a large x-height */
  --display: "Tinos", "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --serif: "Gelasio", Georgia, "Bitstream Charter", Charter, "DejaVu Serif", "Liberation Serif", serif;
  --narrow: "TeX Gyre Heros Cn", "Arial Narrow", "Liberation Sans Narrow",
            "DejaVu Sans Condensed", Arial, sans-serif;
  --mono: "DejaVu Sans Mono", ui-monospace, "Liberation Mono", Menlo, Consolas, monospace;

  --wrap: 64rem;
  --pad: 1.15rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.62;
}

p {
  margin: 0 0 0.85em;
}

a {
  color: var(--mark);
}

a:hover {
  color: var(--red);
}

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.1rem;
  font-family: var(--narrow);
  font-size: 1rem;
  z-index: 20;
}

.skip:focus {
  left: 0;
  top: 0;
}

/* ---------- the cover ---------- */

.cover {
  border-bottom: 4px double var(--ink);
  padding: 1.1rem 0 1.1rem;
}

.cover .wrap {
  text-align: center;
}

.title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.7rem, 15vw, 6rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.title a {
  color: inherit;
  text-decoration: none;
}

.imprint {
  margin: 0.7rem auto 0;
  max-width: 38rem;
  font-family: var(--narrow);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ink-2);
}

.imprint b {
  font-weight: 700;
  color: var(--ink);
}

/* ---------- thumb index ---------- */

.thumbs {
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
}

.thumbs .wrap {
  display: flex;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.thumbs a {
  flex: 0 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 0 1.05rem;
  border-right: 1px solid var(--rule);
  font-family: var(--narrow);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  white-space: nowrap;
}

.thumbs a:first-child {
  border-left: 1px solid var(--rule);
  margin-left: auto;
}

.thumbs a:last-child {
  margin-right: auto;
}

.thumbs a:hover {
  background: var(--white);
  color: var(--ink);
}

.thumbs a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

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

.opening {
  padding: 2rem 0 0;
}

.opening h1 {
  margin: 0 0 2rem;
  font-size: clamp(1.95rem, 7.5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 20ch;
}

.opening .lede {
  margin: 0;
  font-size: 1.16rem;
  color: var(--ink-2);
}

/* ---------- sections ---------- */

.runhead {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 1.8rem 0 1.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  font-family: var(--narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

.runhead .span {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  text-align: right;
}

.sheet h2 {
  margin: 0 0 0.55rem;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sheet h3 {
  margin: 0 0 0.4rem;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.standfirst {
  margin: 0 0 1.15rem;
  font-size: 1.04rem;
  color: var(--ink-2);
}

/* ---------- the directory entry, the signature of the site ---------- */

.listing {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.55rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-2);
}

.entry:last-child {
  border-bottom: 0;
}

.what {
  font-weight: 700;
  letter-spacing: -0.005em;
}

.lead {
  flex: 1 1 1.5rem;
  min-width: 1.2rem;
  align-self: center;
  transform: translateY(-0.18em);
}

.host {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.also {
  flex: 1 0 100%;
  margin: 0.25rem 0 0;
  font-family: var(--narrow);
  font-size: 0.95rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

.also code {
  font-family: var(--mono);
  font-size: 0.94em;
  letter-spacing: -0.05em;
}

/* ---------- coloured stocks ---------- */

.stock {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--rule);
}

.stock-blue {
  background: var(--blue);
  border-color: #9fb2be;
}

.stock-yellow {
  background: var(--yellow);
  border-color: #c9b978;
}

.stock-white {
  background: var(--white);
}

.stock > :last-child {
  margin-bottom: 0;
}

/* ---------- the emergency panel ---------- */

.urgent {
  margin: 1.5rem 0 0;
  border: 4px double var(--red);
  background: var(--white);
  padding: 1.1rem 1.2rem 1.2rem;
}

.urgent h2 {
  margin: 0 0 0.2rem;
  font-family: var(--narrow);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--red);
}

.urgent .entry {
  border-bottom-color: #d8b6b6;
}

.urgent .num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}

.urgent .lead {
  border-bottom-color: #c99;
}

.urgent .foot-note {
  margin: 0.9rem 0 0;
  font-size: 0.98rem;
  color: var(--ink-2);
}

/* ---------- prose ---------- */

.prose {
  margin: 0;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose b, .prose strong {
  font-weight: 700;
  color: var(--ink);
}

.cols {
  display: grid;
  gap: 1.1rem;
}

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

.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.tbl {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 1.02rem;
}

table.tbl caption {
  margin-bottom: 0.45rem;
  font-family: var(--narrow);
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
}

table.tbl th,
table.tbl td {
  padding: 0.6rem 0.8rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-2);
}

table.tbl thead th {
  border-bottom: 1px solid var(--ink);
  font-family: var(--narrow);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table.tbl td.num,
table.tbl td.code {
  font-family: var(--mono);
  font-size: 0.95rem;
  white-space: nowrap;
}

table.tbl tbody tr:last-child td {
  border-bottom: 0;
}

.tbl-note {
  margin: 0.55rem 0 0;
  font-family: var(--narrow);
  font-size: 0.92rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* ---------- notes and rules ---------- */

.note {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ink);
  background: var(--white);
  font-size: 1.02rem;
}

.note > :last-child {
  margin-bottom: 0;
}

code.inline {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--white);
  padding: 0.05em 0.25em;
  border: 1px solid var(--rule-2);
}

pre.code {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- numbered steps ---------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
}

.steps > li {
  counter-increment: s;
  position: relative;
  padding: 0.75rem 0 0.8rem 2.8rem;
  border-bottom: 1px solid var(--rule-2);
}

.steps > li:last-child {
  border-bottom: 0;
}

.steps > li::before {
  content: counter(s) ".";
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
}

.steps p {
  margin: 0 0 0.4rem;
}

.steps p:last-child {
  margin-bottom: 0;
}

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

.colophon {
  border-top: 4px double var(--ink);
  margin-top: 1.8rem;
  padding: 1.6rem 0 2.4rem;
  font-size: 1rem;
  color: var(--ink-2);
}

.colophon h2 {
  margin: 0 0 0.5rem;
  font-family: var(--narrow);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

.colophon ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.colophon li a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.colophon .cols {
  gap: 1.2rem;
}

/* ---------- wider ---------- */

@media (min-width: 34rem) {
  .cols { grid-template-columns: repeat(2, 1fr);
}

.listing.two {
  column-count: 2;
  column-gap: 2rem;
}

.listing.two .entry {
  break-inside: avoid;
}
}

@media (min-width: 52rem) {
  body { font-size: 19.5px;
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important;
  animation: none !important;
}
}

@media print {
  .thumbs { display: none;
}

body {
  background: #fff;
  font-size: 10.5pt;
}
}

/* a panel in the shape of the emergency box, set in ink for use where the
   content is important without being urgent */
.urgent.plain {
  border-color: var(--ink);
}

.urgent.plain h2 {
  color: var(--ink);
}

/* a bare paragraph inside a section is a row of links to other pages, so its
   links get a real target height; links inside prose stay inline */
.sheet > p:not([class]) {
  margin-top: 0.9rem;
}

.sheet > p:not([class]) > a {
  display: inline-block;
  padding: 0.5rem 0;
}