/* davididavis.com — hand-rolled styles, no framework, no build step. */

:root {
  --accent: #2f7fc1;
  --accent-soft: #5598c5;
  /* The original WordPress highlight colour, kept for the profile block. */
  --brand: #5598c5;
  --brand-ink: #2a6389;
  --profile-ink: #5d5d5d;
  --profile-ink-2: #5d5d5d;
  --page-bg: #2b2f2e;
  --card: #ffffff;
  --card-2: #f6f8fa;
  --ink: #24292f;
  --ink-soft: #57606a;
  --ink-faint: #8b949e;
  --line: #e2e6ea;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
  --max: 1080px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #14181a;
    --card: #1b2023;
    --card-2: #22282c;
    --ink: #e6edf3;
    --ink-soft: #9fb0bd;
    --ink-faint: #6e7d89;
    --line: #2c343a;
    --accent: #5aa8e6;
    --accent-soft: #7cbdf0;
    --brand: #4a87b2;
    --brand-ink: #9fcbe8;
    --profile-ink: #d4dde4;
    --profile-ink-2: #a9b9c5;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  /* Column layout so the footer sits at the bottom of the window even when
     the open section is short (the Profile tab, typically). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- layout */

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 38px;
  margin: 0 0 26px;
}

@media (max-width: 640px) {
  .card { padding: 24px 20px; border-radius: 10px; }
}

.card > h2 {
  margin: 0 0 4px;
  font-size: 30px;
  letter-spacing: -.5px;
}

.rule {
  height: 3px;
  width: 56px;
  background: var(--accent);
  border-radius: 3px;
  margin: 0 0 24px;
}

/* ---------------------------------------------------------------- header */

.masthead {
  background: #fff url("../assets/banner.png") no-repeat center / cover;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.masthead .wrap { width: 100%; }

.masthead a.home-hit {
  position: absolute;
  inset: 0;
}

/* The title used to be baked into the banner image. Live text instead, so it
   is editable, sharp on any screen, and visible to search and screen readers.
   Colours sampled from the original artwork. */
.banner-lockup { display: inline-block; }

.banner-title {
  margin: 0;
  padding: 0 2px 5px;
  font-family: Georgia, "Times New Roman", "Times", serif;
  font-variant: small-caps;
  font-weight: 400;
  font-size: clamp(27px, 3.7vw, 54px);
  line-height: 1.04;
  letter-spacing: .015em;
  color: #161616;
  border-bottom: 2px solid #3a3a3a;
  white-space: nowrap;
}

.banner-title span { color: #35b0e9; }

.banner-sub {
  margin: 5px 2px 0;
  font-family: Georgia, "Times New Roman", "Times", serif;
  font-size: clamp(13px, 1.45vw, 21px);
  line-height: 1.2;
  color: #2b2b2b;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .masthead { height: 130px; }
  .banner-title { font-size: clamp(22px, 6.2vw, 34px); }
  .banner-sub { font-size: clamp(11px, 2.6vw, 15px); }
}

nav.main {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

nav.main .wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  overflow-x: auto;
  scrollbar-width: none;
}

nav.main .wrap::-webkit-scrollbar { display: none; }

nav.main .brand {
  font-weight: 700;
  margin-right: auto;
  color: var(--ink);
  white-space: nowrap;
}

nav.main a.nav-link {
  color: var(--ink-soft);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  white-space: nowrap;
}

nav.main a.nav-link:hover {
  background: var(--card-2);
  color: var(--ink);
  text-decoration: none;
}

nav.main a.nav-link.active { background: var(--accent); color: #fff; }

main { padding: 26px 0 60px; flex: 1 0 auto; }

/* --------------------------------------------------------------- profile
   Rebuilt to match the old WordPress "self" theme: portrait, then name over a
   blue rule, then a flat blue details panel bleeding to the card edges. */

.profile-card { padding: 0; overflow: hidden; }

.profile {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  align-items: stretch;
}

.profile .profile-photo {
  width: 220px;
  align-self: start;
  padding: 10px;
}

.profile-who { padding: 30px 40px 24px; }

.profile-who h1 {
  margin: 0;
  padding: 0;
  font-size: 50px;
  line-height: 52px;
  letter-spacing: -2px;
  font-weight: 400;
  color: var(--profile-ink);
}

.profile-who h2 {
  margin: 5px 0 0;
  padding: 0;
  font-size: 21px;
  line-height: 25px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--profile-ink-2);
}

/* The signature blue bar under the name. */
.profile-who .sep {
  display: block;
  height: 5px;
  width: 100%;
  margin: 20px 0;
  background: var(--brand);
}

.profile-who p {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--profile-ink-2);
}

.profile-details {
  background: var(--brand);
  color: #22323d;
  padding: 30px 30px 24px;
}

.profile-details h3 {
  margin: 0 0 25px;
  padding: 0;
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  color: #1d2b34;
}

.profile-details .detail { padding: 0 0 14px; }

.profile-details .title,
.profile-details .desc {
  display: block;
  font-size: 13px;
  line-height: 17px;
}

.profile-details .title { font-weight: 700; text-transform: uppercase; }
.profile-details .desc { opacity: .75; }
.profile-details .desc a { color: #0c1a22; font-weight: 700; opacity: 1; }
.profile-details .desc a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
  .profile { grid-template-columns: 180px minmax(0, 1fr); }
  .profile-details { grid-column: 1 / -1; }
  .profile-who { padding: 24px 28px 20px; }
  .profile-who h1 { font-size: 40px; line-height: 42px; letter-spacing: -1.5px; }
}

@media (max-width: 560px) {
  .profile { grid-template-columns: 1fr; }
  .profile .profile-photo { width: 170px; }
  .profile-who h1 { font-size: 34px; line-height: 36px; letter-spacing: -1px; }
}

/* ---------------------------------------------------------------- resume */

.resume-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 40px; }

