/* Levelbrook — "Pacific Northwest Studio" design system
   Senior Ruby on Rails staff augmentation & consulting, on contract.
   Warm, naturalistic, premium, high-legibility. Shared across the homepage
   and every generated subpage — class names are stable on purpose. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* warm bone / sand neutrals */
  --bg:     #f7f4ec;
  --bg-2:   #f1ece0;
  --bg-3:   #e8e1d1;
  /* deep fir ink */
  --ink:    #1b2a23;
  --ink-2:  #43514a;
  --muted:  #76817a;
  /* warm hairlines */
  --line:   #e3dccd;
  --line-2: #d3cab6;
  /* cedar / terracotta accent */
  --accent:      #ac4f2e;
  --accent-2:    #8f3f22;
  --accent-tint: #f1e3da;
  --accent-soft: #f6ede5;
  --ring: rgba(172,79,46,0.16);
  /* evergreen darks (bands, footer, code) */
  --dark:   #1f3429;
  --dark-2: #18271e;
  --dark-3: #122019;
  --sage:   #a9c3a6;   /* light evergreen accent on dark backgrounds */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --radius: 14px;
  --radius-sm: 9px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap   { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.wide   { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: 0.86em; background: var(--bg-3); padding: 1px 6px; border-radius: 5px; }
::selection { background: var(--accent-tint); color: var(--accent-2); }

/* TOP STRIP */
.topstrip { background: var(--dark-3); color: rgba(255,255,255,0.72); font-size: 12.5px; font-family: var(--mono); letter-spacing: -0.01em; }
.topstrip .wide { display: flex; justify-content: space-between; align-items: center; padding: 9px 28px; flex-wrap: wrap; gap: 6px; }
.topstrip strong { color: #fff; font-weight: 500; }
.topstrip a { color: var(--sage); }
.topstrip a:hover { color: #fff; }
@media (max-width: 720px) { .topstrip .wide > span:last-child { display: none; } }

/* NAV */
.nav { border-bottom: 1px solid var(--line); background: rgba(247,244,236,0.82); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 50; }
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.brand small { font-family: var(--mono); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); padding: 3px 8px; background: var(--accent-tint); border-radius: 6px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s ease; }
.menu a:hover { color: var(--accent); }
@media (max-width: 920px) { .menu { gap: 18px; } .menu .hide-sm { display: none; } }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff !important; text-decoration: none; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid var(--accent); cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn:hover { background: var(--accent-2); box-shadow: 0 10px 26px -12px var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink) !important; border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg); border-color: var(--ink); box-shadow: none; }
.btn-lg { padding: 15px 28px; font-size: 15.5px; }

/* HERO */
.hero { padding: 88px 0 92px; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-bottom: 1px solid var(--line); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero-narrow { position: relative; z-index: 1; max-width: 780px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.5); font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.02em; text-transform: uppercase; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.display { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin: 24px 0 0; }
.display em { font-style: italic; color: var(--accent); font-weight: 500; }
.lede { font-size: 19px; color: var(--ink-2); margin: 24px 0 0; max-width: 620px; line-height: 1.6; }
.lede em { font-style: normal; color: var(--ink); font-weight: 600; }
.meta-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,255,255,0.6); border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pill strong { color: var(--accent); font-weight: 600; }
.btn-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.reassure { margin-top: 22px; font-size: 14px; color: var(--muted); display: flex; align-items: flex-start; gap: 8px; max-width: 580px; line-height: 1.55; }
.reassure svg { margin-top: 3px; flex: none; }

/* HERO IMAGE / PHOTO FRAME */
.shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -38px rgba(18,32,25,0.55); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot.hero-shot img { aspect-ratio: 16/11; }
.shot .badge { position: absolute; left: 16px; bottom: 16px; right: 16px; background: rgba(18,32,25,0.74); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); padding: 13px 16px; color: rgba(255,255,255,0.9); font-size: 13.5px; line-height: 1.5; }
.shot .badge strong { color: var(--sage); font-weight: 600; }

