/*
  Diamond Edge's pages (everything outside rimbalo/, which has its own stylesheet). The accent is the Diamond Edge
  slate blue that the Rimbalo and Diamond Tabletop icons sit on. IBM Plex Sans for prose, IBM Plex Mono for numbers
  and code, both served from fonts/: the CSP in render.yaml allows nothing from another site, and no inline styles.
*/
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex_sans_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/plex_sans_semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex_mono_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --ink: #12161C;
  --slate: #566170;
  --accent: #2F5585;
  --brand: #406797;
  --rule: #DCE1E8;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101418;
    --surface: #181D23;
    --ink: #E9EDF2;
    --slate: #9AA4B2;
    --accent: #8DB3E2;
    --brand: #5F86B8;
    --rule: #2A313A;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); }
.page { max-width: 60rem; margin: 0 auto; padding: 0 16px 64px; }
.page.narrow { max-width: 46rem; }

a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); margin: 56px 0 16px; max-width: 22ch; }
.narrow h1 { max-width: none; }
h2 { font-size: 1.6rem; margin: 64px 0 8px; }
h3 { font-size: 1.15rem; margin: 0 0 6px; }
p, li { max-width: 42rem; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--slate); max-width: 40rem; }
.meta { color: var(--slate); font-size: 0.92rem; }
.section-intro { color: var(--slate); margin: 0 0 24px; }
code, pre, .num { font-family: var(--mono); }
code { font-size: 0.88em; }

/* Header: the logo on a white tile, since its lettering is black. */
header.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.brand img { width: 56px; height: auto; background: #FFFFFF; border-radius: 8px; padding: 4px; }
nav.site { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.95rem; }
nav.site a { color: var(--slate); text-decoration: none; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.tag {
  display: inline-block; font: 400 0.78rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 10px;
}

/* Headline numbers. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; }
.stats li { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 16px; }
.stats .num { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--ink); }
.stats .what { display: block; color: var(--slate); font-size: 0.9rem; margin-top: 4px; }

/* Cards. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.card p { margin: 0; }
.card .icon { width: 64px; height: 64px; border-radius: 14px; }
.card .stack { font: 400 0.82rem/1.5 var(--mono); color: var(--slate); }
.card .links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 8px; font-size: 0.95rem; }
.card figure { margin: 4px 0; }

/* Wide rows for the on-device AI work. */
.rows { display: grid; gap: 16px; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 32px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 24px;
}
.row p { margin: 0 0 10px; }
.row ul { margin: 0; padding-left: 20px; }
.row li { margin: 0 0 6px; }
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }

/* Screenshots: on a white tile in both themes, because they were taken on white. */
.shot { display: block; width: 100%; height: auto; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 8px; }
figure { margin: 24px 0; }
figcaption { color: var(--slate); font-size: 0.88rem; margin-top: 6px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Founder. */
.founder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-left: 2px solid var(--rule); padding: 0 0 18px 16px; position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 2px;
  background: var(--brand); transform: rotate(45deg);
}
.timeline .when { display: block; font: 400 0.82rem/1.5 var(--mono); color: var(--slate); }
.timeline strong { font-weight: 600; }
.skills { margin: 0; }
.skills dt { font-weight: 600; margin-top: 12px; }
.skills dd { margin: 2px 0 0; color: var(--slate); }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.button {
  display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--accent); color: var(--accent);
}
.button.primary { background: var(--accent); color: var(--bg); }
.button:hover { filter: brightness(1.1); }

/* Case-study pages. */
.callout { border-left: 3px solid var(--brand); background: var(--surface); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 24px 0; }
.callout p { margin: 0; }
.pipeline { list-style: none; padding: 0; margin: 20px 0; counter-reset: step; }
.pipeline li { counter-increment: step; padding: 10px 0 10px 44px; position: relative; border-bottom: 1px solid var(--rule); }
.pipeline li::before {
  content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 6px;
  background: var(--brand); color: #FFFFFF; font: 400 0.85rem/28px var(--mono); text-align: center;
}
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 0.92rem; }
th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; white-space: nowrap; }
td.num, th.num { font-family: var(--mono); text-align: right; white-space: nowrap; }
tr.chosen td { background: var(--surface); font-weight: 600; }
pre { background: var(--surface); border: 1px solid var(--rule); padding: 12px 16px; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; }

footer.site {
  margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--slate); font-size: 0.9rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
footer.site a { color: var(--slate); }
.founder h3 { margin-top: 28px; }
.card .shot { aspect-ratio: 2 / 1; object-fit: cover; object-position: top; }