/* Stringcourse. One stylesheet.

   The archetype is a stepped index. The paper's single organizing idea is that the first use of a
   building survives in five decreasing amounts, and the layout says so with an INDENT: each step
   sits further from the left margin than the one before, so the page shows the original use
   receding across the screen. Color carries nothing at all here, and the step is written out in
   words beside every entry, so the indent is decoration and the words are the information.

   The body sits in a wide measure with the heading column hanging into the left margin, which is a
   catalog habit rather than a magazine one. */

@font-face { font-family: "Ibarra Real Nova"; src: url("/assets/sc-text-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ibarra Real Nova"; src: url("/assets/sc-text-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ibarra Real Nova"; src: url("/assets/sc-text-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Wix Madefor Display"; src: url("/assets/sc-face-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Wix Madefor Display"; src: url("/assets/sc-face-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --sc-paper: #f4f1e8;
  --sc-card: #e4dfd2;
  --sc-ink: #1b1a17;
  --sc-rule: #33302a;
  --sc-quiet: #645f55;
  --sc-hair: #c9c2b0;
  --sc-mark: #8c4a2f;
  --sc-cool: #3d5766;

  --sc-text: "Ibarra Real Nova", Georgia, "Times New Roman", serif;
  --sc-face: "Wix Madefor Display", "Helvetica Neue", Arial, sans-serif;

  --sc-lead: 1.50;
  --sc-measure: 62ch;
  --sc-gutter: clamp(1.1rem, 4vw, 3rem);
  --sc-slab: clamp(2rem, 5vw, 3.75rem);
  --sc-indent: clamp(0.9rem, 3.2vw, 2.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--sc-paper); color: var(--sc-ink);
  font-family: var(--sc-text); font-size: 1.075rem; line-height: var(--sc-lead);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sc-mark); text-underline-offset: 0.15em; text-decoration-thickness: from-font; }
a:hover { color: var(--sc-ink); }
:focus-visible { outline: 3px solid var(--sc-cool); outline-offset: 2px; }

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

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

.sc-top { border-bottom: 1px solid var(--sc-rule); }
.sc-top-in {
  max-width: 80rem; margin: 0 auto; padding: 1.5rem var(--sc-gutter) 1.15rem;
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; align-items: baseline;
  justify-content: space-between;
}
.sc-mast { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.sc-mast a {
  text-decoration: none; color: inherit;
  font-family: var(--sc-text); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.014em;
  display: inline-block; min-height: 44px; line-height: 1.35;
}
.sc-mast-strap {
  font-family: var(--sc-face); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--sc-quiet);
}
.sc-top-reach {
  margin: 0; text-align: right; font-family: var(--sc-face); font-size: 0.8rem;
  display: flex; flex-direction: column; gap: 0.05rem;
}
.sc-top-reach a {
  font-weight: 700; text-decoration: none;
  display: inline-block; padding: 0.7rem 0; margin: -0.7rem 0; min-height: 44px; line-height: 1.6;
}
.sc-top-reach span { color: var(--sc-quiet); }

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

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

main { display: block; }
.sc-piece { max-width: 80rem; margin: 0 auto; padding: 0 var(--sc-gutter) var(--sc-slab); }
.sc-piece-head { padding: var(--sc-slab) 0 1.5rem; }

.sc-brow {
  margin: 0 0 0.85rem; font-family: var(--sc-face); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-mark);
}
.sc-piece-head h1 {
  margin: 0; max-width: 21ch; font-weight: 600;
  font-size: clamp(2.05rem, 5.8vw, 3.5rem); line-height: 1.08; letter-spacing: -0.018em;
}
.sc-stand {
  margin: 1.1rem 0 0; max-width: 56ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.42; color: var(--sc-rule);
}

.sc-body { padding-top: 1.9rem; border-top: 4px double var(--sc-rule); }
.sc-body > * { max-width: var(--sc-measure); }
.sc-body > h2 {
  max-width: 36ch; margin: 2.7rem 0 0.85rem; font-weight: 600;
  font-size: clamp(1.35rem, 2.9vw, 1.8rem); line-height: 1.18; letter-spacing: -0.011em;
}
.sc-body > h2:first-child { margin-top: 0; }
.sc-body > h3 {
  max-width: 42ch; margin: 1.8rem 0 0.5rem;
  font-family: var(--sc-face); font-weight: 700; font-size: 0.98rem;
}
.sc-body > p { margin: 0 0 1.05rem; }
.sc-body > ul, .sc-body > ol { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.sc-body > ul li, .sc-body > ol li { margin-bottom: 0.45rem; }

/* ------------------------------------------------------------------ the steps */

.sc-steps, .sc-fronts { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 100%; }
.sc-steps li, .sc-fronts li { margin: 0; }

.sc-steps a, .sc-fronts a {
  display: block; padding: 1.05rem 0 1.15rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--sc-hair);
}
.sc-steps a:hover, .sc-fronts a:hover { background: var(--sc-card); }

/* The indent IS the axis: the further the first use has receded, the further the entry sits from
   the edge of the page. It is decoration, and every entry states its step in words. */
.is-working a  { padding-left: 0; }
.is-shell a    { padding-left: var(--sc-indent); }
.is-fragment a { padding-left: calc(var(--sc-indent) * 2); }
.is-trace a    { padding-left: calc(var(--sc-indent) * 3); }
.is-name a     { padding-left: calc(var(--sc-indent) * 4); }

.sc-step-of, .sc-front-of {
  display: block; font-family: var(--sc-face); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-quiet);
  margin-bottom: 0.3rem;
}
.sc-step-name, .sc-front-name {
  display: block; font-weight: 600; font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.25rem;
}
.sc-step-said, .sc-front-said { display: block; color: var(--sc-rule); max-width: 64ch; }

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

.sc-grid-wrap { overflow-x: auto; margin: 0 0 1.5rem; max-width: 100%; }
.sc-cells, .sc-grid { border-collapse: collapse; width: 100%; font-size: 0.97rem; margin: 0 0 1.5rem; }
.sc-cells caption, .sc-grid caption {
  text-align: left; font-family: var(--sc-face); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--sc-quiet); padding-bottom: 0.55rem;
}
.sc-cells th, .sc-cells td, .sc-grid th, .sc-grid td {
  text-align: left; vertical-align: top; padding: 0.68rem 1rem 0.68rem 0;
  border-bottom: 1px solid var(--sc-hair);
}
.sc-grid thead th {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.73rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-quiet);
  border-bottom: 2px solid var(--sc-rule);
}
.sc-cells th[scope="row"], .sc-grid th[scope="row"] {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.85rem;
  width: 16rem; padding-right: 1.4rem;
}
.sc-cells { max-width: 100%; }

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

