/* The project pages: the landing page of tiles, and one essay per project.
 *
 * Design: docs/design-docs/project-pages.md, rounds 10 and 11.
 *
 *   /projects        four square tiles of one size, two by two, inside
 *                    the site's 600px measure (D-1, RQ-12)
 *   /projects/:slug  a 190px fact rail, then the 600px reading column
 *                    (RQ-10, RQ-11)
 *
 * This sheet loads after articles.css and wins only the topbar's inset,
 * so each page has one left edge and one right edge (frame.ts).
 *
 * No hex values. Every colour comes from theme-quiet-editorial.css.
 */

body.projects-page .topbar { --frame: 600px; }
body.project-page .topbar { --frame: 814px; }

/* ── the landing page ─────────────────────────────────────────── */

.frame.projects {
  width: 600px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px 0 48px;
}

.frame.projects .head { margin: 0 0 32px; }

.frame.projects h1,
.frame.project h1 {
  font-family: var(--wc-serif);
  font-weight: 400;
  line-height: 1.1;
  color: var(--wc-ink);
  margin: 0;
}

.frame.projects h1 { font-size: 40px; }

.frame.projects .head .dek {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--wc-muted);
  margin: 6px 0 0;
}

.frame.projects .missing {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--wc-muted);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* A square, always. The rank sets the order, never the size. */
.tile {
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--wc-line);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.tile .layer,
.fact .label,
.contents .label,
.articles .label {
  font-family: var(--wc-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-faint);
  margin: 0;
}

.tile h2 {
  font-family: var(--wc-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}

.tile h2 a,
.articles h3 a,
.fact .link a,
.prose a {
  color: var(--wc-accent);
  text-decoration: none;
}

.tile h2 a:hover,
.articles h3 a:hover,
.fact .link a:hover,
.prose a:hover { color: var(--qe-accent-deep); }

.tile h2 a:focus-visible,
.articles h3 a:focus-visible,
.fact .link a:focus-visible,
.contents a:focus-visible,
.prose a:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 3px; }

.tile .dek {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--wc-muted);
  margin: 10px 0 0;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.tile .meta {
  font-family: var(--wc-mono);
  font-size: 12px;
  color: var(--wc-faint);
  margin: auto 0 0;
  overflow-wrap: anywhere;
}

/* ── one project ──────────────────────────────────────────────── */

.frame.project {
  width: 814px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 32px 0 64px;
  display: grid;
  grid-template-columns: 190px minmax(0, 600px);
  gap: 24px;
  align-items: start;
}

.frame.project .rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fact .value {
  font-family: var(--wc-serif);
  font-size: 15px;
  color: var(--wc-ink);
  margin: 6px 0 0;
}

.fact .value.link {
  font-family: var(--wc-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.fact .pill {
  display: inline-block;
  font-family: var(--wc-mono);
  font-size: 12px;
  color: var(--wc-muted);
  border: 1px solid var(--wc-line-strong);
  border-radius: 22px;
  padding: 3px 10px;
  margin: 6px 0 0;
}

.contents {
  border-top: 1px solid var(--wc-line);
  padding-top: 18px;
}

.contents ol {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contents a {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--wc-muted);
  text-decoration: none;
}

.contents a:hover { color: var(--wc-ink); }

.frame.project h1 { font-size: 48px; }

.essay .subtitle {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--wc-muted);
  margin: 6px 0 0;
}

.prose { margin: 28px 0 0; }

.prose p {
  font-family: var(--wc-serif);
  font-size: 18px;
  line-height: 1.68;
  color: var(--wc-ink);
  margin: 0 0 14px;
  text-wrap: pretty;
}

/* The lede: the essay's first paragraph, before any heading. */
.prose > p:first-child {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.prose h2 {
  font-family: var(--wc-serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--wc-ink);
  margin: 34px 0 14px;
  scroll-margin-top: 24px;
}

.prose code {
  font-family: var(--wc-mono);
  font-size: 15px;
}

.prose wc-block-diagram,
.prose wc-flowchart,
.prose wc-state-machine,
.prose wc-sequence,
.prose wc-swimlane {
  display: block;
  margin: 24px 0 28px;
}

.articles { margin: 44px 0 0; }

.articles .label {
  border-bottom: 1px solid var(--wc-line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.articles ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.articles h3 {
  font-family: var(--wc-serif);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.articles .dek {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--wc-muted);
  margin: 4px 0 0;
}

.articles .meta {
  font-family: var(--wc-mono);
  font-size: 12px;
  color: var(--wc-faint);
  margin: 6px 0 0;
}

.articles .none {
  font-family: var(--wc-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--wc-muted);
  margin: 0;
}

/* ── narrow screens ───────────────────────────────────────────── */

/* The rail folds above the column, as the post page's rails do. */
@media (max-width: 878px) {
  body.project-page .topbar { --frame: 100%; }
  .frame.project {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 32px;
    padding-right: 32px;
  }
  .frame.project .rail { position: static; }
}

@media (max-width: 664px) {
  body.projects-page .topbar { --frame: 100%; }
  .frame.projects { width: 100%; padding-left: 32px; padding-right: 32px; }
}

/* One tile per row. A square that wide would push everything below the fold. */
@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { aspect-ratio: auto; min-height: 220px; }
  .frame.project h1 { font-size: 40px; }
}