/* Type is in rem, like every other sheet. This file predates the token system
   and was the last one setting font sizes in px -- fourteen of them -- which
   meant the sitemap was the one page whose text ignored a reader's browser font
   size setting. The values are the same sizes, converted at the 16px root.
   ========================================================================== */

/* ==========================================================================
   STATIC PAGES LAYOUT (Sitemap, About, Privacy, Terms)
   ========================================================================== */

/* Layout Container */
.article-layout {
  display: flex;
  max-width: 1400px;
  margin: 40px auto;
  gap: 30px;
  padding: 0 20px;
  align-items: flex-start;
}

/* Main Content Box for Static Pages */
.article.detail {
  flex: 2.5;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  background: var(--surface);
  padding: 40px 60px;
  /* Border-box, or the 120px of horizontal padding adds to width:100% instead
     of absorbing into it — at a 360px viewport the box rendered 404px wide and
     every page on this layout scrolled sideways. */
  box-sizing: border-box;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  color: var(--ink);
  text-rendering: optimizeLegibility;
  width: 100%;
  /* A long unbreakable token (a bare URL, a single long word) must break inside
     the box rather than push the page sideways. */
  overflow-wrap: break-word;
}

/* Fix paragraph spacing in static pages */
.article.detail p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: var(--ink);
}

/* Fix ALL links in static pages - prevent blue links */
.article.detail a {
  color: var(--ink);
  text-decoration: underline;
}

.article.detail a:hover {
  color: var(--brass);
}

/* Header Section */
.sitemap-header {
  text-align: center;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 40px;
  padding-bottom: 20px;
}

.sitemap-header h1,
.article.detail .sitemap-header h1 {
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: var(--sans);
  color: var(--ink);
}

.sitemap-subheading {
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  margin-top: 10px;
  text-align: center;
  font-weight: 400;
  font-size: 1.125rem;
}

/* Grid Layout for Static Pages */
.sitemap-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 2fr; /* Asymmetric grid for modern feel */
  gap: 60px;
  margin-top: 30px;
  align-items: start;
}

/* The editorial page's AI-use disclosure. Full width beneath the three-track
   grid rather than a fourth cell in it: .sitemap-grid is asymmetric
   (1.2fr 1.2fr 2fr), so a fourth column would wrap into a ragged second row.
   Its measure is capped because these are real paragraphs, not the short
   column blurbs above, and a 1200px line of 16px sans is unreadable. */
.editorial-disclosure {
  margin-top: 60px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
}

.editorial-disclosure h3 {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 12px;
  margin-bottom: 20px;
  color: var(--ink);
  text-align: left;
}

.editorial-disclosure p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  max-width: 68ch;
  margin: 0 0 16px;
}

/* Privacy policy has four sections — balance them in a 2x2 grid */
.privacy-grid {
  grid-template-columns: 1fr 1fr;
}

/* Collapse to a single column on tablets and phones. Declared here (not in
   responsive.css) so it follows the base .privacy-grid rule in load order. */
@media (max-width: 950px) {
  .privacy-grid {
    grid-template-columns: 1fr;
  }
}

.sitemap-col h2 {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: var(--s-6);
  color: var(--ink);
  text-align: left;
}

.sitemap-col p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.sitemap-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.sitemap-col ul li {
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Sitemap Links */
.sitemap-link {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
  display: inline-block;
  letter-spacing: 0.5px;
}

.sitemap-link:hover {
  color: var(--brass);
  transform: translateX(5px);
}

/* About List Styling */
.about-list {
  list-style: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.8;
  color: var(--ink);
}

.about-list li {
  margin-bottom: var(--s-4);
}

.about-list li strong {
  letter-spacing: 1px;
  display: block;
  font-size: 0.6875rem;
  color: var(--brass); /* Using the 'Arts' color for highlights */
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

/* Read More Button (used in static pages) */
.read-more-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 10px var(--s-6);
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.read-more-btn:hover {
  background: var(--ink);
  color: var(--surface);
}

/* The contact button's label is a literal email address, so it opts out of the
   uppercase treatment the other .read-more-btn instances get — an address is
   data to be copied, not a label to be styled. */
.contact-email-btn {
  margin-top: 16px;
  text-transform: none;
  font-size: 0.875rem;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

/* Preferred sources page. The call to action sits above the explanatory grid
   rather than below it, because a reader who already knows what the setting
   does should not have to scroll past four columns to reach the button. */
.preferred-cta {
  margin: 0 0 30px;
}

.preferred-cta .read-more-btn {
  font-size: 0.875rem;
}

.preferred-note {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}