/* CODE PANEL (hero alt + python section) */
.code-card { position: relative; z-index: 1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--dark-2); background: var(--dark-3); box-shadow: 0 34px 80px -40px rgba(18,32,25,0.6); }
.code-card .bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-card .bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.16); display: inline-block; }
.code-card .bar span { font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,0.42); margin-left: 8px; }
.code-card pre { margin: 0; padding: 20px 22px 24px; overflow-x: auto; }
.code-card code { font-family: var(--mono); font-size: 13px; line-height: 1.72; color: #cdd8d0; background: none; padding: 0; white-space: pre; }
.code-card .c-key { color: var(--sage); }
.code-card .c-com { color: #6a7d72; font-style: italic; }
.code-card .c-str { color: #e0b46a; }
.code-card .c-num { color: #e09a6a; }

/* TRUST STRIP */
.trust { background: var(--dark); color: #fff; }
.trust .wide { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px 18px; padding: 26px 28px; }
.trust .ti { display: flex; align-items: center; gap: 12px; }
.trust .ti svg { flex: none; }
.trust .ti b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.trust .ti span { font-size: 12px; color: rgba(255,255,255,0.58); font-family: var(--mono); }

/* SECTIONS */
section.paper { background: var(--bg); padding: 92px 0; }
section.cream { background: var(--bg-2); padding: 92px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.ink { background: var(--dark); padding: 100px 0; color: #fff; text-align: center; position: relative; overflow: hidden; }
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); }
.h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
section.ink .h2 { color: #fff; max-width: 840px; margin: 0 auto; }
section.ink .h2 em { color: var(--sage); }
.head-pair { max-width: 740px; margin: 0 0 48px; }
.head-pair.center { text-align: center; margin-left: auto; margin-right: auto; }
.head-pair .lede { margin-top: 16px; }
.head-pair.center .lede { margin-left: auto; margin-right: auto; }

/* PROSE */
.prose { max-width: 720px; margin: 0 auto; font-size: 17.5px; color: var(--ink-2); line-height: 1.72; }
.prose h2 { font-size: clamp(26px, 3.2vw, 32px); letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 0; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 21px; color: var(--ink); margin: 32px 0 0; }
.prose p { margin: 16px 0 0; }
.prose ul { margin: 16px 0 0; padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code { font-size: 0.9em; }

/* CARD GRID */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 920px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.card { background: rgba(255,255,255,0.55); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; display: flex; flex-direction: column; }
.card:hover { border-color: var(--line-2); box-shadow: 0 24px 50px -34px rgba(18,32,25,0.3); transform: translateY(-3px); }
.card .icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.card .icon.warm { background: var(--bg-3); color: var(--ink-2); }
.card .icon svg { width: 20px; height: 20px; }
.card h3 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 18px 0 0; letter-spacing: -0.01em; }
.card p { color: var(--ink-2); font-size: 15px; margin: 10px 0 0; flex: 1; }
.card ul { list-style: none; padding: 0; margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.card ul li { padding: 8px 0; border-top: 1px solid var(--line); }
.card ul li::before { content: '›'; color: var(--accent); margin-right: 9px; font-weight: 700; }

/* SELECTED WORK GALLERY */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } }
.work { display: flex; flex-direction: column; background: rgba(255,255,255,0.55); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-decoration: none; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.work:hover { border-color: var(--accent); box-shadow: 0 22px 46px -32px rgba(172,79,46,0.45); transform: translateY(-3px); color: inherit; }
.work .tagline { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.work .metric { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 0; line-height: 1; }
.work h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 11px 0 0; letter-spacing: -0.005em; line-height: 1.2; }
.work p { font-size: 14px; color: var(--muted); margin: 8px 0 0; flex: 1; line-height: 1.55; }
.work .more { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--accent); }
.work .more.muted { color: var(--muted); }

/* SPLIT BAND */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split.rev > div:first-child { order: 2; }
@media (max-width: 900px) { .split.rev > div:first-child { order: 0; } }
.stat-row { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 32px; }
.stat b { font-family: var(--display); font-weight: 600; font-size: 34px; color: var(--accent); display: block; line-height: 1; letter-spacing: -0.02em; }
.stat span { font-size: 12.5px; color: var(--muted); font-family: var(--mono); display: block; margin-top: 8px; }
.lead-list { margin: 24px 0 0; padding: 0; list-style: none; }
.lead-list li { position: relative; padding: 13px 0 13px 28px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.lead-list li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.lead-list strong { color: var(--ink); font-weight: 600; }

/* EXPERIENCE / TIMELINE */
.exp { display: grid; grid-template-columns: 200px 1fr; gap: 30px; padding: 28px 0; border-top: 1px solid var(--line); }
.exp:first-of-type { border-top: none; }
@media (max-width: 700px) { .exp { grid-template-columns: 1fr; gap: 10px; } }
.exp .when { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.exp .role { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.exp .org { color: var(--accent); font-weight: 500; font-size: 14.5px; margin-top: 3px; }
.exp ul { margin: 13px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
.exp ul li { margin: 7px 0; }

/* STACK */
.stack-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.head-pair.center + .stack-strip { justify-content: center; }
.stack-strip span { padding: 8px 15px; background: rgba(255,255,255,0.6); border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.stack-strip span.key { background: var(--dark); color: #fff; border-color: var(--dark); }

/* FAQ */
.faq { max-width: 780px; }
.qa { border-top: 1px solid var(--line); padding: 24px 0; }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h4 { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.qa p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* RELATED LINKS */
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.related a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: rgba(255,255,255,0.6); border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.related a:hover { color: var(--accent); border-color: var(--accent); }

/* INK CTA + FOOTER */
section.ink::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('/brand/forest.jpg') center/cover no-repeat; opacity: 0.18; mix-blend-mode: luminosity; }
section.ink .wrap { position: relative; z-index: 1; }
section.ink .eyebrow { background: rgba(255,255,255,0.07); color: var(--sage); border-color: rgba(169,195,166,0.3); }
section.ink .lede { color: rgba(255,255,255,0.74); max-width: 600px; margin: 18px auto 0; }
section.ink .btn { background: #fff; color: var(--dark) !important; border-color: #fff; }
section.ink .btn:hover { background: var(--accent-tint); }
section.ink .btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,0.3); }
section.ink .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }
footer { background: var(--dark-3); color: rgba(255,255,255,0.62); padding: 60px 0 34px; font-size: 14px; }
footer .cols { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
footer a { color: rgba(255,255,255,0.84); text-decoration: none; }
footer a:hover { color: var(--sage); }
footer .mark { font-family: var(--display); color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
footer .fcol h5 { color: #fff; font-size: 11px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.13em; margin: 0 0 13px; font-weight: 500; }
footer .fcol a { display: block; padding: 4px 0; font-size: 13.5px; }
.copyright { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px; color: rgba(255,255,255,0.45); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: var(--mono); }