/* ==========================================================================
   pages.css — layouts that belong to one page
   --------------------------------------------------------------------------
   0. Small shared helpers (stacks)
   1. Home — Editorial (index.html)
   2. Home — Minimal List (index-minimal.html)
   3. Work Grid (work.html)
   4. Project Detail (project-single.html)
   5. About (about.html)
   6. Services (services.html)
   7. Journal and Journal Post (journal.html, journal-post.html)
   8. Contact (contact.html)
   9. Breakpoints  (style-guide.html has its own file: style-guide.css)
   ========================================================================== */

/* 0. Helpers -------------------------------------------------------------- */
.stack { display: grid; align-content: start; gap: var(--s2); }
.stack-lg { display: grid; align-content: start; gap: var(--s4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* 1. Home — Editorial ----------------------------------------------------- */
.hero {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}

.hero__title { max-width: 14ch; }

.hero__aside {
  display: grid;
  gap: var(--s3);
  align-content: end;
  max-width: 34ch;
}

.hero__aside p { color: var(--muted-text); }

.featured { row-gap: var(--s5); }

.studio-intro__text {
  display: grid;
  gap: var(--s2);
}

.services-preview li {
  display: grid;
  gap: var(--s1);
}

.cta {
  display: grid;
  gap: var(--s4);
}

.cta__line {
  max-width: 18ch;
  font-size: var(--fs-h1);
}

/* 2. Home — Minimal List -------------------------------------------------- */
.minimal-intro {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}

.minimal-intro h1 {
  max-width: 22ch;
  font-weight: 400;
}

.minimal-intro p {
  margin-top: var(--s3);
  color: var(--muted-text);
}

/* 3. Work Grid ------------------------------------------------------------ */
.work-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: var(--s3);
}

.work-count {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.work-grid {
  columns: 1;
  column-gap: var(--gutter);
  list-style: none;
}

.work-grid > li {
  padding-bottom: var(--s5); /* padding, not margin: WebKit carries a margin over to the top of the next column */
  break-inside: avoid;
}

.work-grid > li[hidden] { display: none; }

.load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--s4);
}

/* 4. Project Detail ------------------------------------------------------- */
.project-head {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
  padding-bottom: var(--s4);
}

.project-head h1 { max-width: 18ch; }

.meta-list {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: var(--rule-thin) solid var(--ink);
}

.meta-list dt {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.meta-list dd { margin: 0; }

.project-body {
  display: grid;
  gap: var(--s5);
}

.bleed { margin-block: var(--s5); }

.pair {
  display: grid;
  gap: var(--gutter);
}

.next-project {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s5);
  border-top: var(--rule-heavy) solid var(--ink);
  text-decoration: none;
}

.next-project span:first-child {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.next-project span:last-child {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 1.05;
}

.next-project:hover span:last-child { color: var(--accent); }

/* 5. About ---------------------------------------------------------------- */
.about-hero { padding-top: var(--s5); }

.about-hero__title { margin-bottom: var(--s4); }

.about-hero blockquote {
  align-self: end;
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-style: italic;
  line-height: 1.3;
}

.about-hero blockquote footer {
  margin-top: var(--s3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--muted-text);
}

.bio {
  display: grid;
  gap: var(--s2);
}

.capabilities {
  columns: 2;
  column-gap: var(--gutter);
  list-style: none;
}

.capabilities li {
  padding-block: var(--s1);
  border-bottom: var(--rule-thin) solid var(--rule);
  break-inside: avoid;
}

.logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--rule-thin) solid var(--rule);
  border-left: var(--rule-thin) solid var(--rule);
  list-style: none;
}

.logos li {
  display: grid;
  place-items: center;
  padding: var(--s4) var(--s3);
  border-right: var(--rule-thin) solid var(--rule);
  border-bottom: var(--rule-thin) solid var(--rule);
}

.logos img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--s4);
}

.awards li {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  column-gap: var(--s2);
}

