/*
  desk.css — "audit desk" design layer.
  Loaded after stitch-theme.css and prose.css; overrides their visual language.
  Palette tokens (--paper, --ink, --graphite, --rule, --redline, --highlighter)
  and fonts are defined in layouts/partials/head.html.

  Principles:
  - Paper, ink and rules do the structural work; no shadows, no gradients.
  - Redline is the only accent (links, active states, primary action).
  - Highlighter appears only in response to the reader (hover, focus, selection).
  - Bricolage Grotesque for headings/UI, Source Serif 4 for reading text.
*/

/* ========== Base ========== */
body {
  font-family: var(--font-body) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-size: 1rem;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

/* parsa-hugo sets Open Sans on paragraphs; let them inherit the reading face */

p, li, dd, blockquote, input, textarea, select { font-family: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-optical-sizing: auto;
}

time, .ledger__date, .post-meta-bar, .notes time, .sidebar-item__date {
  font-variant-numeric: tabular-nums lining-nums;
}

a { color: var(--redline); text-underline-offset: 0.18em; }
a:hover { color: var(--redline); }

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  width: 0;
  background: var(--redline);
}

/* Highlighter sweep on link text — the site's one interactive signature */
.desk-mark {
  background-image: linear-gradient(var(--highlighter), var(--highlighter));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 0.42em;
  transition: background-size 0.28s ease-out;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a:hover .desk-mark,
a:focus-visible .desk-mark {
  background-size: 100% 0.42em;
}

@media (prefers-reduced-motion: reduce) {
  .desk-mark { transition: none; }
}

/* ========== Header ========== */
.site-header {
  background: color-mix(in srgb, var(--paper) 92%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule) !important;
  padding-top: env(safe-area-inset-top, 0px);
}

.site-header.is-scrolled { box-shadow: none !important; border-bottom-color: var(--ink) !important; }

.site-nav {
  max-width: 76rem !important;
  padding: 0.65rem 1.25rem !important;
}

.site-brand__text {
  font-family: var(--font-display) !important;
  font-variation-settings: "opsz" 48;
  font-weight: 750 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
}

.site-brand__tld { color: var(--redline) !important; font-weight: 600 !important; }

.site-nav__links { gap: 0.25rem !important; margin-left: 1.5rem; margin-right: auto; }

.site-nav__link {
  font-family: var(--font-ui) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--graphite) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.6rem !important;
  border-bottom: 2px solid transparent;
}

.site-nav__link:hover { color: var(--ink) !important; }

.site-nav__link.is-active {
  color: var(--ink) !important;
  border-bottom-color: var(--redline);
}

.site-lang { position: relative; display: none; }

@media (min-width: 768px) {
  .site-lang { display: block; }
}

.site-icon-btn {
  border-radius: var(--radius-control) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--graphite) !important;
  font-family: var(--font-ui);
}

.site-icon-btn:hover { color: var(--ink) !important; border-color: var(--rule) !important; }

.site-icon-btn .font-label { font-family: var(--font-ui) !important; font-weight: 600; }

.site-dropdown {
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--ink) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  font-family: var(--font-ui);
}

.site-dropdown__item.is-active { background: transparent !important; color: var(--redline) !important; }

.site-mobile-menu {
  background: var(--paper) !important;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}

.site-mobile-menu__link {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--rule);
  color: var(--ink) !important;
  background: transparent !important;
}

.site-mobile-menu__link.is-active { color: var(--redline) !important; }

.site-mobile-menu__label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--graphite);
  margin: 0 0 0.5rem;
}

/* ========== Chips & buttons (flattened) ========== */
.site-chip {
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--rule) !important;
  background: transparent !important;
  color: var(--graphite) !important;
  box-shadow: none !important;
}

.site-chip:hover,
.site-chip.is-active,
.site-chip.is-accent { border-color: var(--ink) !important; color: var(--ink) !important; }

.btn-primary,
.desk-button {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui) !important;
  font-weight: 650 !important;
  font-size: 0.98rem;
  border-radius: var(--radius-control) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  padding: 0.7rem 1.15rem !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-primary:hover,
.desk-button:hover {
  background: var(--redline) !important;
  border-color: var(--redline) !important;
  color: var(--color-on-primary) !important;
  transform: none !important;
  filter: none !important;
}

.dark .btn-primary,
.dark .btn-primary:hover { color: var(--paper) !important; box-shadow: none !important; }
.dark .btn-primary:hover { color: var(--color-on-primary) !important; }

.btn-secondary,
.btn-outline-primary {
  border-radius: var(--radius-control) !important;
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background: transparent !important;
  color: var(--redline) !important;
  border-color: var(--redline) !important;
}

