/* Shared frame for kevinburke site: Blueprint style (navy grid, yellow). */
@font-face { font-family: 'Inter'; font-weight: 400 800; font-display: swap; src: url('fonts/Inter-var.woff2') format('woff2'); }
:root {
  --bg: #0E2A47; --bg2: #0B2340; --grid: rgba(173,208,255,0.08); --line: #9EC5F0; --faint: rgba(158,197,240,0.35);
  --ink: #EAF3FF; --muted: #8FB0D4; --hot: #FFD25A; --hot-soft: rgba(255,210,90,0.14);
  --mono: Consolas, 'Cascadia Mono', 'SF Mono', monospace; --sans: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --head: 60px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); }
body { margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px; }
a { color: inherit; }

/* site header: Inter, not mono */
header.site { position: sticky; top: 0; z-index: 30; background: rgba(9,30,55,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--faint); }
header.site .in { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: var(--head); display: flex; align-items: center; gap: 28px; }
header.site .brand { color: var(--ink); font-weight: 750; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
header.site .brand span { color: var(--hot); }
header.site ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
header.site ul a { display: block; font-weight: 550; font-size: 15px; color: var(--muted); text-decoration: none; padding: 8px 12px; border-bottom: 2px solid transparent; white-space: nowrap; }
header.site ul a:hover { color: var(--ink); }
header.site ul a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hot); }
header.site .right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.present-btn { font: 600 13px var(--sans); color: var(--muted); background: none; border: 1px solid var(--faint); padding: 8px 12px; cursor: pointer; }
.present-btn:hover { color: var(--ink); border-color: var(--line); }
.hire { font-weight: 700; font-size: 14px; background: var(--hot); color: #0E2A47; text-decoration: none; padding: 10px 16px; white-space: nowrap; }
.hire:hover { filter: brightness(1.06); }

/* page building blocks */
.sheet { max-width: 1240px; margin: 34px auto; padding: 0 28px; }
.frame { border: 1.5px solid var(--line); position: relative; padding: 64px 60px 60px; background: rgba(14,42,71,0.55); }
.corner { position: absolute; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.c1 { top: 10px; left: 14px; } .c2 { top: 10px; right: 14px; } .c3 { bottom: 10px; left: 14px; } .c4 { bottom: 10px; right: 14px; }
.tag { display: inline-block; border: 1px solid var(--hot); color: var(--hot); font-family: var(--mono); font-size: 12px; padding: 4px 10px; letter-spacing: .12em; margin-bottom: 22px; }
h1 { font-weight: 750; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.03; letter-spacing: -0.03em; margin: 0; max-width: 1020px; }
h2 { font-weight: 750; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.025em; margin: 0; max-width: 900px; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.hl, .n { color: var(--hot); }
.dek { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 760px; margin: 20px 0 0; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta { font-weight: 650; font-size: 15px; padding: 12px 18px; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; }
.cta.p { background: var(--hot); border-color: var(--hot); color: #0E2A47; }
.cta:hover { border-color: var(--ink); }
.stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--faint); }
.stats .v { font-size: 38px; font-weight: 750; color: var(--hot); line-height: 1; }
.stats .l { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 220px; line-height: 1.45; }
.k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--hot); text-transform: uppercase; }
.muted { color: var(--muted); }

/* contact band, on every page */
.contact .frame { border-color: var(--hot); }
.contact .links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
footer.site { max-width: 1240px; margin: 0 auto 40px; padding: 0 28px; font-family: var(--mono); font-size: 11px; color: var(--muted); line-height: 1.6; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* interview mode: chrome off, arrows step section to section */
body.present header.site, body.present footer.site { display: none; }
body.present { --head: 0px; }
body.present .sheet { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding-top: 24px; padding-bottom: 24px; }
.present-hint { position: fixed; right: 18px; bottom: 16px; z-index: 40; font: 12px var(--mono); color: var(--muted); background: var(--bg2); border: 1px solid var(--faint); padding: 7px 10px; display: none; }
body.present .present-hint { display: block; }

@media (max-width: 980px) {
  header.site .in { gap: 14px; padding: 0 16px; }
  header.site ul a { font-size: 14px; padding: 8px 8px; }
  .present-btn { display: none; }
  .frame { padding: 52px 22px 44px; }
  .sheet { padding: 0 16px; }
}
@media (max-width: 640px) {
  header.site .in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; row-gap: 4px; }
  header.site ul { order: 3; flex-basis: 100%; }
  header.site .right { margin-left: auto; }
  :root { --head: 100px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===== Desk: navy sheets on a light page (Kevin's pick, 2026-11-05) ===== */
html body { background-color: #EEF2F7; background-image: linear-gradient(rgba(14,42,71,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,42,71,.06) 1px, transparent 1px); }
.frame { background: #0E2A47 !important; box-shadow: 0 18px 40px -22px rgba(14,42,71,.55); border-color: #0E2A47 !important; }
.contact .frame { border-color: var(--hot) !important; }
footer, footer.site { color: #4A6585 !important; }

/* street cred: the LinkedIn post, made to stand out (Kevin, 2026-11-06) */
.cred { display: flex; align-items: center; gap: 20px; text-decoration: none; margin-top: 28px; max-width: 1000px; background: #F4F8FD; color: #0E2A47; border: 0; border-left: 6px solid #0A66C2; padding: 22px 24px; box-shadow: 0 10px 28px -14px rgba(10,102,194,.6); transition: transform .15s, box-shadow .15s; }
.cred:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(10,102,194,.75); }
.cred .badge { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; background: #0A66C2; color: #fff; font-weight: 800; font-size: 26px; font-family: var(--sans); border-radius: 6px; }
.cred .k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: #0A66C2; font-weight: 700; }
.cred .t { font-weight: 750; font-size: 21px; line-height: 1.25; margin-top: 4px; color: #0E2A47; }
.cred .s { font-size: 15px; color: #3D5A7A; margin-top: 6px; line-height: 1.45; }
.cred .go { margin-left: auto; flex-shrink: 0; background: #0A66C2; color: #fff; font-weight: 700; font-size: 15px; padding: 12px 18px; white-space: nowrap; }
@media (max-width: 760px) { .cred { flex-wrap: wrap; } .cred .go { margin-left: 0; } }

/* calmer type (Kevin, 2026-11-05): headlines a step smaller across the site, Rocky page included */
html h1 { font-size: clamp(32px, 3.9vw, 50px); }
html h2 { font-size: clamp(25px, 2.7vw, 36px); }
html .dek { font-size: 17px; }
html .stats .v, html .spec .v { font-size: 32px; }
html .case .side .v { font-size: 28px; }

/* phone: the Rocky section bar has no room for its links, so it goes; the site header stays */
@media (max-width: 980px) { html body nav { display: none; } }