/* Full pages: the kostic.design look (Google Sites theme, measured 19-20 Oct 2026).
   Helvetica Neue throughout. Mobile first: the base rules are for a phone, wider
   screens add to them. The header lives in nav.css. */

:root {
  --ink: #1c1c1c;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --soft: #f5f5f3;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-header-h) + 16px); scroll-padding-bottom: calc(var(--mini-footer-h, 48px) + 16px); }
html.title-bar-shown { scroll-padding-top: calc(var(--site-header-h) + 68px); }   /* the title bar is 52 px */
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 300 17px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 815px; margin: 0 auto; padding: 0 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.wrap.wide { max-width: 1040px; }

/* ---------- banner ---------- */
.banner { padding: 32px 0 20px; }
/* Title row: the circle icon, the section crumb and the title. On phones the icon
   sits above the title; from 960 px it sits left of it. Either way the icon's left
   edge lines up with the body text below (Mickey, 20 Oct 2026: the case-study template). */
.title-row { display: flex; flex-direction: column; align-items: flex-start; }
.page-icon { display: block; width: 56px; height: 56px; margin-bottom: 14px; flex: none; }
.crumb { margin: 0 0 6px; font-size: 15px; }
.crumb a { color: var(--muted); text-decoration: none; display: inline-block; min-width: 44px; padding: 11px 0; margin: -11px 0 -7px; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.banner h1 { margin: 0; font: 700 36px/1.15 var(--font); letter-spacing: -0.01em; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.subtitle { margin: 6px 0 0; font-size: 20px; line-height: 1.38; }

/* ---------- article ---------- */
.body p { margin: 8px 0 20px; }
.body h1, .body h2, .body h3, .body h4 { line-height: 1.2; margin: 32px 0 10px; }
.body h1 { font-size: 26px; font-weight: 700; }
.body h2 { font-size: 22px; font-weight: 700; }
.body h3 { font-size: 21px; font-weight: 300; }
.body h4 { font-size: 18px; font-weight: 700; }
.body > :first-child { margin-top: 0; }
.body img { display: block; margin: 12px 0; cursor: zoom-in; }
.body ul, .body ol { margin: 8px 0 20px; padding-left: 22px; }
.body li { margin-bottom: 8px; }
.body a { text-underline-offset: 3px; }
.body strong { font-weight: 700; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 12px 0 24px; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin: 0 0 56px; padding: 0; list-style: none; }
.card { display: block; text-decoration: none; }
/* Link block: picture with the title in white on a dark gradient, then one sentence, year and type. */
.card-media { position: relative; display: block; overflow: hidden; aspect-ratio: 297 / 156; background: var(--soft); }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.card:hover .card-media img { transform: scale(1.03); }
.card-icon-wrap { position: absolute; inset: 0 0 40% 0; display: flex; align-items: center; justify-content: center; }   /* clear of a two-line title */
.card-icon { display: block; height: 62%; width: auto; aspect-ratio: 1; transition: transform .2s; }
.card:hover .card-icon { transform: scale(1.05); }
/* Cards without a picture: the icon sits centred in the space above the title, however many
   lines the title takes, at 37% of the card's height on every card (his note, 21 Oct 2026:
   "this icon is moved upwards"; a fixed top 60% left twice the gap below it as above it). */
.card-media.has-icon { display: flex; flex-direction: column; container-type: size; }
.card-media.has-icon .card-icon-wrap { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.card-media.has-icon .card-icon { height: 37cqh; max-height: calc(100% - 16px); }
.card-media.has-icon .card-title { position: relative; left: auto; right: auto; bottom: auto; margin: 0 14px 10px; }
@media (min-width: 600px) { .card-media.has-icon .card-title { margin: 0 16px 12px; } }
.card-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0)); pointer-events: none; }
.card-title { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 1; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.15; text-shadow: var(--on-photo-shadow); }
/* The one-liner at caption size (his note, 20 Oct 2026: "these texts underneath the image should be
   50% smaller"; half would be 9.3 px, below the site's 12 px captions, so 12 px, in the regular
   weight so the light face stays legible). */
.card-text { display: block; margin-top: 10px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--ink); }
.card-meta { display: block; margin-top: 6px; font-size: 13px; line-height: 1.3; color: var(--muted); }
.card:hover .card-text { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer: the kostic.design footer ---------- */
.site-footer { display: block; padding: 0 0 32px; font: 300 14.67px/1.4 var(--font); color: var(--ink); }
.footer-inner { padding: 0 20px; }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: 36px; margin: 32px 0 0; padding: 0; }
.footer-col h2 { margin: 0 0 8px; font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.footer-col h2 a { display: inline-block; padding: 10px 0; margin: -10px 0; text-decoration: none; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li a { display: inline-block; min-width: 44px; padding: 11px 0; font-size: 16.5px; line-height: 22px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pages moved from kostic.design ---------- */
.kd-banner.has-bg { display: flex; align-items: center; min-height: 300px; background-color: #e9e9e7; }
.kd-banner.has-bg { position: relative; }
.kd-banner.has-bg::before { content: ""; position: absolute; inset: 0; }
.kd-banner .wrap { position: relative; width: 100%; }
.kd-banner.on-dark { color: #f9f9f9; }
/* White type on a picture keeps a small shadow, so it reads where the picture is white too
   (his note, 20 Oct 2026). The same shadow on card titles and the map panel's header. */
:root { --on-photo-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.45); }
.kd-banner.on-dark.has-bg { text-shadow: var(--on-photo-shadow); }
.kd-banner.on-dark .crumb a { color: rgba(255, 255, 255, 0.82); }
.kd-desc p { max-width: 640px; margin: 12px 0 0; font-size: 15px; line-height: 1.4; }
.intro { margin-bottom: 32px; }
/* Clients on his list with no page of their own, under the Clients cards (21 Oct 2026). */
.outro { margin-top: 48px; }
.outro h2 { margin-bottom: 4px; }
/* One text column on every page (his note, 20 Oct 2026: "align all pages"): 20 px margins on
   phones; a centred 767 px column from 600 px; from 900 px, two thirds of the width up to 767 px,
   which is columns 3 to 10 of the moved pages' 12-column grid (1210.5 px wide at most, so that
   column is exactly 767 px) and the same as .wrap below. */
.kd-body { max-width: 1210.5px; margin: 0 auto; padding: 0 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.kd-section { padding: 20px 0; }   /* more white space between segments (his note, 20 Oct 2026) */
.kd-row + .kd-row, .kd-row > .kd-cell + .kd-cell { margin-top: 12px; }
.kd-cell > * + * { margin-top: 12px; }
.kd-text > :first-child { margin-top: 0; }
.kd-text h2 { margin: 28px 0 8px; font-size: 26px; font-weight: 700; line-height: 1.2; }
.kd-text h3 { margin: 24px 0 6px; font-size: 21px; font-weight: 300; line-height: 1.3; }
.kd-text h4 { margin: 20px 0 6px; font-size: 18px; font-weight: 700; }
.kd-text p { margin: 0 0 14px; }
.kd-text p:last-child, .kd-text ul:last-child, .kd-text ol:last-child { margin-bottom: 0; }
.kd-text p.small { font-size: 14.67px; }
.kd-text p.cap { font-size: 12px; line-height: 1.4; color: #757575; }
.kd-text ul, .kd-text ol { margin: 0 0 14px; padding-left: 22px; }
.kd-text li { margin-bottom: 6px; }
.kd-text a { text-underline-offset: 3px; }
.kd-text strong { font-weight: 700; }
.al-center { text-align: center; }
.al-right { text-align: right; }
.kd-img { display: block; }
.kd-img img, .kd-img video { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }   /* never wider than the file (review of 21 Oct 2026) */
.gen-figure img, .gen-figure video.gif-video { width: auto; max-width: 100%; margin: 0 auto; }
.gallery .gen-figure img { width: 100%; }
.kd-img.zoom img { cursor: zoom-in; }
.kd-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.kd-video.square { aspect-ratio: 1; }
.kd-video.tall { aspect-ratio: 9 / 16; max-width: 420px; margin-left: auto; margin-right: auto; }
.kd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kd-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid #1c1c1c; border-radius: 4px; background: #1c1c1c; color: #f9f9f9; font: 300 18.67px/1.2 var(--font); text-align: center; text-decoration: none; }
.kd-btn:hover { background: #000; }
.more { margin-top: 24px; }
.more-title { margin: 32px 0 20px; font-size: 24px; font-weight: 700; line-height: 1.2; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 12, 0.95); }
html.lightbox-open { overflow: hidden; }
.lb-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 56px 16px 24px; max-width: 100%; box-sizing: border-box; }
.lightbox img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; background: #fff; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); }
.lb-caption { max-width: 640px; margin: 0; color: rgba(255, 255, 255, 0.86); font: 300 14px/1.4 var(--font); text-align: center; }
.lb-count { position: absolute; top: 18px; left: 20px; margin: 0; color: rgba(255, 255, 255, 0.7); font: 400 14px/1 var(--font); }
.lb-btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255, 255, 255, 0.24); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: 8px; right: 12px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
/* Phones: the arrows sit at the foot, out of the picture's way; a swipe does the same. */
@media (max-width: 599px) { .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; } .lightbox img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); } }
img[role="button"] { cursor: zoom-in; }
img[role="button"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Transitions: the lightbox fades in and its picture scales up; the full page's banner,
   title and icon take the names the map's panel uses, so the panel grows into them. */
@keyframes fade-in { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }
.lightbox { animation: fade-in .2s ease-out; }
.lightbox img { animation: zoom-in .26s cubic-bezier(.2, .7, .2, 1); }
.banner { view-transition-name: entry-panel; }
.banner h1 { view-transition-name: entry-title; }
.banner .page-icon { view-transition-name: entry-icon; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox img { animation: none; } }

/* ---------- generated pages: the case-study template without a photograph ---------- */
.kd-banner.gen-banner { background-color: #262626; }
.kd-banner.gen-banner:not(.has-photo) { background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 40px 40px; background-position: center; }
.kd-banner.gen-banner::before { display: none; }
.gen-banner .page-icon { border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }   /* a black circle stays visible on dark */
.gen-section { padding: 24px 0; }
.gen-body > .gen-section:first-child { padding-top: 36px; }
.gen-body .kd-text { padding: 0; }
.gen-body .kd-text img { display: block; margin: 12px 0; cursor: zoom-in; }
.gen-figure { margin: 0; }
.gen-figure img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.gen-figure figcaption { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: #757575; }
.gen-figure.native img { width: auto; max-width: 100%; margin: 0 auto; }   /* centred in the column (his note, 21 Oct 2026) */

/* ---------- 600 px and up ---------- */
@media (min-width: 600px) {
  body { font-size: 18.67px; line-height: 1.38; }
  .wrap { padding: 0 24px; }
  .banner { padding: 64px 0 36px; }
  .banner h1 { font-size: 57.33px; line-height: 1.2; }
  .subtitle { font-size: 24px; }
  .body h1 { font-size: 30.67px; }
  .body h2, .body h3 { font-size: 24px; }
  .crumb a { padding: 4px 0; margin: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 24px; }
  .card-title { left: 16px; right: 16px; bottom: 12px; font-size: 24px; }
  .card-meta { font-size: 14px; }
  .kd-banner.has-bg { min-height: 374px; }
  .kd-text h2 { font-size: 30.67px; }
  .kd-text h3 { font-size: 24px; }
  .kd-text p { margin-bottom: 18px; }
  .gen-section { padding: 40px 0; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 960 px and up: the icon left of the title, aligned with the body text ---------- */
@media (min-width: 960px) {
  /* The header's text column starts one icon and gap (88 px) right of the body text;
     the title row reaches back so the icon's left edge meets the body text's. */
  .banner .wrap { padding-left: 112px; }
  .title-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 24px;
    margin-left: -88px;
    align-items: start;
  }
  .title-row .crumb { grid-column: 2; grid-row: 1; }
  .title-row h1 { grid-column: 2; grid-row: 2; }
  .page-icon { grid-column: 1; grid-row: 2; width: 64px; height: 64px; margin: 2.4px 0 0; }   /* centred on the first line (68.8 px) */
}

/* ---------- 900 px and up: the moved pages keep kostic.design's 12-column grid ---------- */
@media (min-width: 900px) {
  .kd-body { padding: 0; }
  .kd-section { padding: 36px 0; }
  .kd-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .kd-row > .kd-cell + .kd-cell { margin-top: 0; }
  /* Every block in a cell (text, pictures, videos, cards, buttons) starts at x 337 on a 1440 px
     screen, the text column of every page (his note, 20 Oct 2026: "align all pages"). Google
     Sites inset only the text, by 8 px, so pictures stood 8 px proud of it on each side. */
  .kd-cell { padding: 0 20px; }
  .kd-text { padding: 0; }
  .kd-btn { min-height: 37px; }
}

/* ---------- 900 px and up: icons left, four columns right, as on kostic.design ---------- */
@media (min-width: 900px) {
  .site-footer { padding-bottom: 48px; }
  .footer-inner { padding: 0 24px; }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding: 0; }
  .footer-col h2 { font-size: 14.67px; margin-bottom: 2px; }
  .footer-col li a { min-width: 0; font-size: 14.67px; line-height: 1.4; padding: 4px 0; }
  .footer-col h2 a { padding: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- chips: tag, role and industry buttons, and the search filters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid #cfcfcf; border-radius: 999px; background: #fff; color: var(--ink);
  font: 300 15px/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover, .chip:focus-visible { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-count { color: #8a8a8a; font-size: 13px; }
.chip[aria-pressed="true"] .chip-count { color: rgba(255, 255, 255, 0.7); }

/* ---------- the search page ---------- */
.search-form { display: flex; gap: 12px; align-items: center; margin: 0 0 24px; }
.search-form input {
  flex: 1; min-width: 0; padding: 8px 2px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 300 22px/1.3 var(--font); outline: 0; -webkit-appearance: none; appearance: none;
}
.search-form .kd-btn { flex: none; }
.search-controls { display: grid; gap: 14px; margin: 0 0 18px; }
.search-selects { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.select { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.select select { min-height: 44px; padding: 0 12px; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; color: var(--ink); font: 300 16px var(--font); }   /* 16 px: iPhone Safari does not zoom */
.search-summary { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
#results li { animation: rise-in .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 600px) {
  .chip { min-height: 34px; padding: 0 14px; font-size: 14.67px; }
  .select select { min-height: 36px; }
  .search-form input { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { #results li { animation: none; } .chip { transition: none; } }


/* ---------- Details: one calm list (his ruling, 20 Oct 2026) ---------- */
.gen-facts { margin: 4px 0 0; border-top: 1px solid var(--line); }
.gen-facts > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.gen-facts dt { color: var(--muted); font-size: 14.67px; font-weight: 400; }
.gen-facts dd { margin: 0; }
.gen-facts dd a { text-underline-offset: 3px; text-decoration-color: #c4c4c4; overflow-wrap: anywhere; }
.gen-facts dd a:hover { text-decoration-color: currentColor; }
.gen-facts .fact-note { color: var(--muted); font-size: 14.67px; }
.gen-facts .chips { gap: 6px; }
.gen-facts ul.chips { margin: 0; padding: 0; }
.gen-facts .chip { min-height: 40px; padding: 0 12px; font-size: 14.67px; }
.fact-sources { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.fact-sources a { color: inherit; text-underline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 600px) {
  .gen-facts > div { grid-template-columns: 180px 1fr; gap: 24px; }
  .gen-facts dt { text-align: right; }
  .fact-sources { padding-left: 204px; }   /* under the values */   /* labels right-aligned against their values (his ruling, 20 Oct 2026) */
  .gen-facts dt.sr-only + dd { grid-column: 2; }
  .gen-facts .chip { min-height: 30px; }
}

/* ---------- the footer: a sticky strip that settles above the link columns ---------- */
.full-page .mini-footer { position: sticky; bottom: 0; left: auto; right: auto; border-top-color: #d9d9d9; }
/* The footer keeps to the case-study column (his ruling, 20 Oct 2026: "the same width as the
   case study above it, not stretched across the screen"): the line, the icons and copyright,
   and the link columns sit within the page's text column; the white strip still spans the
   screen so nothing shows beside it while it is pinned. --fpad is the space either side of
   that column: the 767 px .wrap on generated pages, the 12-column grid's columns 3 to 10 on
   pages moved from kostic.design (body.kd-case). */
@media (min-width: 600px) {
  .full-page { --fpad: max(24px, calc(50% - 383.5px)); }
  .full-page .mini-footer { border-top: 0; padding-left: var(--fpad); padding-right: var(--fpad); }
  .full-page .mini-footer::before { content: ""; position: absolute; top: 0; left: var(--fpad); right: var(--fpad); border-top: 1px solid #d9d9d9; }
  .full-page .mini-footer ul { margin-left: -6px; }
  .full-page .site-footer .footer-inner { max-width: none; margin: 0; padding: 0 var(--fpad); }
}
@media (min-width: 900px) {
  .full-page { --fpad: max(calc(100% / 6 + 20px), calc(50% - 383.5px)); }
}
.site-footer { padding-top: 28px; }

/* ---------- the title bar: the page title stays in view once it scrolls under the menu ---------- */
.sticky-title {
  position: fixed; top: var(--site-header-h); left: 0; right: 0; z-index: 38;
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s;
}
.sticky-title.show { transform: none; opacity: 1; pointer-events: auto; }
.sticky-title-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; }
.st-name { display: flex; align-items: center; gap: 12px; min-width: 0; font: 700 17px/1.2 var(--font); color: var(--ink); }
.st-name > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-icon { flex: none; width: 30px; height: 30px; }
.st-type { display: flex; flex: none; align-items: center; gap: 8px; color: var(--muted); font-size: 15px; }
.st-type-icon { width: 18px; height: 18px; }
@media (max-width: 420px) { .st-type > span { display: none; } }   /* phones: the type's icon alone */
@media (prefers-reduced-motion: reduce) { .sticky-title { transition: none; } }

/* ---------- related projects on a light grey band across the screen ---------- */
.related-band { margin-top: 56px; padding: 32px 0 16px; background: var(--soft); box-shadow: 0 0 0 100vmax var(--soft); clip-path: inset(0 -100vmax); }
.related-band .card-media { background-color: #fff; }
/* Room between the band's heading and its cards (his note, 20 Oct 2026: "add some spacing"). */
.related-band .kd-text h2 { margin-bottom: 24px; }
.related-band .kd-section:has(> .kd-row > .kd-cell > .kd-text) { padding-bottom: 0; }
.related-band .kd-section:has(> .kd-row > .kd-cell > .kd-text) + .kd-section { padding-top: 0; }

/* The years in the picture's top right corner (his note, 20 Oct 2026). */
.card-media .card-meta { position: absolute; top: 10px; right: 10px; z-index: 1; margin: 0; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.35; }
@media (min-width: 600px) { .card-media .card-meta { top: 12px; right: 12px; font-size: 13px; } }

/* The entry's logo in front of each card title. */
.card-title { display: flex; align-items: center; gap: 10px; }
.card-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }

/* The name with its type beneath, on the picture. */
.card-name { display: flex; flex-direction: column; min-width: 0; }
.card-type { margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.2; opacity: 0.88; }
@media (min-width: 600px) { .card-type { font-size: 15px; } }

/* A generated page with a picture from its own site: the blurred picture, darkened for the type. */
.kd-banner.gen-banner.has-photo::before { display: block; background: rgba(18, 18, 18, 0.6); }   /* 4.9:1 over white (review of 21 Oct 2026) */

/* ---------- parallax (page.js sets --pp and --py) ---------- */
.kd-banner.has-bg, .kd-banner.gen-banner.has-photo { background-position: center var(--pp, 50%); }
.card-media.photo img { transform: translateY(var(--py, 0px)) scale(1.1); transition: transform .3s; }
.card:hover .card-media.photo img { transform: translateY(var(--py, 0px)) scale(1.13); }
@media (prefers-reduced-motion: reduce) { .card-media.photo img { transform: none; } }

/* GIFs served as videos sit exactly where the picture sat. */
video.gif-video { display: block; width: 100%; height: auto; background: #f3f3f1; }

/* The shared column (see .kd-body): moved pages centre it below 900 px, every .wrap narrows to
   two thirds of the width from 900 px, as the grid's columns 3 to 10 do. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .kd-body { max-width: 815px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}
@media (min-width: 900px) {
  .wrap { max-width: min(815px, calc(200% / 3 + 8px)); }
  .wrap.wide { max-width: 1040px; }
}

/* Behance stories and galleries (ingestion of 21 Oct 2026): pictures in a story sit closer
   together than sections; a gallery is a grid of thumbnails that open full size. */
.gen-section.gen-fig { padding-top: 8px; padding-bottom: 8px; }
.gen-section.gen-story + .gen-section.gen-fig, .gen-section.gen-fig + .gen-section.gen-story { padding-top: 16px; }
/* Two balanced columns (three past twelve pictures on desktop): each picture keeps its whole shape and sits right under the
   one above, so a panorama beside a poster leaves no hole (review of 21 Oct 2026, "gallery
   grids leave white holes"; a grid row was as tall as its tallest picture). */
/* Two columns on phones too (his note, 21 Oct 2026: "use two gallery columns on phones too"). */
.gallery { margin-top: 8px; columns: 2; column-gap: 12px; }
.gallery > .gen-figure { margin: 0 0 12px; break-inside: avoid; }
.gallery .gen-figure img { width: 100%; height: auto; }
@media (min-width: 600px) { .gallery { column-gap: 20px; } .gallery > .gen-figure { margin-bottom: 20px; } }
/* Galleries of more than twelve pictures: three columns on desktop, so a long page gets shorter with
   every picture still shown (his choice, 21 Oct 2026; he turned down a "Show more" button). */
@media (min-width: 900px) { .gallery.many { columns: 3; column-gap: 16px; } .gallery.many > .gen-figure { margin-bottom: 16px; } }
/* No picture in a page's body is taller than the screen under the header (review of 21 Oct
   2026: 74 pictures on 21 pages were); the lightbox still opens it whole. */
@media (min-width: 600px) {
  .kd-img img:not(.long), .kd-img video:not(.long), .gen-figure img:not(.long), .gen-figure video:not(.long) {
    max-height: calc(100svh - 170px); width: auto; max-width: 100%; margin-left: auto; margin-right: auto;
  }
  .gallery .gen-figure img, .gallery .gen-figure video { max-height: none; width: 100%; }   /* thumbnails fill their column */
}

/* Header type stays readable on any picture (review of 21 Oct 2026): a dark veil under white
   type; under dark type on phones, a light one. A GIF header plays as a video under the veil. */
.kd-banner.has-bg.on-dark::before { background: rgba(18, 18, 18, 0.45); }
@media (max-width: 899.98px) { .kd-banner.has-bg:not(.on-dark)::before { background: rgba(255, 255, 255, 0.72); } }
.banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kd-banner.has-bg::before { z-index: 1; }
.kd-banner .wrap { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .banner-video { display: none; } }

/* Team: a card per person, avatar, name and role (21 Oct 2026). */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.team-card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 14px 10px 10px; border-radius: 12px; background: #f4f4f2; color: inherit; text-align: left; text-decoration: none; box-sizing: border-box; }
.team-face-link { flex: none; display: block; border-radius: 50%; }
.team-face-link:hover .team-face { box-shadow: 0 0 0 2px var(--ink, #1c1c1c); }
.team-name, .team-role { width: fit-content; max-width: 100%; }
a.team-name, a.team-role { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.2); text-underline-offset: 3px; }
a.team-role { color: var(--muted); }
a.team-name:hover, a.team-role:hover { text-decoration-color: currentColor; }
.team-face { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.team-default { background: #e3e3e1; color: #9a9a97; }
.team-glyph { width: 26px; height: 26px; }
.team-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-name { font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.team-role { color: var(--muted); font-size: 14px; line-height: 1.3; }
/* Only him on the project: avatar and name once, his roles as pills (21 Oct 2026). */
.team-solo { display: flex; align-items: flex-start; gap: 14px; margin-top: 12px; }
.team-solo .team-text { gap: 10px; padding-top: 2px; }
.role-chips { gap: 8px; }
.chip-static { cursor: default; }
.chip-static:hover { border-color: #cfcfcf; }

/* About: what his CV adds under the bio (22 Oct 2026). */
.about-skills { padding-left: 20px; }
.about-certs { list-style: none; padding: 0; display: grid; gap: 12px; }
.about-certs li { display: flex; align-items: center; gap: 14px; }
.about-certs img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.about-certs li:not(:has(img)) span { padding-left: 78px; }