/* ------------------------------------------------------------------
   Chris Petrillo — site styles
   Colors, fonts and the page width live in these variables.
   ------------------------------------------------------------------ */
:root {
  --text: #333333;
  --topbar: #f9f9f9;
  --panel: #f9f9f9;
  --page: 1170px;   /* content width on large screens */
  --gutter: 30px;   /* space between columns */
}

/* Each page picks a font set with "fonts:" at the top of its content file. */
.fonts-jakarta {
  --body-font: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  --heavy-font: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  --heavy-weight: 800;
  --light-font: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  --light-weight: 200;
}
.fonts-raleway {
  --body-font: Helvetica, Arial, sans-serif;
  --heavy-font: "Raleway", Helvetica, Arial, sans-serif;
  --heavy-weight: 900;
  --light-font: "Raleway", Helvetica, Arial, sans-serif;
  --light-weight: 400;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- top bar (only on pages with "header: yes") ---------- */
.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  height: 40px; padding: 0 30px 0 40px;
  background: var(--topbar);
}
.topbar nav a {
  display: block; padding: 0 25px; line-height: 40px;
  font-family: var(--heavy-font); font-weight: var(--heavy-weight); font-size: 15px;
  color: #1c2d3f; text-decoration: none;
}
.topbar nav a:hover { opacity: 1; text-decoration: underline; background: #fff; }
.panel-button { display: block; padding: 0 0 0 10px; height: 40px; }
.panel-button svg { display: block; margin-top: 8px; fill: #262626; }
.panel-button:hover { opacity: .6; }

/* ---------- sections & grid ---------- */
.section {
  display: flow-root; /* keeps margins of the content (e.g. dividers) inside the section background */
  /* extend the background 1px down so no hairline of page color shows where sections meet */
  box-shadow: 0 1px 0 var(--bg, transparent);
  color: var(--text);
  padding-top: calc(var(--pt, 0) * 1px);
  padding-bottom: calc(var(--pb, 0) * 1px);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gap, 0);
  max-width: var(--page);
  margin: 0 auto;
}
.section.wide .grid { max-width: none; margin: 0; }
.section.nogap .grid { column-gap: 0; }
.col { min-width: 0; }
.col.middle { align-self: center; }

/* ---------- text ---------- */
p, ol { margin: 0; font-size: calc(var(--fs, 18) * 1px); line-height: var(--lh, 1.75); }
ol { padding-left: 1.4em; }
strong, .heavy { font-family: var(--heavy-font); font-weight: var(--heavy-weight); }
.light { font-family: var(--light-font); font-weight: var(--light-weight); }
.sans { font-family: var(--body-font); font-weight: 400; }
.italic, em { font-style: italic; }
.spaced { letter-spacing: 1px; }
.col > p + p, .col > p + ol, .col > ol + p { margin-top: 32px; }

/* ---------- media ---------- */
figure { margin: 0; }
.image { display: flex; justify-content: center; }
.image.left { justify-content: flex-start; }
.image.right { justify-content: flex-end; }
.image.full img { width: 100%; }
.image a:hover { opacity: 1; }
.video video { width: 100%; }
.embed { position: relative; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* row of big numbers with labels, separated by thin lines ("stats:" block) */
.stats { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
.stat { padding: 12px 0 16px 40px; border-left: 1px solid rgba(255, 255, 255, .25); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat strong { display: block; font-size: 60px; line-height: 1; margin-bottom: 18px; }
.stat span { display: block; font-size: 22px; line-height: 1.3; }
.stat-arrow { width: .72em; height: .72em; margin-right: .14em; vertical-align: -.02em; }
@media (max-width: 767px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .stat, .stat:first-child { padding: 0; border-left: 0; }
  .stat strong { font-size: 44px; margin-bottom: 8px; }
  .stat span { font-size: 17px; }
}

/* row of graphics with a title + description under each ("features:" block) */
.features { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 22px; }
.feature img { width: 100%; margin-bottom: 24px; }
.feature strong { display: block; font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.feature p { --fs: 18; --lh: 30px; margin: 0; }
@media (max-width: 767px) {
  .features { grid-template-columns: 1fr; gap: 20px; }
  .feature { display: grid; grid-template-columns: 40% 1fr; gap: 16px; align-items: center; }
  .feature img { margin-bottom: 0; }
  .feature strong { font-size: 18px; margin-bottom: 4px; }
  .feature p { --fs: 16; --lh: 24px; }
}

/* client logo tiles ("logos:" block) */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.logos img { width: 100%; }
@media (max-width: 767px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }

/* project thumbnails (an image with a "card:" caption under it) get rounded corners */
.image:has(+ .card) img { border-radius: 8px; }

/* caption under a project thumbnail ("card:" lines) */
.card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding: 10px 24px 6px 23px;
  color: #222; text-decoration: none;
}
.card:hover { opacity: 1; }
.card strong { display: block; font-size: 22px; line-height: 1.3; letter-spacing: -.2px; }
.card-sub { display: block; font-size: 15px; line-height: 1.5; color: #333; }
.card img { flex: 0 0 auto; transition: transform .2s ease; }
.card:hover img { transform: translateX(4px); }
/* smaller cards in narrow columns ("card: ... {small}") */
.card.small { align-items: flex-start; min-height: 0; padding: 20px 16px 16px; }
.card.small strong { font-size: 18px; line-height: 23px; }
.card.small .card-sub { font-size: 16px; line-height: 1.6; margin-top: 4px; }
.card.small img { width: 31px; height: 31px; }
hr { border: 0; border-top: 1px solid; margin: calc(var(--mt, 0) * 1px) 0 calc(var(--mb, 0) * 1px); }
.space { height: calc(var(--h) * 1px); }

.gallery { position: relative; }
.gallery .slides { display: flex; align-items: flex-start; transition: height .3s ease; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery .slides::-webkit-scrollbar { display: none; }
.gallery .slides img { flex: 0 0 100%; width: 100%; scroll-snap-align: center; }
.gallery button {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff;
}
.gallery button:hover { background: rgba(0,0,0,.7); }
.gallery button svg { display: block; }
.gallery .prev { left: 12px; }
.gallery .next { right: 12px; }

/* ---------- "More selected projects" panel (opened by the grid button) ---------- */
.more { background: var(--panel); padding: 48px 0 64px; }
.more h3 { grid-column: 1 / -1; margin: 0 0 24px; font-family: var(--light-font); font-weight: var(--light-weight); font-size: 28px; color: #000; }
.more ul { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 30px; }
.more a { display: block; text-decoration: none; color: #000; line-height: 1.3; }
.more strong { display: block; font-size: 17px; }
.more span { display: block; font-size: 14px; color: #777; }

/* ---------- smaller screens ---------- */
@media (max-width: 1230px) {
  .grid { margin: 0 30px; }
}
@media (max-width: 767px) {
  .topbar { padding: 0 10px 0 20px; }
  /* columns stack; empty spacer columns disappear */
  .grid, .section.wide .grid { margin: 0 20px; display: block; }
  .col + .col { margin-top: var(--gap, 32px); }
  .col.empty { display: none; }
  .section.nogap .col + .col { margin-top: 0; }
  /* vertical spacing is halved */
  /* pages can cap this with "mobile-max-space: 60" */
  .section {
    padding-top: min(calc(var(--pt, 0) * .5px), var(--mmax, 9999px));
    padding-bottom: min(calc(var(--pb, 0) * .5px), var(--mmax, 9999px));
  }
  .space { height: calc(var(--hm, calc(var(--h) * .5)) * 1px); }
  hr { margin: calc(var(--mt, 0) * .5px) 0 calc(var(--mb, 0) * .5px); }
  /* a divider in its own column uses only its own margins, so the space is even above and below */
  .col:has(> hr:only-child) { margin-top: 0; }
  /* text up to 18px keeps its size; anything bigger grows half as fast */
  p, ol {
    font-size: calc(min(var(--fs, 18), 18) * 1px + max(var(--fs, 18) - 18, 0) * .5px);
    /* never looser than desktop, but never so tight that wrapped lines overlap */
    line-height: max(min(var(--lh, 100px), calc(1em + 10px)), 1.1em);
  }
  .col > p + p, .col > p + ol, .col > ol + p { margin-top: 20px; }
  /* images not set to "full" scale with their column: a 3-column logo gets half the
     screen, 6+ columns get the whole width, and nothing grows past its desktop size */
  .image.m-left { justify-content: flex-start; }
  .image.m-center { justify-content: center; }
  .image.m-right { justify-content: flex-end; }
  .image.m-hide, .col:has(> .m-hide:only-child) { display: none; }
  .card, .card.small { padding-left: 0; padding-right: 0; }
  .image:not(.full) img { max-width: var(--mw, min(100%, calc(var(--span, 12) / 6 * 100%), calc(var(--span, 12) / 12 * 1170px))); }

  /* top nav row ("nav" sections): wordmark left, links right, on one line */
  .section.nav { padding-top: 16px; padding-bottom: 16px; }
  .section.nav .grid { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .section.nav .col + .col { margin-top: 0; }
  .section.nav .col:first-child { flex: 0 0 auto; }
  .section.nav .image img { width: 120px; max-width: none; }
  .section.nav p { font-size: 13px; line-height: 1.3; text-align: right; }
  .section.nav p a { white-space: nowrap; }
}