:root{
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --line: #E4E1D8;
  --line-strong: #C9C5B8;
  --text-primary: #1F1E1B;
  --text-secondary: #5C5A52;
  --text-muted: #8C897E;
  --accent: #B8542F;
  --accent-bg: #F5E7DE;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:-apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.serif{ font-family: Georgia, "Times New Roman", serif; }
.wrap{
  max-width:760px;
  margin:0 auto;
  padding: 32px 24px 80px;
}

/* ---------- nav ---------- */
nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:40px;
}
body.page-home nav{ padding-bottom:48px; }
nav .name{
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
}
nav .links{
  display:flex;
  gap:28px;
  font-size:14px;
}
nav .links a{
  color:var(--text-secondary);
  text-decoration:none;
}
nav .links a.active{ color:var(--text-primary); font-weight:600; }

/* ---------- kicker ---------- */
.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
}
.kicker .mark{
  width:6px;
  height:6px;
  background:var(--accent);
  flex-shrink:0;
}
.kicker .text{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-secondary);
  white-space:nowrap;
}
.kicker .rule{
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---------- headshot (hover-swap) ---------- */
.headshot{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#F2F0EA;
  cursor:pointer;
}
.headshot .photo{
  position:absolute;
  inset:0;
  transition: opacity 0.35s ease;
}
.headshot .photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.headshot .photo-a{ opacity:1; }
.headshot .photo-b{ opacity:0; }
.headshot:hover .photo-a{ opacity:0; }
.headshot:hover .photo-b{ opacity:1; }
.headshot .hint{
  position:absolute;
  bottom:8px;
  left:0;
  right:0;
  text-align:center;
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:0.03em;
  z-index:2;
  pointer-events:none;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--text-muted);
}
footer a{
  color:var(--text-secondary);
  text-decoration:none;
}

/* =====================================================
   HOME
   ===================================================== */
header.hero{
  padding: 12px 0 56px;
  margin-bottom: 24px;
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:32px;
  align-items:start;
}
header.hero h1.title{
  font-size:40px;
  line-height:1.15;
  font-weight:500;
  margin:0 0 14px;
  max-width:480px;
}
header.hero .headshot{
  width:240px;
  height:288px;
  margin-top:38px;
}
.hero-copy{ min-width:0; }
p.role{
  font-size:18px;
  color:var(--text-secondary);
  margin:0 0 20px;
  max-width:440px;
}

section.about{ margin-bottom:56px; }
.label{
  font-size:13px;
  color:var(--text-muted);
  margin:0 0 16px;
  text-transform:lowercase;
  letter-spacing:0.03em;
}
.about-grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:24px;
}
.about-copy p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-primary);
  margin:0 0 16px;
}
.about-copy p:last-child{ margin-bottom:0; }
.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}
.tag{
  background:var(--accent-bg);
  color:var(--accent);
  font-size:12px;
  font-weight:600;
  padding:5px 12px;
  border-radius:4px;
}

section.work{ margin-bottom:56px; }
.work-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.work-card{
  background:var(--surface);
  padding:24px 20px;
}
.work-card .icon{
  width:18px;
  height:18px;
  margin-bottom:16px;
  color:var(--accent);
}
.work-card h3{
  font-size:15px;
  font-weight:600;
  margin:0 0 8px;
}
.work-card p{
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.6;
  margin:0 0 16px;
}
.work-card .stat{
  font-family: Georgia, serif;
  font-size:22px;
  font-weight:500;
  color:var(--text-primary);
}
.work-card .stat-label{
  font-size:11px;
  color:var(--text-muted);
  margin-top:2px;
}

section.featured{ margin-bottom:56px; }
section.featured .shot-frame{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  height:380px;
  border:1px solid var(--line);
  background:#F2F0EA;
}
section.featured .shot-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.annot{
  font-size:11px;
  color:var(--text-muted);
  text-align:center;
  margin-top:8px;
}

/* =====================================================
   SHARED PAGE HEAD (work / about)
   ===================================================== */
