/* kwenner.dev: one stylesheet for every page. No web fonts, no scripts, no trackers.
   Colors are tokens; dark mode follows the device setting. */

:root {
  color-scheme: light dark;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #1d2125;
  --muted: #5d646b;
  --border: #e2e0d9;
  --accent: #1f6b5c;
  --accent-soft: #e3efeb;
  --code: #eeece6;
  --scribbell: #1068c9;
  --ballads: #8b5a3a;
  --max: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141719;
    --surface: #1c2023;
    --text: #e8eaec;
    --muted: #a1a8ae;
    --border: #2c3236;
    --accent: #6cc4ad;
    --accent-soft: #1b2e29;
    --code: #23282c;
    --scribbell: #6aa9f0;
    --ballads: #d9a06f;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

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

/* Header */
.site-header .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-top: 1.5rem; padding-bottom: 1.5rem;
}
.brand { font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--accent); }
.site-nav { display: flex; gap: 1.25rem; font-size: .95rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }



/* Type */
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); margin: 1.5rem 0 1rem; }
h2 { font-size: 1.45rem; margin: 3rem 0 1rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: .35rem; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 38rem; }
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .4rem;
}
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* Home: intro */
.intro { padding-top: 1.5rem; }
.links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; }

/* Project cards */
.projects { display: grid; gap: 1.25rem; }
.project {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.5rem; overflow: hidden;
}
@media (min-width: 640px) {
  .project { grid-template-columns: 1fr 9.5rem; align-items: center; }
}
.project h3 { margin: 0 0 .35rem; font-size: 1.35rem; }
.project.ballads h3 { color: var(--ballads); }
.project.scribbell h3 { color: var(--scribbell); }
.project p:last-child { margin-bottom: 0; }
.stack { font-size: .88rem; color: var(--muted); }
.status {
  display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .6rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin-bottom: .6rem;
}
.project-links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-weight: 600; }

.phone {
  width: 9.5rem; height: 12rem; margin: 0 auto; border-radius: 18px; overflow: hidden;
  border: 6px solid var(--text); background: var(--bg);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.icon-tile { width: 7.5rem; height: 7.5rem; margin: 0 auto; border-radius: 26px; display: block;
  box-shadow: 0 6px 20px rgb(16 104 201 / .25); }

/* Resume */
.resume-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: end; }

/* At a glance: three facts in tiles, stacked on phones. */
.glance { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .glance { grid-template-columns: repeat(3, 1fr); } }
.glance li { margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 12px; padding: .8rem 1rem; }
.glance strong { display: block; font-size: 1.15rem; letter-spacing: -.01em; }
.glance span { color: var(--muted); font-size: .9rem; line-height: 1.4; display: block; }

/* Experience timeline: a rail with a dot per job; dates sit beside it on wide screens, above on phones. */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: .6rem; bottom: .6rem; left: 5px;
  width: 2px; background: var(--border); }
.timeline .job { position: relative; margin: 0 0 1.75rem; padding-left: 1.75rem; }
.timeline .job::before { content: ""; position: absolute; left: 0; top: .45rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.timeline .job:first-child::before { background: var(--accent); }
.timeline .when { color: var(--muted); font-size: .88rem; font-weight: 600; letter-spacing: .02em;
  margin: 0 0 .1rem; font-variant-numeric: tabular-nums; }
.timeline h3 { margin: 0; }
.timeline .org { color: var(--muted); margin: .1rem 0 .5rem; }
.tag { display: inline-block; font-size: .75rem; font-weight: 600; padding: .05rem .55rem; margin-left: .35rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent); vertical-align: .1em; }
@media (min-width: 640px) {
  .timeline::before { left: 8.25rem; }
  .timeline .job { display: grid; grid-template-columns: 7rem 1fr; gap: 2.5rem; padding-left: 0; }
  .timeline .job::before { left: calc(8.25rem - 5px); }
  .timeline .when { text-align: right; margin: .1rem 0 0; }
}
.timeline .job:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.chips li { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .15rem .75rem; font-size: .9rem; }

/* Policy and support pages */
.doc { max-width: var(--max); }
.doc h2 { font-size: 1.25rem; margin-top: 2.25rem; }
.callout {
  background: var(--accent-soft); border-radius: 12px; padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.app-head { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.app-head img { width: 64px; height: 64px; border-radius: 15px; flex: none; }
.app-head h1 { margin: 0; }
.subnav { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1rem 0 0; font-size: .95rem; }

/* Footer */
.site-footer { margin-top: 4.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem; }
.site-footer .wrap { padding-top: 1.5rem; padding-bottom: 2rem; display: flex; flex-wrap: wrap;
  gap: .5rem 1.5rem; justify-content: space-between; }
.site-footer a { color: var(--muted); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.tagline { margin: 0; }
.status-row { margin: 1.5rem 0 0; }

/* Promotions inside one job: small steps joined by arrows. */
.roles { list-style: none; padding: 0; margin: .1rem 0 .75rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: .35rem; font-size: .85rem; }
.roles li { margin: 0; display: flex; align-items: center; gap: .35rem; }
.roles li + li::before { content: "→"; color: var(--muted); }
.roles li > span { color: var(--muted); font-variant-numeric: tabular-nums; }
.roles li:last-child { font-weight: 600; }

/* Project detail inside a job. */
.focus { background: var(--accent-soft); border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.1rem; }
.focus p:last-child { margin-bottom: 0; }
.focus-label { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .35rem; }
.focus .focus-label { color: var(--accent); }
.std { white-space: nowrap; font-weight: 600; }
.work { list-style: none; padding: 0; margin: 0; }
.work li { position: relative; padding-left: 1rem; margin-bottom: .5rem; }
.work li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px;
  border-radius: 1px; background: var(--accent); }

/* Buttons: the header's Professional inquiries, and email actions. */
.site-nav { align-items: baseline; }
.site-nav a.nav-cta, .button {
  display: inline-block; background: var(--accent); color: var(--bg); text-decoration: none;
  font-weight: 600; border-radius: 999px; line-height: 1.2;
}
.site-nav a.nav-cta { padding: .4rem .95rem; margin: -.4rem 0; }
.site-nav a.nav-cta:hover, .site-nav a.nav-cta[aria-current="page"], .button:hover {
  color: var(--bg); filter: brightness(1.1);
}
.button { padding: .75rem 1.4rem; font-size: 1rem; }

/* Professional inquiries: one row per kind of inquiry, text on the left and its address on the right.
   The buttons share one fixed column so they line up and the longest address fits on one line. */
.inquiries-intro { padding-top: 1.5rem; }
.inquiries { display: grid; gap: 1rem; margin-top: 2rem; }
.inquiry { display: grid; gap: .25rem 2rem; align-items: center; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 14px;
  padding: 1.25rem 1.5rem; }
@media (min-width: 640px) { .inquiry { grid-template-columns: 1fr 15rem; } }
.inquiry h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.inquiry p { margin-bottom: 0; text-wrap: pretty; }
.inquiry-action { margin: .75rem 0 0; }
@media (min-width: 640px) { .inquiry-action { margin: 0; } }
.inquiry .button { display: block; width: 100%; text-align: center; white-space: nowrap;
  padding: .7rem 1rem; font-size: .95rem; }
.nowrap { white-space: nowrap; }
.project p { text-wrap: pretty; }