/* Services, portfolio, CV, blog and news pages (src/pages/services.php, service.php, portfolio.php,
   portfolio-item.php, cv.php, listing.php, entry.php, planned.php), loaded only there so the shared sheets keep their budgets. Mobile first; tokens from styles.css. */

/* Tiles: one per service or portfolio item, each a link to its own page. */
.nm-tiles { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 28px; }
.nm-tile-link {
  display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; color: var(--ink); text-decoration: none;
  background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r);
  box-shadow: var(--off) var(--off) 0 var(--shadow);
}
.nm-tile-link h2, .nm-tile-link h3 { margin: 0; font: 800 22px/1.2 var(--display); }
.nm-tile-link p { margin: 0; color: var(--ink-2); }
.nm-tile-link .meta { display: block; font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--red-ink); }
.nm-tile-more { font-weight: 700; justify-self: end; }
.nm-tile-link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .nm-tile-link { transition: transform .15s, box-shadow .15s; }
  .nm-tile-link:hover { transform: translate(-2px, -2px); box-shadow: calc(var(--off) + 2px) calc(var(--off) + 2px) 0 var(--shadow); }
}
.nm-portfolio-type h2 { font: 800 28px/1.15 var(--display); margin: 8px 0 20px; }

/* The picture band: a photo, or a drawn icon in a ringed badge on a dotted, tinted ground. */
.nm-tile-body { display: grid; gap: 10px; align-content: start; padding: 24px 28px 26px; }
.nm-tile-art { display: grid; place-items: center; height: 240px; border-bottom: var(--b) solid var(--line); overflow: hidden; }
/* The photo fills its band whatever its own size, so it never sets the tile's height; framed on her face. */
.nm-tile-photo { position: relative; }
.nm-tile-photo picture { position: absolute; inset: 0; }
.nm-tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nm-tile-icon {
  background: radial-gradient(color-mix(in srgb, var(--line) 18%, transparent) 1.2px, transparent 1.4px) 0 0 / 14px 14px, var(--paper-2);
}
.nm-tile-icon svg {
  box-sizing: content-box; padding: 16px; width: 56px; height: 56px; color: var(--ink); background: var(--card);
  border: var(--b) solid var(--line); border-radius: 50%; box-shadow: 4px 4px 0 var(--shadow);
}
.nm-tile-research, .nm-tile-training { background-color: color-mix(in srgb, var(--red) 22%, var(--paper-2)); }
.nm-tile-project, .nm-tile-workshop { background-color: color-mix(in srgb, var(--ok) 18%, var(--paper-2)); }
@media (prefers-reduced-motion: no-preference) {
  .nm-tile-icon svg, .nm-tile-photo img { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .nm-tile-link:hover .nm-tile-icon svg { transform: rotate(-6deg) scale(1.06); }
  .nm-tile-link:hover .nm-tile-photo img { transform: scale(1.04); }
}

/* The home and speaking cards: a drawn icon in a small ringed badge above the heading. */
.nm-card-icon {
  display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; color: var(--ink);
  background: var(--paper-2); border: var(--b) solid var(--line); border-radius: 50%; box-shadow: 3px 3px 0 var(--shadow);
}
.card.dark .nm-card-icon { background: var(--red); color: var(--on-red); }

/* An inner page: the text, then the facts (or the talk's card) beside it on wide screens. */
.nm-detail { display: grid; gap: 48px; padding-block: 8px 48px; }
.nm-detail .prose { max-width: 65ch; min-width: 0; }
.nm-facts {
  display: grid; gap: 12px; align-content: start; padding: 28px 30px;
  background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r);
  box-shadow: var(--off) var(--off) 0 var(--shadow);
}
.nm-facts h2 { margin: 6px 0 0; font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red-ink); }
.nm-facts .btn { justify-self: start; margin-top: 10px; }
.nm-checks { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.nm-detail-more, .nm-back { padding-block: 0 32px; }
/* The talk card and the kit share the full width, half each, so no column is left empty. */
.nm-detail-more .cards { align-items: stretch; }
.nm-siblings { padding-block: 8px 56px; }
.nm-siblings h2 { font: 800 22px/1.2 var(--display); margin: 0 0 12px; }
.nm-siblings ul { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; }

/* CV: a ledger of years, then what it leaves out and why. */
.nm-cv { padding-block: 32px 64px; }
.nm-cv .wrap { max-width: 860px; }
.nm-cv-head { display: grid; gap: 8px; padding-bottom: 24px; border-bottom: var(--b) solid var(--line); }
.nm-cv-head h1 { margin: 0; font: 900 clamp(34px, 7vw, 56px)/1 var(--display); letter-spacing: -.03em; }
.nm-cv-role { margin: 0; font-weight: 500; }
.nm-cv-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 15px/1.4 var(--mono); }
.nm-cv-group { padding-block: 24px 4px; }
.nm-cv-group h2 { margin: 0 0 14px; font: 600 13px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--red-ink); }
.nm-cv-profile { max-width: 65ch; margin: 0; }
.nm-cv-line { list-style: none; margin: 0; padding: 0; }
.nm-cv-line li { display: grid; gap: 4px; padding: 12px 0; border-top: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent); }
.nm-cv-line h3 { margin: 0; font: 800 18px/1.3 var(--display); }
.nm-cv-line p { margin: 0; }
.nm-cv-when { font: 600 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.nm-cv-privacy {
  margin-top: 32px; padding: 22px 24px; background: var(--paper-2);
  border: var(--b) solid var(--line); border-radius: var(--r);
}
.nm-cv-privacy h2 { margin: 0 0 8px; font: 800 20px/1.2 var(--display); }
.nm-cv-privacy p { margin: 0 0 12px; max-width: 65ch; }
.nm-cv-print { font-size: 14px; color: var(--ink-2); }

@media (min-width: 720px) {
  .nm-tiles { grid-template-columns: repeat(2, 1fr); }
  /* A tile alone in its section takes the row, picture beside the text, so no half-row is left empty. */
  .nm-tiles > li:only-child { grid-column: 1 / -1; }
  .nm-tiles > li:only-child .nm-tile-link { grid-template-columns: minmax(220px, 2fr) 3fr; grid-template-rows: none; }
  .nm-tiles > li:only-child .nm-tile-art { height: auto; min-height: 300px; border-bottom: 0; border-right: var(--b) solid var(--line); }
  .nm-cv-line li { grid-template-columns: 140px 1fr; gap: 20px; }
}
@media (min-width: 821px) { .nm-detail-more .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .nm-detail { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* Contact: beside the form, three panels in one card. */
.contact-aside {
  display: grid; background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r);
  box-shadow: var(--off) var(--off) 0 var(--shadow);
}
.contact-aside section { display: grid; gap: 12px; justify-items: start; padding: 24px 26px; }
.contact-aside section + section { border-top: 1.5px dashed color-mix(in srgb, var(--line) 35%, transparent); }
.contact-aside h2 { margin: 0; font: 800 20px/1.2 var(--display); }
.contact-aside p { margin: 0; color: var(--ink-2); }
.contact-aside p a { font-weight: 700; }
.nm-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.nm-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 12px; color: var(--ink-2); }
.nm-steps li::before {
  content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font: 700 14px/1 var(--mono); background: var(--red); color: var(--on-red); border: var(--b) solid var(--line);
}
.nm-steps strong { color: var(--ink); }
.nm-elsewhere { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; width: 100%; }
.nm-elsewhere a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--ink); font-weight: 700; text-decoration: none;
  border: var(--b) solid var(--line); border-radius: var(--r); background: var(--paper);
}
.nm-elsewhere a:hover { background: var(--paper-2); }
.nm-elsewhere-mark { width: 22px; text-align: center; font-weight: 800; }
@media (min-width: 821px) { .contact-aside { position: sticky; top: 96px; } }