/* ========== Footer ========== */
.site-footer {
  background: var(--paper) !important;
  border-top: 2px solid var(--ink) !important;
  font-family: var(--font-ui);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-footer__grid { max-width: 76rem !important; }

.site-footer__title {
  font-family: var(--font-display) !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em;
}

.site-footer__tagline { font-family: var(--font-body); color: var(--graphite) !important; max-width: 46ch; }

.site-footer__nav a,
.site-footer__meta,
.site-footer__meta a {
  font-family: var(--font-ui) !important;
  font-size: 0.9rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--graphite) !important;
}

.site-footer__nav a:hover,
.site-footer__meta a:hover { color: var(--redline) !important; }

/* ========== Home: audit desk ========== */
.desk {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

.desk-intro {
  display: grid;
  gap: 1.25rem 3rem;
  padding-block: 3rem 2.5rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .desk-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
}

.desk-intro__title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  max-width: 24ch;
  margin: 0 !important;
  color: var(--ink) !important;
}

.desk-intro__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 54ch;
  margin: 0 0 0.75rem;
}

.desk-intro__archive {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--graphite);
  margin: 0;
}

/* The lead story: the page's one loud element */
.desk-lead {
  padding-block: 3rem 3.5rem;
  border-bottom: 2px solid var(--ink);
}

.desk-lead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--graphite);
  margin: 0 0 1.25rem;
}

.desk-lead__label { color: var(--redline); font-weight: 650; }

.desk-lead__title {
  font-size: clamp(2.25rem, 5.6vw, 4.6rem) !important;
  font-variation-settings: "opsz" 96;
  font-weight: 680 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.026em !important;
  max-width: 21ch;
  margin: 0 0 1.5rem !important;
  text-wrap: balance;
}

.desk-lead__title a { color: var(--ink) !important; text-decoration: none !important; }

.desk-lead__summary {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 62ch;
  margin: 0 0 1.75rem;
}

.desk-columns {
  display: grid;
  gap: 3rem;
  padding-top: 2.75rem;
}

@media (min-width: 1024px) {
  .desk-columns { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }
}

.desk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--ink);
}

.desk-head__title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  color: var(--ink) !important;
}

.desk-head__link {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--redline) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
}

/* ========== Ledger (home + list pages) ========== */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .ledger__row { grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem; gap: 0 1.75rem; }
}

.ledger__date {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--graphite);
  padding-top: 0.15rem;
}

.ledger__day {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.ledger__title {
  font-size: 1.22rem !important;
  font-weight: 650 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.018em !important;
  margin: 0 0 0.4rem !important;
  text-wrap: pretty;
}

.ledger__title a { color: var(--ink) !important; text-decoration: none !important; }

.ledger__summary {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--graphite);
  margin: 0;
  max-width: 68ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ledger__topic {
  grid-column: 2;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--graphite);
  padding-top: 0.5rem;
}

@media (min-width: 720px) {
  .ledger__topic { grid-column: 3; padding-top: 0.3rem; text-align: right; }
}

/* Trend notes column */
.notes { list-style: none; margin: 0; padding: 0; }

.notes__item { border-bottom: 1px solid var(--rule); }

.notes__item a {
  display: block;
  padding-block: 0.95rem;
  text-decoration: none !important;
}

.notes__item time {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--graphite);
  margin-bottom: 0.2rem;
}

.notes__title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--ink);
}

.notes__item a:hover .notes__title { color: var(--redline); }

/* ========== Page hero (list, article, static pages) ========== */
.page-hero {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 2.75rem 0 2.25rem !important;
}

.page-hero__inner { max-width: 76rem !important; padding-inline: 1.25rem; }

.page-hero__breadcrumb {
  font-family: var(--font-ui) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--graphite) !important;
  margin-bottom: 1.25rem !important;
}

.page-hero__breadcrumb a { color: var(--graphite) !important; text-decoration: underline !important; text-decoration-color: var(--rule) !important; }
.page-hero__breadcrumb a:hover { color: var(--redline) !important; text-decoration-color: currentColor !important; }

.page-hero__eyebrow {
  font-family: var(--font-ui) !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--redline) !important;
}

.page-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.4rem) !important;
  font-variation-settings: "opsz" 96;
  font-weight: 680 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.024em !important;
  max-width: 24ch !important;
  text-wrap: balance;
}

.page-hero__description {
  font-family: var(--font-body) !important;
  font-size: clamp(1.05rem, 1.35vw, 1.18rem) !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  max-width: 64ch !important;
}

.page-hero--article .page-hero__title { max-width: 26ch !important; }

