/* Shared styles for robroth.com */
:root {
  --bg: #fbfaf7;
  --ink: #1f1f1f;
  --muted: #6b6b6b;
  --rule: #e3e0d8;
  --accent: #2b5d8a;
  --max: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #161616; --ink: #ececec; --muted: #a0a0a0; --rule: #333; --accent: #7fb0e0; }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
}
main { max-width: var(--max); margin: 0 auto; padding: 3rem 1.25rem 5rem; }
a { color: var(--accent); }
nav.site { font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; margin-bottom: 2.5rem; }
nav.site a { margin-right: 1.25rem; text-decoration: none; }
nav.site a.current { color: var(--ink); border-bottom: 2px solid var(--accent); }

/* C.V. */
header.cv h1 { font-size: 2.1rem; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
header.cv .tagline { color: var(--muted); margin: 0 0 0.75rem; }
header.cv .contact { font-family: system-ui, -apple-system, sans-serif; font-size: 0.88rem; color: var(--muted); }
header.cv .contact span + span::before { content: " · "; }
section.cv { margin-top: 2.25rem; }
section.cv h2 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem; margin: 0 0 1rem;
}
.entry { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1rem; margin-bottom: 1.35rem; }
.entry .when { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; color: var(--muted); padding-top: 0.2rem; }
.entry h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.entry .org { color: var(--muted); font-style: italic; }
.entry ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.entry li { margin-bottom: 0.25rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; list-style: none; }
.tags li {
  font-family: system-ui, -apple-system, sans-serif; font-size: 0.82rem;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.15rem 0.65rem;
}
section.cv h3.sub { font-family: system-ui, -apple-system, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin: 1rem 0 0.5rem; }
section.cv p.more { font-family: system-ui, -apple-system, sans-serif; font-size: 0.88rem; color: var(--muted); margin: 0.25rem 0 0; }
.placeholder { color: var(--muted); }
.placeholder::before { content: "[ "; } .placeholder::after { content: " ]"; }
footer { margin-top: 3rem; font-family: system-ui, -apple-system, sans-serif; font-size: 0.8rem; color: var(--muted); }

@media (max-width: 600px) {
  .entry { grid-template-columns: 1fr; }
  .entry .when { padding: 0 0 0.2rem; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  nav.site, footer, .no-print { display: none; }
  a { color: inherit; text-decoration: none; }
  section.cv { break-inside: avoid; }
}

/* plain lists inside a section (e.g. Beyond Work) */
section.cv > ul:not(.tags) { padding-left: 1.1rem; margin: 0; }
section.cv > ul:not(.tags) li { margin-bottom: 0.4rem; }

/* Homepage: hero + card grid, one screen */
:root { --card: #ffffff; --card-border: #e6e2d9; --tint: #e9f0f7; --shadow: 0 10px 28px rgba(20,30,50,0.10); }
@media (prefers-color-scheme: dark) {
  :root { --card: #1e1e1e; --card-border: #2e2e2e; --tint: #22303d; --shadow: 0 10px 28px rgba(0,0,0,0.45); }
}
body.home { background: radial-gradient(60rem 30rem at 15% -10%, var(--tint) 0%, transparent 60%) no-repeat, var(--bg); }
main.home { max-width: 64rem; padding: 1.1rem 1.5rem 1.25rem; min-height: 100vh; display: flex; flex-direction: column; gap: 0.9rem; }
nav.site.top { margin: 0; text-align: right; }
nav.site.top { display: flex; justify-content: flex-end; gap: 0.6rem; }
nav.site.top a {
  font-size: 1rem; font-weight: 600; border: 1px solid var(--card-border); border-radius: 999px;
  padding: 0.6rem 1.3rem; margin: 0; background: var(--card); transition: border-color .15s, background .15s, transform .15s;
}
nav.site.top a:hover { border-color: var(--accent); background: var(--tint); transform: translateY(-1px); }
nav.site.top a.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
nav.site.top a.primary:hover { background: var(--accent); filter: brightness(1.08); }

.hero { display: flex; align-items: center; gap: 2rem; }
.hero .photo { width: 230px; height: 230px; object-fit: cover; border-radius: 50%; flex: none; box-shadow: var(--shadow); border: 5px solid var(--card); }
.hero h1 { margin: 0 0 0.3rem; font-size: 2.4rem; letter-spacing: -0.02em; }
.hero .lede { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 36rem; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.grid h2 {
  grid-column: 1 / -1; margin: 0.15rem 0 -0.45rem;
  font-family: system-ui, -apple-system, sans-serif; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.card {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 0.9rem 1.05rem 0.95rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card .icon {
  width: 2.4rem; height: 2.4rem; padding: 0.5rem; box-sizing: border-box; border-radius: 10px;
  background: var(--tint); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.6rem; display: block;
}
.card h3 { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.card.soon { border-style: dashed; }
.card .badge {
  position: absolute; top: 1rem; right: 1rem;
  font-family: system-ui, -apple-system, sans-serif; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); background: var(--tint); border-radius: 999px; padding: 0.2rem 0.55rem;
}
.card.elsewhere ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.card.elsewhere li a {
  display: inline-block; font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; text-decoration: none;
  border: 1px solid var(--card-border); border-radius: 999px; padding: 0.3rem 0.75rem; transition: border-color .15s, background .15s;
}
.card.elsewhere li a:hover { border-color: var(--accent); background: var(--tint); }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } main.home { min-height: auto; } }
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero .photo { width: 160px; height: 160px; }
  .hero h1 { font-size: 2rem; }
}

/* compact horizontal cards (Professional row) */
.card.compact { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; }
.card.compact .icon { margin: 0; flex: none; }
.card.compact h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.card.compact p { font-size: 0.85rem; }
.row2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.card p.aside { margin-top: 0.55rem; font-size: 0.82rem; }