*{box-sizing:border-box;margin:0;padding:0}
:root{
  --anchor:#0F1C2E;
  --foundation:#F7F5F2;
  --bridge:#6E8F80;
  --border:#D8CBBE;
  --graphite:#4A4F55;
  --graphite-mid:#6B6B68;
  --graphite-dim:#A8A8A5;
  --white:#fff;
  --bridge-light:#F0F4F2;
}
html{scroll-behavior:smooth}

/* Page wrapper — ensures footer always sticks to bottom */
.pg{
  background:var(--foundation);
  color:var(--graphite);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.7;
  font-size:16px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.pg > .sec,
.pg > .pst{ flex:1 }

/* Nav */
.nav{background:var(--anchor);border-bottom:1px solid rgba(216,203,190,0.12);height:56px;display:flex;align-items:center;padding:0 1.75rem;justify-content:space-between;position:sticky;top:0;z-index:10}
.nav-logo{font-family:'Playfair Display',serif;font-style:italic;color:var(--foundation);font-size:1.05rem;text-decoration:none;transition:color .15s}
.nav-logo:hover{color:var(--bridge)}
.nr{display:flex;gap:1.75rem;align-items:center}
.nr a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,242,0.6);text-decoration:none;transition:color .15s;padding-bottom:2px;border-bottom:1px solid transparent}
.nr a:hover{color:var(--foundation);border-bottom-color:var(--bridge)}
.nr a.active{color:var(--foundation);border-bottom-color:var(--bridge)}

/* ── Hero ── */
/* The hero is a grid: text left, photo right.
   The photo fills the full height of the hero naturally — no fixed height. */
.hero{background:var(--anchor);padding:0 1.75rem}
.hi{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:3.5rem;
  align-items:stretch;  /* both cells same height */
}
.hero-text{
  padding:4.5rem 0 4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ey{font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--bridge);margin-bottom:1.5rem}
.hs{font-family:'Playfair Display',serif;font-size:2.15rem;font-weight:400;font-style:italic;line-height:1.3;color:var(--foundation);margin-bottom:1.75rem;max-width:30ch}
.hby{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.hrl{width:32px;height:1px;background:var(--bridge);flex-shrink:0}
.hn{font-size:.88rem;font-weight:500;color:var(--foundation)}
.hbtns{display:flex;gap:.75rem;flex-wrap:wrap}

/* Buttons */
.bp,.bg2{
  font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:.65rem 1.4rem;border-radius:2px;cursor:pointer;
  text-decoration:none;display:inline-block;transition:all .15s;
}
.bp{background:var(--bridge);color:var(--anchor);border:1px solid var(--bridge)}
.bp:hover{background:transparent;color:var(--bridge)}
/* ghost button — text must stay visible on hover */
.bg2{background:transparent;color:rgba(247,245,242,0.75);border:1px solid rgba(216,203,190,0.35)}
.bg2:hover{background:rgba(247,245,242,0.08);color:var(--foundation);border-color:var(--border)}

/* Photo — fills full height of the hero grid cell, no squish */
.pr{
  width:100%;
  height:100%;          /* stretches to match text column height */
  min-height:380px;     /* safety floor */
  object-fit:cover;
  object-position:center top;
  display:block;
  border-left:1px solid rgba(216,203,190,0.18);
}

/* Sections */
.sec{padding:4rem 1.75rem;background:var(--foundation);border-bottom:1px solid var(--border)}
.inner{max-width:1080px;margin:0 auto}
.slr{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.sl{font-size:.64rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bridge);white-space:nowrap}
.sr2{flex:1;height:1px;background:var(--border)}
.ag{display:grid;grid-template-columns:1fr 280px;gap:3.5rem;align-items:start}
.ah{font-family:'Playfair Display',serif;font-size:2rem;font-weight:400;line-height:1.25;color:var(--anchor);margin-bottom:1.5rem}
.ah em{font-style:italic}
.al{font-size:1.08rem;color:var(--graphite);line-height:1.75;margin-bottom:1.1rem;font-weight:400}
.ab{font-size:.98rem;color:var(--graphite-mid);line-height:1.8;margin-bottom:1rem}
.cl{font-size:.82rem;color:var(--bridge);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:500}
.cl:hover{text-decoration:underline;color:var(--anchor)}

/* Side cards */
.sc,.cc{background:var(--white);border:1px solid var(--border);border-radius:2px;margin-bottom:.85rem}
.sc{padding:.4rem 1.5rem}
.sc .row{padding:.7rem 0}
.sn{display:block;font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:400;color:var(--anchor);line-height:1;margin-bottom:.25rem}
.sl2{font-size:.74rem;color:var(--graphite-mid)}
.sdiv{height:1px;background:var(--border)}
.cc{padding:1.2rem 1.5rem}
.cl2{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bridge);margin-bottom:.5rem}
.cr{font-size:.86rem;font-weight:500;color:var(--graphite);margin-bottom:.25rem;line-height:1.45}
.cp{font-size:.76rem;color:var(--graphite-mid);line-height:1.55;margin-top:.35rem}
.pl{font-size:.82rem;color:var(--graphite-mid);line-height:1.55;margin:.25rem 0}
.plc{font-weight:500;color:var(--graphite)}