/* Article meta as a definition list under the headline */
.post-meta-bar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem !important;
  margin: 1.75rem 0 0 !important;
  padding: 1rem 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  background: transparent !important;
  border-radius: 0 !important;
  max-width: 64ch;
}

.post-meta-bar__item { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.post-meta-bar__item dd { margin: 0; font-family: var(--font-ui); font-size: 0.95rem; color: var(--ink); }

.post-meta-bar__key {
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--graphite) !important;
}

/* ========== List page ========== */
.list-shell,
.article-shell { max-width: 76rem !important; }

.list-layout--ledger { display: block !important; max-width: 60rem; }

.list-count {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--graphite);
  margin: 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--ink);
}

.list-pagination { margin-top: 2.5rem !important; }

.pagination .page-link {
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--rule) !important;
  background: transparent !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.pagination .page-item.active .page-link,
.dark .pagination .page-item.active .page-link {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}

.pagination .page-link:hover { border-color: var(--ink) !important; }

/* ========== Article ========== */
.article-cover {
  margin: 0 0 2.5rem !important;
  border: 1px solid var(--rule);
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.content {
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
  color: var(--ink) !important;
  max-width: 68ch !important;
}

.content h2 {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  border-bottom: 0 !important;
  border-top: 2px solid var(--ink) !important;
  padding: 0.85rem 0 0 !important;
}

.content h3 { font-size: 1.3rem !important; font-weight: 650 !important; }

.content a { color: var(--redline) !important; text-decoration: underline !important; text-decoration-thickness: 1px; }
.content a:hover { background: var(--highlighter); }

.content code,
.content pre,
.content pre code { font-family: var(--font-code) !important; }

.content table { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

.content blockquote {
  border-left: 3px solid var(--redline) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

/* Answer-first capsules: framed like an evidence summary */
.aeo-takeaways,
.aeo-answers {
  background: var(--color-surface) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

.aeo-takeaways__title,
.aeo-answers__title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

.aeo-takeaways__item,
.aeo-answers__a { font-family: var(--font-body) !important; color: var(--ink) !important; }

.aeo-answers__q { font-family: var(--font-display) !important; color: var(--ink) !important; }

.article-tags { border-top: 1px solid var(--rule) !important; }

.article-tags__label {
  font-family: var(--font-ui) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--graphite) !important;
}

/* Support note after the article */
.personal-ad {
  margin: 3rem 0 0 !important;
  padding: 1.25rem !important;
  border: 1px dashed var(--graphite) !important;
  border-radius: var(--radius-card) !important;
  background: transparent !important;
  box-shadow: none !important;
  max-width: 68ch;
}

.personal-ad__label {
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: var(--graphite) !important;
  margin: 0 0 1rem !important;
}

.personal-ad__link { color: var(--ink) !important; font-family: var(--font-ui); }
.personal-ad__link:hover strong { color: var(--redline); }

.personal-ad__image {
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--rule);
  max-height: 14rem;
  width: 100%;
  object-fit: cover;
}

/* ========== Sidebar ========== */
.sidebar-card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.85rem 0 1.5rem !important;
}

.sidebar-card__title {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

.sidebar-search__input {
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--rule) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
}

.sidebar-search__input:focus { border-color: var(--ink) !important; }

.sidebar-search__btn {
  border-radius: var(--radius-control) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: none !important;
}

.sidebar-item {
  display: block !important;
  padding-block: 0.7rem !important;
  border-bottom: 1px solid var(--rule);
  text-decoration: none !important;
}

.sidebar-item__date {
  display: block;
  font-family: var(--font-ui) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--graphite) !important;
}

.sidebar-item__title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
  margin: 0.15rem 0 0 !important;
}

.sidebar-item:hover .sidebar-item__title { color: var(--redline) !important; }

.sidebar-chip-count { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ========== Focus ========== */
:focus-visible { outline: 2px solid var(--redline) !important; outline-offset: 2px; box-shadow: none !important; }

/* ========== Prose consistency ========== */
/* parsa-hugo sizes <p> at 15px; keep paragraphs on the article's reading size */
.content p,
.content li { font-size: inherit !important; line-height: inherit; }

.content th {
  font-family: var(--font-ui) !important;
  font-size: 0.88rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
}

.content thead { background: transparent !important; }

.content table {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* ========== Page-specific fixes ========== */
/* stitch-theme's global input[type=text] padding hides the search icon gutter */
#custom-search-input {
  padding-left: 3rem !important;
  padding-right: 3.5rem !important;
  font-family: var(--font-ui) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}

#custom-search-input:focus { border-color: var(--ink) !important; }

/* Teach Copilot is a product sales page: keep it on the UI face */
main:has(.tc-hero) { font-family: var(--font-ui); }