/* The professional page, /work/ (docs/architecture.md 3.1, Linkedinese). Builds on site.css and keeps to its paper, its
   ink and its two faces: Bricolage Grotesque for headings and labels, Newsreader for the words. Quiet on purpose: no
   orbs, no pixel face, no images, no motion, no colour but the blue of a link under the pointer. */

.work-main { padding: clamp(24px, 5vw, 64px) 0 clamp(72px, 9vw, 128px); }

/* the page heading is the title, "Mike Wai | ...": the name and the line after it, the bar between muted */
.work-title {
  max-width: 17em;
  margin: 0 0 clamp(40px, 6vw, 80px);
  font: 700 clamp(34px, 5.4vw, 76px)/1.04 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.work-bar { color: var(--ink-3); }

/* a section: its name small in the left column, its content beside it; stacked on a narrow screen */

.work-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 28px 0 clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--rule);
}

.work-section h2 {
  margin: 0;
  padding-top: 4px;
  font: 600 13px/1.3 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (min-width: 1000px) {
  .work-section {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0 48px;
  }

  /* a section whose name is read aloud only (Contact) has nothing in the left column */
  .work-section > .work-body { grid-column: 2; }
}

.work-section:last-child { padding-bottom: 0; }

.work-prose {
  max-width: 34em;
  margin: 0;
  font-size: 20px;
  line-height: 1.55;
}

.work-prose a {
  text-underline-offset: .18em;
  transition: color .2s ease;
}

/* capabilities: a plain list, ruled like the card's rows */

.work-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 32px;
  max-width: 52em;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 18px/1.3 var(--display);
}

.work-list li {
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--rule);
}

.work-list li:first-child { border-top: 1px solid var(--rule); }

@media (min-width: 640px) {
  .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .work-list li:nth-child(2) { border-top: 1px solid var(--rule); }
}

@media (min-width: 1200px) {
  .work-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .work-list li:nth-child(3) { border-top: 1px solid var(--rule); }
}

/* project cards */

.work-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1200px) {
  .work-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.work-cards > li { display: flex; }

.work-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 28px 28px 30px;
  border-radius: 18px;
  background: var(--paper-2);
}

.work-card h3 {
  margin: 0 0 22px;
  font: 650 clamp(22px, 2.2vw, 26px)/1.15 var(--display);
  letter-spacing: -.025em;
}

.work-facts {
  align-self: stretch;
  margin: 0;
  border-top: 1px solid var(--rule);
}

.work-facts > div {
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--rule);
}

.work-facts dt {
  font: 600 12px/1.3 var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.work-facts dd {
  margin: 6px 0 0;
  font-size: 17px;
  line-height: 1.45;
}

/* the words are written as the end of a line ("His part: sets the direction"), so each starts in lower case; set
   in rows under their labels, the first letter is drawn as a capital and the words themselves stay as written */
.work-facts dd::first-letter { text-transform: uppercase; }

/* the link at the foot of a card; site.css sets the pill, here it also answers the pointer */
.work-card .go {
  margin-top: 26px;
  text-decoration: none;
  transition: background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .work-card .go:hover { background: var(--blue); }

  .work-card .go:hover svg { transform: translateX(4px); }

  .work-prose a:hover { color: var(--blue); }
}

@media (prefers-reduced-motion: reduce) {
  .work-card .go,
  .work-card .go svg,
  .work-prose a { transition: none; }
}

@media (max-width: 520px) {
  .work-prose { font-size: 19px; }

  .work-card { padding: 22px 22px 24px; }
}