@media (max-width: 860px) { .resume-grid { grid-template-columns: 1fr; gap: 26px; } }

.resume-grid h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-faint);
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.job { margin: 0 0 22px; }
.job .role { font-weight: 700; font-size: 17px; }
.job .meta { color: var(--ink-soft); font-size: 14.5px; }
.job .when {
  float: right;
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 12px;
}
.job p { margin: 6px 0; color: var(--ink-soft); font-size: 15px; }
.job ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.job li { margin-bottom: 4px; }

.skill { margin-bottom: 16px; }
.skill .name { font-weight: 600; font-size: 15px; }
.skill small { color: var(--ink-soft); display: block; font-size: 13.5px; line-height: 1.45; }
.bar { height: 6px; background: var(--card-2); border-radius: 4px; margin: 5px 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

.headline {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-ink);
}

/* Four headline numbers, side by side on a desktop, two-up on a phone. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 26px;
}
.stat { background: var(--card); padding: 14px 16px; }
.stat b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  color: var(--brand-ink);
}
.stat span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ai-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 30px;
}
.ai-title {
  font-size: 12.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 4px;
}
.ai-row p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }

@media (max-width: 860px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .ai-row { grid-template-columns: 1fr; gap: 16px; }
}

/* Application / systems experience: a two-column label-and-list table that
   collapses to stacked rows on a narrow screen. */
.tech-head {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-faint);
  margin: 34px 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.tech-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.tech-row:last-child { border-bottom: 0; }
.tech-cat { font-weight: 600; font-size: 14.5px; }
.tech-items { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 860px) {
  .tech-row { grid-template-columns: 1fr; gap: 4px; }
}