.sc-plate { margin: 1.9rem 0; max-width: 100%; }
.sc-plate img { border: 1px solid var(--sc-hair); }
.sc-plate figcaption { margin-top: 0.55rem; font-size: 0.9rem; color: var(--sc-rule); max-width: 58ch; }

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

.sc-letter, .sc-fare {
  max-width: 100%; margin: 0 0 1.9rem; padding: 1.4rem var(--sc-gutter) 1.5rem;
  background: var(--sc-card); border-left: 6px solid var(--sc-rule);
}
.sc-fine { font-size: 0.89rem; color: var(--sc-rule); margin: 0 0 1rem; max-width: 64ch; }
.sc-fine:last-child { margin-bottom: 0; }
.sc-fare-said {
  margin: 0 0 1.3rem; max-width: 66ch; font-size: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--sc-hair);
}
.sc-fields, .sc-fare-fields { display: grid; gap: 0.85rem 1.15rem; margin-bottom: 1rem; }
@media (min-width: 40rem) {
  .sc-fields { grid-template-columns: 1fr 1fr; }
  .sc-field-wide { grid-column: 1 / -1; }
  .sc-fare-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .sc-fare-fields { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sc-field { display: flex; flex-direction: column; gap: 0.28rem; }
.sc-field label {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--sc-rule);
}
.sc-field input, .sc-field select, .sc-field textarea {
  font: inherit; font-size: 1rem; color: var(--sc-ink); background: var(--sc-paper);
  border: 1px solid var(--sc-quiet); border-radius: 0; padding: 0.6rem 0.7rem;
  width: 100%; min-height: 44px;
}
.sc-field textarea { min-height: 9rem; resize: vertical; }
.sc-field input:focus, .sc-field select:focus, .sc-field textarea:focus { border-color: var(--sc-cool); }
.sc-field [aria-invalid="true"] { border-color: var(--sc-mark); border-width: 2px; }
.sc-wrong { font-family: var(--sc-face); font-size: 0.78rem; color: var(--sc-mark); margin: 0.22rem 0 0; }
.sc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sc-send { margin: 0 0 1rem; }
.sc-send button {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.9rem;
  background: var(--sc-rule); color: var(--sc-paper);
  border: 2px solid var(--sc-rule); border-radius: 0;
  padding: 0.7rem 1.5rem; min-height: 44px; cursor: pointer;
}
.sc-send button:hover { background: var(--sc-cool); border-color: var(--sc-cool); }
.sc-send button[disabled] { background: var(--sc-quiet); border-color: var(--sc-quiet); cursor: not-allowed; }
.sc-off, .sc-broke {
  font-size: 0.9rem; margin: 0 0 1rem; padding: 0.75rem 0.95rem;
  border-left: 4px solid var(--sc-mark); background: var(--sc-paper); max-width: 64ch;
}

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

.sc-asks { max-width: 100%; }
.sc-ask { border-top: 1px solid var(--sc-hair); padding: 1.15rem 0 0.35rem; }
.sc-ask h3 { margin: 0 0 0.55rem; max-width: 48ch; font-weight: 600; font-size: 1.15rem; line-height: 1.24; }
.sc-ask p { margin: 0 0 0.85rem; max-width: var(--sc-measure); }

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

.sc-also { margin: 2.6rem 0 0; max-width: 100%; border-top: 4px double var(--sc-rule); padding-top: 1.15rem; }
.sc-also h2 {
  margin: 0 0 0.95rem; font-family: var(--sc-face); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-quiet);
}
.sc-also ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem 2rem; }
@media (min-width: 48rem) { .sc-also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 74rem) { .sc-also ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sc-also a { display: block; text-decoration: none; color: inherit; }
.sc-also a:hover .sc-also-name { color: var(--sc-mark); }
.sc-also-name { display: block; font-weight: 600; font-size: 1.03rem; margin-bottom: 0.18rem; }
.sc-also-said { display: block; font-size: 0.9rem; color: var(--sc-rule); }

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

.sc-keep {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: var(--sc-rule); color: var(--sc-paper); padding: 1rem var(--sc-gutter);
}
.sc-keep[hidden] { display: none; }
.sc-keep p { margin: 0 0 0.65rem; max-width: 64ch; font-size: 0.9rem; }
.sc-keep a { color: var(--sc-paper); }
.sc-keep-go { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0; }
.sc-keep button {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.83rem;
  background: transparent; color: var(--sc-paper); border: 2px solid var(--sc-paper);
  border-radius: 0; padding: 0.5rem 1.1rem; min-height: 44px; cursor: pointer;
}
.sc-keep button:hover { background: var(--sc-paper); color: var(--sc-rule); }

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

.sc-foot { border-top: 4px double var(--sc-rule); margin-top: var(--sc-slab); }
.sc-foot-in {
  max-width: 80rem; margin: 0 auto; padding: var(--sc-slab) var(--sc-gutter) 1.5rem;
  display: grid; gap: 2rem;
}
@media (min-width: 58rem) { .sc-foot-in { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 3rem; } }
.sc-foot-say p { margin: 0 0 0.75rem; font-size: 0.9rem; max-width: 42ch; }
.sc-foot-name { font-weight: 600; font-size: 1.3rem; }
.sc-foot-say a { text-decoration: none; }
.sc-foot-cols { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 34rem) { .sc-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-foot-cols h2 {
  margin: 0 0 0.65rem; font-family: var(--sc-face); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-quiet);
}
.sc-foot-cols ul { list-style: none; margin: 0; padding: 0; }
.sc-foot-cols li { margin-bottom: 0.35rem; }
.sc-foot-cols a { font-size: 0.93rem; text-decoration: none; color: var(--sc-ink); }
.sc-foot-cols a:hover { color: var(--sc-mark); }
.sc-foot-line {
  max-width: 80rem; margin: 0 auto; padding: 1rem var(--sc-gutter) 2rem;
  border-top: 1px solid var(--sc-hair);
  font-family: var(--sc-face); font-size: 0.76rem; color: var(--sc-quiet);
}

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

.sc-body > *, .sc-piece-head { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .sc-lift { opacity: 0; transform: translateY(9px); transition: opacity 480ms ease, transform 480ms ease; }
  .sc-lift.is-up { opacity: 1; transform: none; }
}

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

@media print {
  .sc-nav, .sc-keep, .sc-letter, .sc-fare-form { display: none; }
  body { background: #fff; }
  .sc-lift { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ the place lookup */

.sc-field-place { position: relative; }

.sc-offers {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 12;
  background: var(--sc-paper); border: 1px solid var(--sc-rule); border-top: 0;
  max-height: 15rem; overflow-y: auto;
}
.sc-offers[hidden] { display: none; }

.sc-offer {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.6rem 0.7rem; cursor: pointer; min-height: 44px;
  border-bottom: 1px solid var(--sc-hair);
}
.sc-offer:last-child { border-bottom: 0; }
.sc-offer:hover, .sc-offer.is-on { background: var(--sc-card); }
.sc-offer-code {
  font-family: var(--sc-face); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; color: var(--sc-mark); flex: none; width: 2.6rem;
}
.sc-offer-name { font-size: 0.95rem; }

.sc-word {
  margin: 0 0 0.9rem; min-height: 1.3rem; max-width: 64ch;
  font-family: var(--sc-face); font-size: 0.82rem; color: var(--sc-mark);
}
.sc-word.is-done { color: var(--sc-cool); }

/* The code and the place name were two spans with no styling between them, so a suggestion read
   "PVDProvidence, United States" with the two run together. */
.sc-offer-code {
  display: inline-block; min-width: 3.1rem;
  font-family: var(--sc-face); font-size: 0.79rem; letter-spacing: 0.09em;
  color: var(--sc-cool);
}
.sc-offer-name { font-size: 0.95rem; }


/* The quiet ink measured 3.28:1 on the paper and 2.78:1 on a card, on type down to 10.88px, while
   the accessibility page told the reader every pairing passed. #645f55 gives 5.62 and 4.77. */

/* A footer link stood 18px tall against the 44px the same page promises. These are destinations in
   a list rather than words inside a sentence, so they can carry the height. */
.sc-foot-cols li { margin-bottom: 0; }
.sc-foot-cols li a { display: flex; align-items: center; min-height: 44px; padding: 0.7rem 0; }