/* Blog and news: the posts still to come, each a link to its own page (src/pages/planned.php). */
.soon-title { margin: 48px 0 12px; font: 800 24px/1.2 var(--display); }
.soon li a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; color: var(--ink); text-decoration: none; }
.soon li a small { font: 600 13px/1.6 var(--mono); color: var(--ink-2); white-space: nowrap; }
.soon li a small::after { content: " →"; }
.soon li a:hover span { text-decoration: underline 2px var(--red); text-underline-offset: 4px; }
.soon li a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; }
.nm-planned-when { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; font: 600 14px/1.4 var(--mono); color: var(--ink-2); }
.nm-pill {
  padding: 4px 10px; font: 700 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--red); color: var(--on-red); border: var(--b) solid var(--line); border-radius: 999px;
}
.nm-planned .lede { font-size: 20px; max-width: 40em; }
.nm-planned-box {
  margin: 32px 0 56px; padding: 26px 28px; display: grid; gap: 18px;
  background: var(--card); border: var(--b) solid var(--line); border-radius: var(--r); box-shadow: var(--off) var(--off) 0 var(--shadow);
}
.nm-planned-box p { margin: 0; max-width: 60ch; }
.nm-planned-box .actions { margin: 0; gap: 12px; }
.empty:has(+ .soon) { padding-bottom: 0; }
.soon + p { padding-bottom: 40px; }

/* Paper: the CV alone, ink on white, with link addresses written out. */
@media print {
  .site-header, .site-footer, .nm-actionbar, .skip, .nm-cv-request, .nm-cv-print, .nm-cv-privacy .btn { display: none !important; }
  body, .nm-cv, .nm-cv-privacy { background: #fff !important; color: #000 !important; }
  .nm-cv { padding: 0; }
  .nm-cv-line li { grid-template-columns: 110px 1fr; break-inside: avoid; }
  .nm-cv-contact a::after { content: ""; }
  a { color: #000; text-decoration: none; }
}
.contact-grid .contact-form { max-width: none; }