.summary {
  background: var(--card-2);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--accent-soft); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.ghost:hover { background: var(--card-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ------------------------------------------------------------- portfolio */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.tile {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tile a { display: block; color: inherit; }
.tile a:hover { text-decoration: none; }
.tile .shot { aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.tile .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tile .label { padding: 11px 14px; }
.tile .label b { display: block; font-size: 15px; }
.tile .label span { font-size: 12.5px; color: var(--ink-faint); }

/* ---------------------------------------------------------------- photos */

.gallery-card .shot { aspect-ratio: 3 / 2; }
.gallery-card .label b { font-size: 16px; }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.photo-item { cursor: zoom-in; }
.photo-item img {
  width: 100%;
  border-radius: 8px;
  background: var(--card-2);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.photo-item .cap { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }

/* -------------------------------------------------------------- lightbox */

.lb {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 12, .93);
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 60px 20px;
}
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 6px; object-fit: contain; }
.lb .lb-cap {
  color: #e6edf3;
  text-align: center;
  max-width: 760px;
  margin-top: 16px;
  font-size: 15px;
  min-height: 24px;
}
.lb .lb-count { color: #8b949e; font-size: 13px; margin-top: 4px; }
.lb button {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: 0;
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.lb button:hover { background: rgba(255, 255, 255, .22); }
.lb .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb .lb-close { right: 12px; top: 12px; }

@media (max-width: 640px) {
  .lb { padding: 20px 10px; }
  .lb .lb-prev { left: 4px; }
  .lb .lb-next { right: 4px; }
}

/* -------------------------------------------------------------- mind map */

/* The map needs explaining, so this call-out is deliberately loud: brand
   tint, accent rule, and the depth buttons living right next to their
   description instead of buried in the toolbar. */
.map-guide {
  margin: 0 0 16px;
  padding: 14px 18px 12px;
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  border-left: 5px solid var(--brand);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 11%, var(--card));
}

.map-guide h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--brand-ink);
}

.map-guide ul { list-style: none; margin: 0; padding: 0; }

.map-guide li {
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.map-guide b { color: var(--ink); font-weight: 700; }

.map-guide .guide-swatch {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin: 0 1px;
  overflow: visible;
}
.map-guide .sw-fill { fill: var(--brand); }
.map-guide .sw-num { font-weight: 700; }
.map-guide .sw-open { fill: var(--card); stroke: var(--brand); stroke-width: 1.8; }
.map-guide .sw-num {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}

.map-guide .guide-levels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.map-guide .guide-label { font-weight: 700; color: var(--ink); }
.map-guide .guide-hint { font-size: 13.5px; }

.map-guide .guide-foot {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-size: 13px;
  color: var(--ink-faint);
}

/* Depth-level buttons, built by js/mindmap.js */
.map-levels { display: inline-flex; flex-wrap: wrap; gap: 3px; }

.map-levels button {
  min-width: 24px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

/* Keep them small on a mouse, but finger-sized on a touch screen. */
@media (pointer: coarse) {
  .map-levels button { min-width: 32px; padding: 6px 9px; font-size: 12.5px; }
}

.map-levels button:hover { border-color: var(--brand); color: var(--ink); }

.map-levels button.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

@media (min-width: 1000px) {
  /* Both notes share one line; the level row sits under them. */
  .map-guide ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 26px; }
  .map-guide li { margin-bottom: 3px; }
  .map-guide .guide-note { white-space: nowrap; }
  .map-guide .guide-levels { flex-basis: 100%; }
}

.map-shell {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  overflow: hidden;
  height: 620px;
}
.map-shell.full { height: calc(100vh - 120px); }
.map-shell svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-shell svg.dragging { cursor: grabbing; }

.map-node-label {
  font-family: var(--font);
  font-size: 13px;
  fill: var(--ink);
  dominant-baseline: middle;
  user-select: none;
}
.map-node-label.root { font-size: 19px; font-weight: 700; }
.map-node-label.branch { font-size: 14px; font-weight: 600; fill: #fff; }
.map-hit { cursor: pointer; }
.map-hit:hover .map-node-label { fill: var(--accent); }
.map-hit:hover .map-node-label.branch { fill: #fff; }

.map-tools {
  position: absolute;
  z-index: 2;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 20px);
}
.map-tools button {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.map-tools button:hover { color: var(--ink); border-color: var(--accent); }

.map-search {
  position: absolute;
  z-index: 2;
  left: 10px;
  top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
  width: 190px;
}

@media (max-width: 620px) {
  /* Stack the legend, and drop the toolbar to the bottom so it stops
     colliding with the search box. */
  .map-search { width: calc(100% - 20px); }
  .map-tools { top: auto; bottom: 10px; }
}

.map-note {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--ink);
  color: var(--card);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  max-width: 240px;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .12s;
}
.map-note.show { opacity: 1; }

/* ------------------------------------------------------------------ chat */

.chat-launch {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  box-shadow: var(--shadow);
}

.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 61;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel.open { display: flex; }
.chat-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.chat-head button {
  margin-left: auto;
  background: none;
  border: 0;
  font-size: 20px;
  color: var(--ink-faint);
  cursor: pointer;
  line-height: 1;
}
.chat-log { flex: 1; overflow-y: auto; padding: 14px 16px; }
.chat-msg { margin-bottom: 12px; font-size: 14.5px; line-height: 1.5; }
.chat-msg.user { text-align: right; }
.chat-msg .bubble {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 12px;
  background: var(--card-2);
  max-width: 88%;
  text-align: left;
  white-space: pre-wrap;
}
.chat-msg.user .bubble { background: var(--accent); color: #fff; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--card-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 14.5px;
}
.chat-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.chat-hint { font-size: 12px; color: var(--ink-faint); padding: 0 16px 10px; }

/* ---------------------------------------------------------------- footer */

footer.site {
  margin-top: auto;
  text-align: center;
  color: rgba(255, 255, 255, .45);
  font-size: 13.5px;
  padding: 10px 20px 40px;
}
footer.site a { color: rgba(255, 255, 255, .7); }

.crumb { font-size: 14px; color: var(--ink-faint); margin-bottom: 10px; }
.notice {
  background: var(--card-2);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--ink-soft);
  font-size: 14.5px;
}