/*  WORK AND WRITINGS — the overview pages
 *  ------------------------------------------------------------------
 *  Loaded after case.css, which brings the top bar, the title block and
 *  the blue band.
 *
 *  Work is a list, one case per row between 2px blue rules, in the
 *  1080px column (Ernest, 2026-10-12: not the homepage bento again).
 *  The client's mark leads each row, big, in blue: the cream logo from
 *  the client strip, used as a mask so it takes the blue.
 *
 *    ────────────────────────────────────────
 *     ▣▣▣   Client • Context
 *     ▣▣▣   Case title
 *           Summary
 *    ────────────────────────────────────────
 */

.listing { padding-bottom: round(clamp(72px, 8vw, 120px), 8px); }

/* The list is as wide as one row (logo, gap, the 720px text), centred on the
   page, so the rows sit in the middle with their logos lined up
   (Ernest, 2026-10-13). */
.cases {
  width: min(880px, 100vw - 2 * var(--gutter));
  margin: 72px auto 0;
  list-style: none;
}

/* A short solid rust line between the rows, a quarter of the list's width
   and centred; none above the first or under the last (Ernest, 2026-10-13). */
.cases > li + li::before {
  content: "";
  display: block;
  width: 25%;
  min-width: 120px;
  height: 2px;
  margin: 0 auto;
  background: var(--rust);
}

.case-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 40px 0;
  text-decoration: none;
}

/* Hover, as on the homepage tiles: no fading, the title gets a heavy rust
   underline, like a marked headline. */
.case-row:hover { opacity: 1; }
.case-row:hover .case-row__title,
.writing:hover .writing__title {
  text-decoration: underline 4px var(--rust);
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
}

.case-row__logo {
  width: 112px;
  aspect-ratio: 1;
  background: var(--blue);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

.case-row__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 720px;
}

.case-row__meta {
  font: var(--heading-xs);
  color: var(--muted);
}

.case-row__title {
  font: var(--heading-m);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.case-row__summary {
  font: var(--body-s);
  text-wrap: pretty;
}

/*  WRITINGS — one article per row, title then summary, between blue rules.
 *  The 1080px column of the factsheet, so the list lines up with the cases'
 *  wide figures. */

.writings {
  width: var(--wide);
  margin: 72px auto 0;
  list-style: none;
  border-top: 2px solid var(--blue);
}

.writings > li { border-bottom: 2px solid var(--blue); }

.writing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 8px 48px;
  padding: 32px 0;
  text-decoration: none;
}

.writing:hover { opacity: 1; }

.writing__title {
  font: var(--heading-m);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.writing__summary {
  font: var(--body-s);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .writing { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .cases { width: auto; margin: 40px var(--gutter) 0; }
  .case-row { grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 32px 0; }
  .case-row__logo { width: 56px; }
  .writings { width: auto; margin: 40px var(--gutter) 0; }
  .writing { padding: 24px 0; gap: 8px; }
}


/* ── Behind the scenes ───────────────────────────────────────────────────
 *  Things Ernest makes himself (_includes/side-projects.html). One project
 *  per row in the 1080px column: a screenshot of the site, framed like the
 *  work cards (2px blue, 2px corners), and the text beside it. The rows
 *  are split by the Work list's short rust line. The whole row links out;
 *  hover underlines the title, as on Work. On phones the picture goes on top.
 *
 *    ┌──────────────┐   Name • Kind • Status
 *    │  screenshot  │   Title
 *    │              │   Text…
 *    └──────────────┘   domain.com ↗
 */

.side-projects {
  width: var(--wide);
  margin: 72px auto 0;
  list-style: none;
}

.side-projects > li + li::before {
  content: "";
  display: block;
  width: 25%;
  min-width: 120px;
  height: 2px;
  margin: 0 auto;
  background: var(--rust);
}

.side-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  text-decoration: none;
}

.side-row:hover { opacity: 1; }
.side-row:hover .side-row__title {
  text-decoration: underline 4px var(--rust);
  text-underline-offset: .14em;
  text-decoration-skip-ink: none;
}

.side-row__shot {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--blue);
  border-radius: 2px;
}

.side-row__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-row__meta {
  font: var(--heading-xs);
  color: var(--muted);
}

.side-row__title {
  font: var(--heading-m);
  letter-spacing: var(--tracking-head);
  text-wrap: balance;
}

.side-row__summary {
  font: var(--body-s);
  text-wrap: pretty;
}

/* What Ernest made himself: its own paragraph, so it reads as the work and
   not as more product description. */
.side-row__built { margin-top: 8px; }

.side-row__link {
  margin-top: 8px;
  font: var(--heading-xs);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .side-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 700px) {
  .side-projects { width: auto; margin: 40px var(--gutter) 0; }
  .side-row { padding: 32px 0; }
}


/* ── Contact ─────────────────────────────────────────────────────────────
 *  The portrait stands on the blue band, which cuts it 15% up from the
 *  bottom of the picture, as under the homepage hero; the text sits beside
 *  it on the right (Ernest, 2026-10-13). On a phone the text comes first and
 *  the portrait closes the page, still standing on the band.
 *
 *     ┌──────────┐
 *     │  ◉   ◉   │   Contact
 *     │    ‿     │   A short intro…
 *     │ ╭──────╮ │   hi@ernestmistiaen.com
 *     ═════════════  LinkedIn ══════════════  band
 */

.contact {
  width: var(--wide);
  margin: 0 auto;
  padding-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  column-gap: round(clamp(40px, 6vw, 96px), 8px);
  align-items: center;
}

/* Taller than wide pictures crop from the bottom: the frame is the
   picture's width by 85% of its height. */
.contact__photo {
  align-self: end;
  aspect-ratio: 1280 / 1044.65;
  overflow: hidden;
}

.contact__portrait {
  display: block;
  width: 100%;
  height: auto;
}

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 48px;
}

.contact__title {
  font: var(--heading-xxl);
  letter-spacing: var(--tracking-head);
}

.contact__intro {
  max-width: 25em;
  font: var(--body-l);
  text-wrap: pretty;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  list-style: none;
  font: var(--heading-m);
  letter-spacing: var(--tracking-head);
}

.contact__links a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .contact {
    width: auto;
    margin: 0 var(--gutter);
    padding-top: 32px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .contact__text { order: -1; padding-bottom: 0; }
  .contact__photo { width: min(420px, 100%); justify-self: center; }
}