:root{
  --bg:#0b0c0f; --text:#e8eaed; --muted:#9aa0a6; --card:#121417; --accent:#aaffaa;
  --max:1000px; --radius:16px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --text:#16181c; --muted:#475569; --card:#f8fafc; --accent:#1d4ed8; }
}
*{ box-sizing:border-box; }
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h, 80px); /* 80px = safe fallback */
}
section[id] { scroll-margin-top: var(--header-h, 80px); }
.container{ max-width:var(--max); margin:0 auto; padding:24px; }
h1,h2,h3{ line-height:1.25; margin:0 0 8px; }
h2{ margin-top:40px; }
p{ margin:0 0 12px; color:var(--text); }
.sub{ color:var(--muted); }

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg), transparent 35%); border-bottom:1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.brand{ display:flex; gap:16px; align-items:center; }
.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; }

.headshot{ width:150px; border-radius:50%; object-fit:cover; }

.quote {
  position: relative;
  padding: 2rem 2.5rem;
  margin: 2rem 0;
  border-left: 2px solid #aaffaa;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2f4f4f;
}

.quote::before {
  content: "“";
  position: absolute;
  top: 0rem;
  left: 1rem;
  font-size: 3rem;
  color: #aaffaa;
  font-family: serif;
}

.quote footer {
  margin-top: 1rem;
  text-align: right;
  font-size: 0.95rem;
  color: #aaffaa;
  opacity: 0.60;
}

.nav{ display:flex; gap:16px; align-items:center; }
.nav a{ color:var(--text); text-decoration:none; opacity:.9; }
.nav a:hover{ color:var(--accent); }
.btn{ padding:6px 12px; border:1px solid color-mix(in oklab, var(--text), transparent 80%); border-radius:999px; }

.intro{ margin-top:16px; font-size:1.05rem; }

.card {
  width: 260px;               /* tile width (adjust) */
  border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
  border-radius: var(--radius); overflow:hidden; transition:transform .08s ease, border-color .2s;
  background: var(--card);
}

.card:hover{ transform:translateY(-2px); border-color:color-mix(in oklab, var(--text), transparent 80%); }
.card img{ display:block; width:100%; height:160px; object-fit:cover; background:#0002; }
.card-body{ padding:14px; }
.card-body p{ color:var(--muted); margin:6px 0 8px; }
.meta{ list-style:none; padding:0; margin:0; display:flex; gap:10px; color:var(--muted); font-size:.9rem; }
.card-link{ color:inherit; text-decoration:none; display:block; height:100%; }

.list{ padding-left:18px; }
.list li{ margin:6px 0; }

.site-footer{ border-top:1px solid color-mix(in oklab, var(--text), transparent 90%); margin-top:40px; }

section p{ max-width:720px; }
section + section{ margin-top:48px; }
h2{ border-bottom:1px solid color-mix(in oklab, var(--text), transparent 85%); padding-bottom:4px; }

/* Left label / right content layout */
.split{
  display:grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items:start;
  padding-block: 36px;
  border-top:1px solid color-mix(in oklab, var(--text), transparent 90%);
}
.split:first-of-type{ border-top:none; }

/* Left subtitle column */
.split-label h2{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
}

/* Right content column */
/* Ensure split-body text fully wraps and never truncates */
.split-body {
  max-width: 720px;
  min-width: 0;
  white-space: normal;     /* allow multi-line wrapping */
  overflow: visible;       /* show full content, no clipping */
  text-overflow: unset;    /* disable "..." truncation */
}
.split-body p{
    margin: 0 0 16px; 
    white-space: normal;          /* allow wrapping */
    overflow: visible;            /* don’t clip */
    text-overflow: clip;          /* no "..." */
}

/* Button */
.btn-cta{
  display:inline-block;
  padding:14px 22px;
  border-radius:12px;
  border:1px solid color-mix(in oklab, var(--text), transparent 80%);
  background:#fff0;             /* transparent, works for dark/light */
  color:var(--text);
  text-decoration:none;
  transition:transform .08s ease, border-color .2s, background .2s;
}
@media (prefers-color-scheme: light){
  .btn-cta{ background:#fff; }
}
.btn-cta:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab, var(--text), transparent 65%);
  background:color-mix(in oklab, var(--card), #ffffff 10%);
}

/* Responsive: stack on small screens */
@media (max-width: 720px){
  .split{ grid-template-columns: 1fr; gap: 8px; }
  .split-label h2{ font-size:1.1rem; }
}

a {
  color: #e8eaed;             /* light green that reads well on dark bg */
  text-decoration: underline;
  font-weight: 500;
}

a:hover {
  color: #aaffaa;             /* slightly brighter on hover */
}

:root {
  --header-h: 90px !important;  /* tweak this value until it feels right */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h) !important;
}

/* All sections that are anchor targets get offset */
section[id] {
  scroll-margin-top: var(--header-h) !important;
}

/* Remove hyperlink look from the brand name */
.brand-link {
  text-decoration: none !important;
  color: var(--text) !important;
  opacity: 0.95;
}

/* Make it feel like navigation (same hover vibe) */
.brand-link:hover {
  color: var(--accent);
  opacity: 1;
}

.contact-icons {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  align-items: center;
}

.contact-icon img {
  width: 36px;        /* adjust size here */
  height: 36px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-icon:hover img {
  opacity: 1;
  transform: translateY(-2px); /* small hover lift */
  filter: drop-shadow(0 0 6px var(--accent));
}

.projects-strip {
  position: relative;
  margin-top: 12px;
}

/* Horizontal row of tiles */
.projects-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbars (optional) */
.projects-row::-webkit-scrollbar {
  display: none;
}
.projects-row {
  scrollbar-width: none; /* Firefox */
}

/* Tile-like cards */
.card {
  flex: 0 0 260px;           /* fixed-ish tile width */
  border: 1px solid color-mix(in oklab, var(--text), transparent 90%);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  scroll-snap-align: start;
}

/* Square-ish image at top */
.card img {
  width: 100%;
  aspect-ratio: 1 / 1;       /* square */
  object-fit: cover;
  display: block;
  background: #0002;
}