/* Step Up AVL — "The Broadsheet", WNC Desk layer.
 *
 * Companion to assets/broadsheet.css (which must load first). The Desk is a
 * sub-brand: indigo instead of green, a system mono stack for every label.
 *
 * Spec: _docs/design/broadsheet-2026-07/README.md section 6, as amended by
 * DELTA-v10-desk-index.md — the INDEX now sits on the site's paper background
 * inside a 3px indigo frame, rather than floating on a full-bleed indigo
 * surround. The brief pages keep the surround; that is deliberate, so the
 * deep-dive stays immersive and the index reads as part of the main site.
 */

.desk-page { padding: 34px 0 48px; }

.desk-sheet {
  max-width: 860px;
  margin: 0 auto;
  background: var(--desk-sheet);
  border: 3px solid var(--desk-indigo);
  padding: 44px 52px 48px;
  color: var(--desk-ink);
}

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

.desk-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--desk-label);
  margin: 0 0 14px;
}
.desk-kicker a { color: var(--desk-label); }
.desk-kicker a:hover { color: var(--desk-indigo); }

.desk-sheet h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--desk-indigo);
  margin: 0 0 16px;
}

.desk-intro {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--desk-meta);
  max-width: 640px;
  margin: 0;
}

.desk-stamp {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #4A4438;
  margin: 18px 0 0;
}

/* -------------------------------------------------------------- brief groups */

.desk-group { margin-top: 38px; }
.desk-group h2 {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--desk-indigo);
  border-bottom: 2px solid var(--desk-indigo);
  padding-bottom: 8px;
  margin: 0 0 4px;
}

.desk-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 18px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid #CFC6B0;
  color: var(--desk-ink);
}
.desk-row:hover { background: var(--desk-panel); color: var(--desk-ink); }

.desk-row .jur {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--desk-indigo);
}
.desk-row .ttl {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  display: block;
}
.desk-row .blurb {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: #3A352C;
  display: block;
  margin-top: 4px;
}
.desk-row .date {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: #4F46E5;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- footnote */

.desk-foot {
  margin-top: 42px;
  border-top: 1px solid #CFC6B0;
  padding-top: 16px;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: #3A352C;
}
.desk-foot a { color: var(--desk-label); }
.desk-foot a:hover { color: var(--desk-indigo); }

/* ----------------------------------------------------------------- responsive */

@media (max-width: 760px) {
  .desk-sheet { padding: 28px 20px 32px; border-width: 2px; }
  .desk-sheet h1 { font-size: 30px; }
  .desk-row {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
  }
  .desk-row .date { grid-row: 1; justify-self: start; }
}

@media print {
  .trust, .masthead, .navrule-thin, .site-foot { display: none; }
  .desk-sheet { border: 0; padding: 0; max-width: none; }
}

/* ------------------------------------------------- mobile legibility floor */

/* The Desk sets every label in mono, small, with wide tracking. Courier at 10px
 * and 0.18em goes grey and faint on a phone. Below 760px the labels come up and
 * the tracking eases. */
@media (max-width: 760px) {
  .desk-kicker { font-size: 12px; letter-spacing: 0.1em; }
  .desk-stamp { font-size: 12px; }
  .desk-group h2 { font-size: 13.5px; letter-spacing: 0.1em; }
  .desk-row .jur { font-size: 13px; letter-spacing: 0.06em; }
  .desk-row .date { font-size: 13px; }
  .desk-row .blurb { font-size: 15.5px; }
  .desk-foot { font-size: 14px; }
}