header.page-head{
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
  margin-bottom:48px;
}
body.page-about header.page-head{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:28px;
}
header.page-head h1.title{
  font-size:32px;
  line-height:1.2;
  font-weight:500;
  margin:0 0 12px;
}
p.subhead{
  font-size:16px;
  color:var(--text-secondary);
  margin:0;
  max-width:480px;
  line-height:1.6;
}
@media (min-width: 601px){
  body.page-about p.subhead{
    max-width:none;
    white-space:nowrap;
  }
}

/* =====================================================
   WORK
   ===================================================== */
.case{
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.case:first-of-type{ padding-top:0; }
.case:last-of-type{ border-bottom:none; }

.case-tag{
  display:inline-block;
  background:var(--accent-bg);
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:4px;
  margin-bottom:14px;
}
.case h2{
  font-size:22px;
  font-weight:500;
  margin:0 0 6px;
  max-width:480px;
}
.case .meta{
  font-size:13px;
  color:var(--text-muted);
  margin:0 0 22px;
}

.case-body{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:28px;
  align-items:start;
}
.case-body.stacked{ display:block; }
.case-body.stacked .case-copy{ margin-bottom:24px; }
.case-copy p{
  font-size:15px;
  line-height:1.7;
  color:var(--text-primary);
  margin:0;
}

.stat-row{
  display:flex;
  gap:24px;
  margin-top:20px;
  flex-wrap:wrap;
}
.stat .num{
  font-family: Georgia, serif;
  font-size:24px;
  font-weight:500;
  line-height:1;
}
.stat .lbl{
  font-size:11px;
  color:var(--text-muted);
  margin-top:4px;
}

.case .shot-frame{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  height:340px;
  border:1px solid var(--line);
  background:#F2F0EA;
}
.case .shot-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.shot-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.shot-split .half{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--surface);
}
.shot-split .ph-tag{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-bg);
  padding:4px 10px;
  border-radius:4px;
  margin:8px 0 0 12px;
}
.shot-split .half img{
  display:block;
  width:100%;
  height:240px;
  object-fit:cover;
  background:#F2F0EA;
}
.shot-split .half img.precise{
  height:auto;
  object-fit:cover;
}

/* =====================================================
   ABOUT
   ===================================================== */
.intro{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap:32px;
  align-items:start;
  margin-bottom:56px;
}
.intro .headshot{
  width:200px;
  height:240px;
}
.intro-copy p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-primary);
  margin:0 0 16px;
}
.intro-copy p:last-child{ margin-bottom:0; }

section.block{ margin-bottom:48px; }

.skills-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}
.skill-cat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
}
.skill-cat h4{
  font-size:13px;
  font-weight:600;
  margin:0 0 8px;
}
.skill-cat p{
  font-size:13px;
  color:var(--text-secondary);
  margin:0;
  line-height:1.6;
}

.edu-row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.edu-row:last-child{ border-bottom:none; }
.edu-row .when{
  font-size:13px;
  color:var(--text-muted);
}
.edu-row h4{
  font-size:15px;
  font-weight:600;
  margin:0 0 4px;
}
.edu-row p{
  font-size:13px;
  color:var(--text-secondary);
  margin:0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 600px){
  header.hero h1.title{ font-size:30px; }
  header.hero{ grid-template-columns: 1fr; }
  header.hero .headshot{ width:180px; height:216px; order:-1; margin-top:0; margin-bottom:20px; }
  .about-grid{ grid-template-columns: 1fr; gap:8px; }
  .work-grid{ grid-template-columns: 1fr; }
  .intro{ grid-template-columns: 1fr; }
  .intro .headshot{ width:140px; height:168px; }
  .skills-grid{ grid-template-columns: 1fr; }
  .edu-row{ grid-template-columns: 1fr; gap:4px; }
  nav .links{ gap:18px; font-size:13px; }
}

@media (max-width: 640px){
  header.page-head h1.title{ font-size:26px; }
  .case-body{ grid-template-columns: 1fr; }
  .case .shot-frame{ height:240px; }
  .shot-split{ grid-template-columns: 1fr; }
  .shot-split .half img{ height:200px; }
}