/* ── Thinking / Posts ── */
.pst{background:var(--bridge-light);padding:4rem 1.75rem;border-top:1px solid var(--border)}
.fg{display:flex;gap:3px;background:var(--white);border:1px solid var(--border);border-radius:2px;padding:3px}
.fb{background:none;border:none;padding:.28rem .8rem;font-size:.72rem;color:var(--graphite-mid);border-radius:1px;letter-spacing:.05em;cursor:pointer;font-family:'Inter',sans-serif;transition:background .12s,color .12s}
.fb.active{background:var(--anchor);color:var(--foundation);font-weight:500}
.fb:not(.active):hover{background:var(--border);color:var(--graphite)}

/* Homepage: 3-column grid */
.pg2{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
/* Writing archive: 2-column grid with rounded corners */
.pg2.archive{grid-template-columns:repeat(2,1fr)}
.pg2.archive .pc{border-radius:8px}
.pg2.archive .pc.li{border-left:3px solid var(--bridge)}

/* Post card */
.pc{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.6rem 1.75rem;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pc.li{border-left:3px solid var(--bridge);border-top-left-radius:8px;border-bottom-left-radius:8px}
.pc:hover{
  border-color:var(--bridge);
  box-shadow:0 4px 16px rgba(15,28,46,0.07);
  transform:translateY(-2px);
}
.pbd{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.7rem}
.pbd.blog{color:var(--graphite-dim)}
.pbd.li2{color:var(--bridge)}
.pc h3{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:400;line-height:1.35;color:var(--anchor);margin-bottom:.6rem;transition:color .15s}
.pc:hover h3{color:var(--bridge)}
.pc p{font-size:.86rem;color:var(--graphite-mid);line-height:1.7;flex:1;margin-bottom:1rem}
.pcf{display:flex;align-items:center;justify-content:space-between;padding-top:.8rem;border-top:1px solid var(--border);margin-top:auto}
.pd{font-size:.72rem;color:var(--graphite-dim)}
.pm{font-size:.72rem;color:var(--bridge);font-weight:500}

.viewall{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.75rem;font-size:.8rem;color:var(--anchor);text-decoration:none;font-weight:500;letter-spacing:.02em;cursor:pointer;background:none;border:none;transition:color .15s}
.viewall:hover{color:var(--bridge)}
.loading-row{grid-column:1/-1;text-align:center;color:var(--graphite-mid);font-size:.85rem;padding:2rem 0}

/* Footer — stays at bottom, never floats */
.ft{background:var(--anchor);padding:2rem 1.75rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:auto}
.fn{font-family:'Playfair Display',serif;font-style:italic;color:rgba(247,245,242,0.5);font-size:1rem}
.fi a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,245,242,0.45);text-decoration:none;transition:color .15s}
.fi a:hover{color:var(--bridge)}
.fc{font-size:.72rem;color:rgba(247,245,242,0.3)}

/* Modal */
.post-overlay{position:fixed;inset:0;background:rgba(15,28,46,0.6);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem 2rem;overflow-y:auto}
.post-modal{background:var(--white);border:1px solid var(--border);border-radius:4px;width:100%;max-width:680px;padding:2.5rem 3rem;position:relative}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:none;border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--graphite-mid);font-size:.9rem;transition:all .15s}
.modal-close:hover{border-color:var(--bridge);color:var(--bridge)}
.modal-title{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:400;color:var(--anchor);line-height:1.3;margin-bottom:.5rem}
.modal-date{font-size:.78rem;color:var(--graphite-mid);margin-bottom:1.75rem}
.modal-body-content{font-size:.98rem;color:var(--graphite);line-height:1.85;white-space:pre-wrap}
.modal-li-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.65rem 1.25rem;border:1px solid var(--border);border-radius:2px;font-size:.8rem;color:var(--bridge);text-decoration:none;transition:background .15s,border-color .15s}
.modal-li-link:hover{background:var(--bridge-light);border-color:var(--bridge)}
.hidden{display:none !important}

@media(max-width:900px){
  .pg2{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .hi{grid-template-columns:1fr}
  .pr{height:300px;min-height:0;border-left:none;border-top:1px solid rgba(216,203,190,0.18)}
  .hero-text{padding:3rem 0 2rem}
  .nav{padding:0 1.25rem}
  .nr{gap:1.1rem}
  .hs{font-size:1.7rem}
  .ag{grid-template-columns:1fr;gap:2.5rem}
  .pg2,.pg2.archive{grid-template-columns:1fr}
  .ah{font-size:1.6rem}
}