.awards time {
  color: var(--muted-text);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.awards p { grid-column: 2; }

/* 6. Services ------------------------------------------------------------- */
.deliverables {
  display: grid;
  gap: var(--s1);
  padding-left: var(--s2);
}

/* 7. Journal -------------------------------------------------------------- */
.featured-post h2 a,
.post-card h3 a { text-decoration: none; }

.featured-post h2 a:hover,
.post-card h3 a:hover { color: var(--accent); }

.featured-post__body {
  display: grid;
  align-content: center;
  gap: var(--s2);
}

.post-list {
  display: grid;
  gap: var(--s5) var(--gutter);
  list-style: none;
}

.post-card {
  display: grid;
  gap: var(--s2);
}

.post-card p { color: var(--muted-text); }

.post-date {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.side-list {
  display: grid;
  list-style: none;
  border-top: var(--rule-thin) solid var(--ink);
}

.side-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: var(--s1);
  border-bottom: var(--rule-thin) solid var(--rule);
  font-size: var(--fs-small);
}

.side-list span { color: var(--muted-text); }

.narrow { max-width: calc(var(--measure) + var(--page-pad) * 2); }

.post-header {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
  padding-bottom: var(--s4);
}

.post-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.post-body > * + * { margin-top: var(--s3); }

.post-body h2 { margin-top: var(--s5); }

.post-body h3 { margin-top: var(--s4); }

.post-body ul,
.post-body ol {
  display: grid;
  gap: var(--s1);
  padding-left: var(--s3);
}

.post-body blockquote {
  padding-left: var(--s3);
  border-left: var(--rule-heavy) solid var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-style: italic;
  line-height: 1.45;
}

.post-body pre {
  overflow-x: auto;
  padding: var(--s2);
  border: var(--rule-thin) solid var(--rule);
  background: var(--surface);
  line-height: 1.5;
}

.post-body figure { margin-block: var(--s4); }

.related {
  display: grid;
  gap: var(--s4) var(--gutter);
  list-style: none;
}

/* 8. Contact -------------------------------------------------------------- */
.contact-info {
  display: grid;
  align-content: start;
  gap: var(--s4);
  padding-top: var(--s4);
}

.contact-info dl {
  display: grid;
  gap: var(--s2);
}

.contact-info dt {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.contact-info dd { margin: 0; }

.contact-form {
  padding: var(--s4) var(--s3);
  border: var(--rule-thin) solid var(--ink);
  background: var(--surface);
}

.form-row {
  display: grid;
  gap: var(--s3);
}

/* 9. Breakpoints --------------------------------------------------------- */
@media (min-width: 768px) {
  .hero { padding-top: var(--s6); }

  .featured__item--a { grid-column: 1 / 8; }
  .featured__item--b { grid-column: 9 / 13; margin-top: var(--s6); }
  .featured__item--c { grid-column: 3 / 10; }

  .studio-intro > h2 { grid-column: 1 / 6; }
  .studio-intro__text { grid-column: 7 / 13; }

  .services-preview li {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
  }

  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .work-grid { columns: 2; }

  .project-head { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--gutter); }

  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-hero__portrait { grid-column: 1 / 6; }
  .about-hero blockquote { grid-column: 7 / 13; }

  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .faq > h2 { grid-column: 1 / 5; }
  .faq > .accordion { grid-column: 5 / 13; }

  .featured-post__cover { grid-column: 1 / 8; }
  .featured-post__body { grid-column: 8 / 13; }

  .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .related { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-form { padding: var(--s5) var(--s4); }

}

@media (min-width: 1024px) {
  .hero__title { grid-column: 1 / 10; }
  .hero__aside { grid-column: 10 / 13; }

  .studio-intro__text { columns: 2; column-gap: var(--gutter); display: block; }
  .studio-intro__text p + p { margin-top: var(--s2); }

  .work-grid { columns: 3; }

  .project-meta { grid-column: 1 / 4; }
  .project-meta .meta-list { position: sticky; top: var(--s4); }
  .project-body { grid-column: 5 / 13; }

  .bio-head { grid-column: 1 / 3; }
  .bio { grid-column: 3 / 13; columns: 2; column-gap: var(--gutter); display: block; }
  .bio p + p { margin-top: var(--s2); }

  .about-timeline { grid-column: 1 / 7; }
  .about-capabilities { grid-column: 8 / 13; }

  .journal-main { grid-column: 1 / 9; }
  .journal-aside { grid-column: 10 / 13; }

  .contact-info { grid-column: 1 / 5; }
  .contact-form { grid-column: 6 / 13; }

}