:root{
  --ink:#1C1B1A;
  --muted:#726D63;
  --paper:#F7F5F0;
  --line:#E3DFD5;
  --body:#3C3830;

  --pool:#3B8EA5;
  --coral:#DC6149;
  --moss:#6F9E6A;
  --sun:#E0A33E;
  --violet:#8A6FAE;

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:680px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:light}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.container{padding:0 24px}

header.hero,
main,
footer.site-footer{
  max-width:var(--max);
  margin:0 auto;
}

a{color:inherit}

/* ---------- HERO ---------- */
header.hero{
  padding:64px 0 8px;
  text-align:center;
}

.hero-badge{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 22px;
}

.hero-mark{
  margin:0;
  line-height:0;
}

.hero-mark img{
  width:100%;
  max-width:400px;
  height:auto;
  display:block;
  margin:0 auto;
}

.hero-tag{
  font-size:11px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--muted);
  margin:26px 0 0;
}

.hero-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:26px;
}

.hero-dots span{
  width:7px;
  height:7px;
  border-radius:50%;
  display:block;
}

.hero-dots span:nth-child(1){background:var(--pool)}
.hero-dots span:nth-child(2){background:var(--coral)}
.hero-dots span:nth-child(3){background:var(--sun)}
.hero-dots span:nth-child(4){background:var(--moss)}
.hero-dots span:nth-child(5){background:var(--violet)}

@media (max-width:560px){
  header.hero{padding-top:44px}
  .hero-mark img{max-width:300px}
  .hero-tag{letter-spacing:1.6px;margin-top:22px}
}

/* ---------- SECTIONS ---------- */
main{padding:40px 0 8px}

.section{margin-bottom:8px}

.section h2{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--sans);
  font-weight:600;
  font-size:11px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}

.chip{
  width:9px;
  height:9px;
  flex-shrink:0;
  display:block;
}

.chip-pool{background:var(--pool)}
.chip-coral{background:var(--coral)}
.chip-moss{background:var(--moss)}
.chip-sun{background:var(--sun)}

.section-intro{
  font-size:13px;
  color:var(--muted);
  font-style:italic;
  margin:0 0 22px;
}

.rule{height:1px;background:var(--line);margin:22px 0}
.rule.wide{margin:36px 0}

/* ---------- ABOUT ---------- */
.lede{
  font-size:14.5px;
  color:var(--body);
  line-height:1.65;
  margin:0 0 14px;
  max-width:56ch;
}

.lede:last-child{margin-bottom:0}

.lede a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.lede a:hover{border-bottom-color:var(--ink)}

/* ---------- POST LIST ---------- */
ul.post-list{list-style:none;margin:0;padding:0}

ul.post-list li{margin-bottom:18px}
ul.post-list li:last-child{margin-bottom:0}

ul.post-list a{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  text-decoration:none;
}

.post-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:15px;
  color:var(--ink);
  line-height:1.35;
}

ul.post-list a:hover .post-title{text-decoration:underline}

.post-date{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}

.post-sub{
  font-size:12.5px;
  color:var(--muted);
  font-style:italic;
  margin:3px 0 0;
}

/* ---------- CTA ---------- */
.cta-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:26px;
}

.btn{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-decoration:none;
  padding:11px 22px;
  transition:background .2s ease;
}

.btn:hover{background:var(--pool)}

.link-quiet{
  font-size:12.5px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.link-quiet:hover{border-bottom-color:var(--ink)}

/* ---------- PROJECT CARD ---------- */
.project{
  display:flex;
  gap:22px;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
}

.project-cover{
  flex-shrink:0;
  width:190px;
  display:block;
  border:1px solid var(--line);
  overflow:hidden;
  line-height:0;
}

.project-cover img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .3s ease;
}

.project:hover .project-cover img{transform:scale(1.03)}

.project-body{
  flex:1;
  min-width:0;
  display:block;
}

.project-kicker{
  display:block;
  font-size:10.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}

.project-title{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:19px;
  line-height:1.2;
  margin-bottom:9px;
}

.project:hover .project-title{text-decoration:underline}

.project-desc{
  display:block;
  font-size:13.5px;
  color:var(--body);
  line-height:1.6;
  margin-bottom:12px;
}

.project-note{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  font-style:italic;
  line-height:1.5;
  margin-bottom:12px;
}

.project-link{
  display:inline-block;
  font-size:12.5px;
  color:var(--ink);
  border-bottom:1px solid var(--line);
}

.project:hover .project-link{border-bottom-color:var(--ink)}

.project-link .arrow{
  display:inline-block;
  transition:margin-left .2s ease;
}

.project:hover .project-link .arrow{margin-left:5px}

.project-aside{
  font-size:12.5px;
  color:var(--muted);
  margin:26px 0 0;
}

.project-aside a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.project-aside a:hover{border-bottom-color:var(--ink)}

@media (max-width:560px){
  .project{flex-direction:column;gap:18px}
  .project-cover{width:100%;max-width:280px}
}

/* ---------- PLACEHOLDER SECTIONS ---------- */
.placeholder{
  border:1px dashed var(--line);
  padding:20px 22px;
}

.placeholder p{
  font-size:13.5px;
  color:var(--muted);
  margin:0;
  line-height:1.6;
}

.placeholder a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.placeholder a:hover{border-bottom-color:var(--ink)}

/* ---------- CONTACT ---------- */
ul.contact{list-style:none;margin:0;padding:0}
ul.contact li{margin-bottom:6px;font-size:13.5px}
ul.contact li:last-child{margin-bottom:0}
ul.contact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
ul.contact a:hover{border-bottom-color:var(--ink)}

/* ---------- FOOTER ---------- */
.site-footer{
  padding:48px 0 56px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.3px;
}