/* ===== Base ===== */
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
}
img { max-width: 100%; display: block; }

/* ===== Links ===== */
a { color: #0c63e4; text-decoration: none; }
a:hover { text-decoration: underline; color: #084db6; }

/* ===== Layout wrappers ===== */
.container { max-width: 980px; margin: 0 auto; padding: 24px; }

/* ===== Header / Nav ===== */
header.site {
  border-bottom: 1px solid #e5e5ea;
  background: #fff;
  padding: 14px 24px;
}
header.site nav a { margin-right: 14px; color: #1a1a1a; }
header.site nav a.active { font-weight: 600; }

/* ===== Type ===== */
h1 { font-size: 2.1rem; margin: .4rem 0 .6rem; }
h2 { font-size: 1.35rem; margin: 1.2rem 0 .5rem; }
h3 { font-size: 1.1rem; margin: 1rem 0 .4rem; }
.lede { color: #4f4f56; max-width: 65ch; }
.kicker { font-size: .95rem; color: #4f4f56; }
.small { font-size: .95rem; }

/* ===== Buttons ===== */
.btnrow { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.button {
  display: inline-block;
  border: 1px solid #e5e5ea;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fafafa;
  color: #1a1a1a;
}
.button:hover { background: #f3f3f3; text-decoration: none; }

/* ===== Your current markup: .grid + .photo ===== */
/* Desktop: text left, photo right */
.grid{
  display: grid;
  grid-template-columns: 1fr 260px;  /* growy text + fixed photo column */
  gap: 32px;
  align-items: start;
}
.photo { justify-self: end; }
.photo img{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e5e5ea;
}

/* ===== Cards / Sections (used on other pages) ===== */
.card {
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
  background: #fff;
}
figure { margin: 0; }
figure img { border: 1px solid #e5e5ea; border-radius: 10px; }
.caption { font-size: .9rem; color: #4f4f56; margin-top: 8px; }

.pdf-frame {
  width: 100%;
  height: 740px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  overflow: hidden;
  background: #f9f9fb;
}

/* badges (optional) */
.badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.badge {
  font-size: .75rem;
  padding: 3px 8px;
  border: 1px solid #e5e5ea;
  border-radius: 999px;
  color: #4f4f56;
  background: #fafafa;
}

/* skill chips */
.kv { display: flex; gap: 6px; flex-wrap: wrap; }
.kv span {
  background: #f3f3f5;
  border: 1px solid #e5e5ea;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .85rem;
}

/* ===== Footer ===== */
footer.site {
  border-top: 1px solid #e5e5ea;
  color: #4f4f56;
  font-size: .9rem;
  padding: 18px 24px;
  margin-top: 30px;
  background: #fff;
}


/* --- Mobile-first: single column by default --- */
.hero, .grid {
  display: grid;
  grid-template-columns: 1fr;     /* stack by default */
  gap: 32px;
  align-items: start;
}
.hero-photo, .photo { justify-self: start; }

/* Float the headshot on desktop, stack inline on mobile */
.with-float::after { content: ""; display: table; clear: both; } /* contain the float */

.float-headshot {
  float: right;
  width: 220px;
  margin: 4px 0 16px 24px; /* space between image and text */
}
.float-headshot img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 1px solid #e5e5ea;
  display: block;
}

/* On small screens, stop floating and center it inline */
@media (max-width: 700px) {
  .float-headshot { float: none; width: 160px; margin: 12px auto 16px; }
}
/* Tighter reading width for paragraphs in the hero */
.with-float p { max-width: 75ch; }        /* try 60–66ch to taste */
.with-float .btnrow { max-width: 75ch; }  /* keeps buttons aligned with the copy */

/* On small screens, let text use full width again */
@media (max-width: 700px){
  .with-float .btnrow { max-width: none; }
}
/* Tighter hero: shrink the whole block and center it */
.with-float{
  max-width: 750px;           /* try 780–900 to taste */
  margin-left: auto;
  margin-right: auto;
}

/* Reduce the gap between text and photo */
.float-headshot{ margin-left: 16px; }  /* was 24px */

/* On wider screens, let text expand toward the photo */
@media (min-width: 700px){
  .with-float .btnrow{ max-width: none; }  /* override earlier 62ch cap */
}

/* Keep mobile behavior the same (inline + centered) */
@media (max-width: 700px){
  .float-headshot{ float: none !important; width: 160px; margin: 12px auto 16px; }
}


/* ----- Résumé page (LinkedIn-ish with dividers) ----- */
.resume { max-width: 860px; margin: 0 auto; }
.resume .section + .section { margin-top: 28px; }
.resume h2 { margin-top: 6px; }

.resume .item {
  padding: 16px 0;
}
.resume .item + .item {
  border-top: 1px solid #e5e5ea;   /* the divider line you wanted */
}

.resume .role { font-weight: 700; font-size: 1.05rem; }
.resume .company { color: #4f4f56; margin-top: 2px; }
.resume .meta { color: #6a6a73; font-size: .95rem; margin-top: 2px; }
.resume .desc { margin-top: 8px; }

@media (max-width: 700px){
  .resume { max-width: none; }
}

/* ---- Float the download button right ---- */
.download-right { margin-bottom: 8px; }
.download-right::after { content:""; display: table; clear: both; }
.download-right .button { float: right; }

/* ---- Right-floated org logos (placeholders) ---- */
.org-logo{
  float: right;
  width: 96px;
  height: 96px;
  margin: 0 0 8px 16px;           /* space between logo and text */
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  background: #fafafa;            /* shows even before images exist */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.org-logo img{
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  display: block;
}
/* contain floats inside each item */
.resume .item::after { content:""; display: table; clear: both; }

/* Mobile: stop floating so they sit inline/center */
@media (max-width: 700px){
  .download-right .button { float: none; }
  .org-logo{
    float: none;
    margin: 0 0 8px auto;         /* align to the right; use auto/auto to center */
  }
}

/* Title + button on one line */
.resume-head{
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes button to the right */
  gap: 16px;
  margin-bottom: 8px;
}
.resume-head h1{ margin: 0; }     /* remove extra gap above/below */
.resume-head .button{ white-space: nowrap; }  /* prevent wrap inside button */

/* Small screens: allow wrapping to a second line cleanly */
@media (max-width: 520px){
  .resume-head{ flex-wrap: wrap; row-gap: 8px; }
  .resume-head .button{ margin-left: auto; }  /* keeps it right-aligned when it wraps */
}

.org-logo{
  border: 3px solid #d3d6df;   /* 3px gray border */
  border-radius: 12px;
  background: #fff;
}

/* kill the inner border coming from figure img */
.org-logo img{
  border: 0 !important;        /* overrides the global figure img border */
  border-radius: 0;             /* optional: keep square inside */
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

/* keep the float + spacing (already in your sheet, repeated here in case) */
.org-logo{
  float: right;
  width: 96px;
  height: 96px;
  margin: 0 0 8px 16px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}