:root { --bg:#fafaf8; --text:#20221f; --muted:#686c65; --line:#e1e5eb; --accent:#17365d; --accent-hover:#244b78; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
  body.modal-open { overflow:hidden; }
  .wrap { width:min(1000px, calc(100% - 40px)); margin:0 auto; }
  header { padding:48px 0 28px; border-bottom:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
  h1 { margin:0; font-size:clamp(34px,6vw,52px); line-height:1.1; letter-spacing:-.055em; }
  header p { margin:10px 0 0; color:var(--muted); }
  .links { display:flex; flex-wrap:wrap; gap:10px; }
  .links a { display:inline-flex; align-items:center; justify-content:center; padding:9px 13px; border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:650; text-decoration:none; color:var(--accent); }
  .links a:hover { background:#edf2f8; border-color:#b8c7d9; color:var(--accent-hover); }
  main { padding:28px 0 60px; }
  .section-title { font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin:0 0 16px; }
  .projects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .project-button { padding:0; display:block; width:100%; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; color:inherit; text-align:left; cursor:pointer; font:inherit; transition:transform .16s ease, border-color .16s ease; }
  .project-button:hover { transform:translateY(-3px); border-color:#bfc3b5; }
  .project-button:focus-visible, .modal-close:focus-visible, .email-link:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  .project-button img { display:block; width:100%; aspect-ratio:4/3; object-fit:contain; background:#070706; }
  .project-button span { display:block; padding:14px 15px 16px; font-size:17px; line-height:1.3; font-weight:650; letter-spacing:-.02em; }
  footer { border-top:1px solid var(--line); padding:18px 0 28px; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
  .email-link { color:var(--accent); font-size:13px; font-weight:600; text-decoration:none; }
  .email-link:hover { color:var(--accent-hover); text-decoration:underline; }
  .modal-backdrop { position:fixed; inset:0; z-index:10; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(20,22,18,.72); }
  .modal-backdrop.open { display:flex; }
  .modal { position:relative; width:min(1000px,100%); height:min(780px,90vh); overflow:auto; border-radius:10px; background:var(--bg); box-shadow:0 24px 90px rgba(0,0,0,.28); }
  .modal-close { position:absolute; top:14px; right:14px; z-index:1; width:42px; height:42px; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(25,27,23,.75); color:white; font-size:25px; line-height:1; cursor:pointer; }
  .modal-cover { width:100%; height:min(52vh,470px); min-height:220px; object-fit:cover; display:block; background:#eeefe9; }
  .modal-copy { padding:26px clamp(22px,5vw,52px) 40px; }
  .modal-copy h2 { margin:0 0 12px; font-size:clamp(27px,4vw,40px); line-height:1.12; letter-spacing:-.045em;}
  .modal-copy p {   white-space: pre-line; max-width:720px; margin:0; color:var(--muted); font-size:16px; }
  @media(max-width:700px) {
    header { align-items:flex-start; flex-direction:column; padding-top:34px; }
    .projects { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .project-button span { padding:11px 12px 13px; font-size:15px; }
    .modal-backdrop { padding:12px; }
    .modal { height:92vh; }
    .modal-cover { height:38vh; }
  }
  @media(max-width:430px) { .projects { grid-template-columns:1fr; } .project-button img { aspect-ratio:16/9; } }


/* Extra images inside project popup */
.modal-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.modal-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #eeefe9;
}

/* Single images use the full gallery width */
.modal-gallery img:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .modal-gallery {
    grid-template-columns: 1fr;
  }
}
.modal-date {
  margin: 6px 0 14px;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
  font-style: italic;
}

.modal-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.modal-video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}