*{margin:0;padding:0;box-sizing:border-box}
:root{--dark:#1a1a1a;--mid:#888;--light:#aaa;--red:#c8374a;--bg:#f5f3ef;--serif:'EB Garamond',Georgia,serif;--display:'Cormorant Garamond',Georgia,serif}
body{font-family:var(--serif);color:var(--dark);background:var(--bg);font-size:17px;line-height:1.7}
a{color:inherit;text-decoration:none}

/* HEADER */
header{padding:24px 40px 0;border-bottom:1px solid #ddd}
.site-title{font-size:clamp(22px,4vw,40px);font-weight:400;font-family:var(--display);margin-bottom:18px;letter-spacing:-0.3px}
.site-title a{color:inherit}
nav{display:flex;gap:24px;padding-bottom:14px;flex-wrap:wrap}
nav a{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)}
nav a.active{color:var(--red);font-weight:600}
nav a:hover{color:var(--dark)}

/* MAIN */
main{max-width:700px;margin:0 auto;padding:48px 40px 80px}
main.wide{max-width:820px}

.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:24px}
h1.page-title{font-size:clamp(32px,6vw,60px);font-weight:400;line-height:1.1;margin-bottom:32px;font-family:var(--display)}

/* BIO */
.hero-heading{font-size:clamp(28px,5vw,52px);font-weight:400;line-height:1.2;margin-bottom:36px;font-family:var(--display)}
.hero-heading em{font-style:italic}
.bio-body p{margin-bottom:18px;color:#333;font-size:17px}

/* WRITING */
.section-title{font-size:clamp(16px,2.5vw,26px);font-style:italic;color:var(--light);margin-bottom:16px;font-weight:400;font-family:var(--display)}
.work-item{padding:14px 0;border-bottom:1px solid #e0ddd8}
.work-item:first-of-type{border-top:1px solid #e0ddd8}
.work-item h2{font-size:17px;font-weight:400;font-style:italic;font-family:var(--display)}
.work-item .desc{font-size:14px;color:var(--mid);margin-top:3px;line-height:1.55}
.writing-section{margin-bottom:40px}

/* TEACHING */
.teach-body p{color:#333;margin-bottom:18px}
.course-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid #ddd}
.course-card{padding:18px 20px;background:#eceae6}
.course-card:first-child{border-right:1px solid #ddd;border-top:3px solid var(--red)}
.course-card:last-child{border-top:3px solid #ddd}
.course-card .status{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.course-card:last-child .status{color:var(--mid)}
.course-card h2{font-size:19px;font-weight:400;font-family:var(--display)}
.appt-item{padding:16px 0;border-bottom:1px solid #e0ddd8}
.appt-item:first-of-type{border-top:1px solid #e0ddd8}
.appt-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.appt-item h2{font-size:15px;font-weight:600}
.appt-item .sub{font-size:14px;color:#555;margin-top:3px}
.appt-dates{font-size:12px;color:var(--light);white-space:nowrap;flex-shrink:0}

/* STRATEGY */
.strat-body p{color:#333;margin-bottom:18px}
.role-item{padding:18px 0;border-bottom:1px solid #e0ddd8}
.role-item:first-of-type{border-top:1px solid #e0ddd8}
.role-item h2{font-size:16px;font-weight:600}
.role-item .dates{font-size:13px;font-style:italic;color:var(--mid);margin-top:2px}
.role-item .desc{font-size:14px;color:var(--mid);margin-top:6px;line-height:1.6}
.cta-box{text-align:center;padding:40px 24px;margin-top:40px}
.cta-box h2{font-size:24px;font-style:italic;font-weight:400;margin-bottom:10px;font-family:var(--display)}
.cta-box p{font-size:14px;color:var(--mid);max-width:400px;margin:0 auto}

/* PHOTOGRAPHY */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:40px}
.photo-cell{background:#555;overflow:hidden}
.photo-cell.tall{grid-row:span 2}
.ph{height:160px}
.p1{background:linear-gradient(160deg,#ddd 0%,#aaa 40%,#ccc 100%)}
.p2{background:linear-gradient(200deg,#1a1a1a 0%,#444 100%)}
.p3{background:linear-gradient(10deg,#111 0%,#333 100%)}
.p4{background:linear-gradient(160deg,#555 0%,#333 60%,#666 100%)}
.p5{background:linear-gradient(40deg,#333 0%,#666 60%,#222 100%)}
.p6{background:linear-gradient(120deg,#ccc 0%,#999 50%,#bbb 100%)}
.p7{background:linear-gradient(170deg,#444 0%,#222 100%)}
.p8{background:linear-gradient(220deg,#111 0%,#555 100%)}
.archive-section h2{font-size:20px;font-style:italic;font-weight:400;margin-bottom:8px;font-family:var(--display)}
.archive-section p{font-size:14px;color:#555;max-width:400px;line-height:1.6;margin-bottom:16px}
.archive-btns{display:flex;gap:20px;flex-wrap:wrap}
.archive-btn{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:0}
.archive-btn:hover{color:var(--red)}
.photo-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* CONTACT */
.contact-intro{font-size:17px;line-height:1.7;margin-bottom:40px}
.contact-row{padding:24px 0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;gap:16px}
.contact-row:first-of-type{border-top:1px solid #ddd}
.contact-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}
.contact-value{font-size:clamp(16px,2.5vw,22px);font-style:italic;font-family:var(--display);word-break:break-all}
.contact-arrow{color:var(--light);font-size:18px;flex-shrink:0}
.social-links{display:flex;gap:20px;margin-top:6px;flex-wrap:wrap}
.social-link{display:flex;align-items:center;gap:7px;font-size:15px}
.social-icon{width:18px;height:18px;border:1.5px solid var(--dark);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}

footer{text-align:center;padding:32px;font-size:12px;color:var(--light);border-top:1px solid #ddd}

/* RESPONSIVE */
@media (max-width:600px){
  header{padding:20px 20px 0}
  nav{gap:16px}
  main{padding:36px 20px 64px}
  main.wide{padding:36px 20px 64px}
  .course-cards{grid-template-columns:1fr}
  .course-card:first-child{border-right:none;border-bottom:1px solid #ddd}
  .photo-grid{grid-template-columns:1fr 1fr}
  .photo-cell.tall{grid-row:span 1}
  .ph{height:130px}
  .appt-row{flex-wrap:wrap}
  footer{padding:24px 20px}
}
@media (max-width:400px){
  nav{gap:12px}
  nav a{font-size:10px}
  .photo-grid{grid-template-columns:1fr}
  .ph{height:180px}
}
