:root{
    --paper:#FAF6EF;
    --paper-dim:#F0E8DA;
    --ink:#3A332B;
    --ink-soft:#8B8175;
    --line:#E2D8C6;
    --accent:#8C9A82;
    --accent-soft:#E9EDE3;
    --display: 'Fraunces', serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}

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

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}

  .wrap{
    max-width:960px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- Nav ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(250,246,239,0.9);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:960px;
    margin:0 auto;
    padding:18px 32px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .nav-name{
    font-family:var(--display);
    font-size:19px;
    font-weight:600;
    letter-spacing:0.01em;
  }
  nav ul{
    display:flex;
    gap:28px;
  }
  nav a{
    font-family:var(--mono);
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ink-soft);
    padding:6px 2px;
    border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav a:hover, nav a:focus-visible, nav a.active{
    color:var(--ink);
    border-color:var(--accent);
  }
  nav a:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
  .nav-toggle{ display:none; }

  @media (max-width:640px){
    nav ul{ gap:16px; }
    nav a{ font-size:11px; }
  }
  @media (max-width:520px){
    .nav-inner{ flex-direction:column; align-items:flex-start; gap:10px; padding:16px 24px; }
    .wrap{ padding:0 24px; }
  }

  /* ---------- Section scaffolding ---------- */
  section{
    padding:96px 0;
    border-bottom:1px solid var(--line);
  }
  section:last-of-type{ border-bottom:none; }

  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--accent);
    display:block;
    margin-bottom:14px;
  }

  h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(28px, 3.4vw, 38px);
    margin-bottom:36px;
    max-width:20ch;
  }

  /* ---------- Hero ---------- */
  #home{
    padding:120px 0 100px;
    border-bottom:1px solid var(--line);
  }
  .hero-role{
    font-family:var(--mono);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--accent);
    margin-bottom:22px;
  }
  h1{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(40px, 7vw, 68px);
    line-height:1.05;
    letter-spacing:-0.01em;
    max-width:14ch;
  }
  .hero-sub{
    margin-top:24px;
    font-size:18px;
    color:var(--ink-soft);
    max-width:52ch;
  }
  .hero-actions{
    margin-top:36px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.04em;
    padding:13px 22px;
    border-radius:2px;
    border:1px solid var(--ink);
    transition:background .15s ease, color .15s ease;
    display:inline-block;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--paper);
  }
  .btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
  .btn-ghost{
    background:transparent;
    color:var(--ink);
  }
  .btn-ghost:hover{ background:var(--paper-dim); }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  /* ---------- About ---------- */
  .about-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:56px;
  }
  .about-body p{ margin-bottom:16px; color:var(--ink-soft); font-size:15.5px; max-width:56ch; }
  .about-photo{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    object-position:center 12%;
    border-radius:10px;
    margin-bottom:24px;
    filter:grayscale(6%);
  }
  .about-facts{
    font-family:var(--mono);
    font-size:13px;
  }
  .about-facts dt{ color:var(--ink-soft); margin-top:16px; text-transform:uppercase; letter-spacing:0.08em; font-size:11px; }
  .about-facts dt:first-child{ margin-top:0; }
  .about-facts dd{ margin-top:4px; }

  @media (max-width:720px){
    .about-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Projects ---------- */
  .project{
    display:grid;
    grid-template-columns:100px 1fr;
    gap:28px;
    padding:32px 0;
    border-top:1px solid var(--line);
  }
  .project:first-of-type{ border-top:none; padding-top:0; }
  .project-index{
    font-family:var(--mono);
    font-size:13px;
    color:var(--ink-soft);
    padding-top:4px;
  }
  .project-title{
    font-family:var(--display);
    font-size:23px;
    font-weight:600;
    margin-bottom:8px;
  }
  .project-desc{ color:var(--ink-soft); font-size:15px; max-width:60ch; margin-bottom:14px; }
  .project-stack{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
  }
  .tag{
    font-family:var(--mono);
    font-size:11.5px;
    padding:4px 9px;
    background:var(--accent-soft);
    color:var(--accent);
    border-radius:2px;
  }
  .project-links{ display:flex; gap:18px; }
  .project-links a{
    font-family:var(--mono);
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.05em;
    border-bottom:1px solid var(--ink);
    padding-bottom:1px;
  }
  .project-links a:hover{ color:var(--accent); border-color:var(--accent); }

  @media (max-width:600px){
    .project{ grid-template-columns:1fr; gap:8px; }
  }

  /* ---------- Experience ---------- */
  .job{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:28px;
    padding:28px 0;
    border-top:1px solid var(--line);
  }
  .job:first-of-type{ border-top:none; padding-top:0; }
  .job-dates{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ink-soft);
    padding-top:3px;
  }
  .job-title{ font-weight:600; font-size:16.5px; margin-bottom:2px; }
  .job-company{ color:var(--accent); font-size:14px; margin-bottom:12px; font-family:var(--mono); }
  .job ul{ display:flex; flex-direction:column; gap:8px; }
  .job li{
    font-size:14.5px;
    color:var(--ink-soft);
    padding-left:16px;
    position:relative;
  }
  .job li::before{
    content:"—";
    position:absolute;
    left:0;
    color:var(--line);
  }

  @media (max-width:600px){
    .job{ grid-template-columns:1fr; gap:6px; }
  }

  /* ---------- Education ---------- */
  .edu{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:28px;
    padding:22px 0;
    border-top:1px solid var(--line);
  }
  .edu:first-of-type{ border-top:none; padding-top:0; }
  .edu-dates{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--ink-soft);
    padding-top:3px;
  }
  .edu-school{ font-weight:600; font-size:16.5px; margin-bottom:2px; }
  .edu-detail{ color:var(--ink-soft); font-size:14.5px; }

  @media (max-width:600px){
    .edu{ grid-template-columns:1fr; gap:6px; }
  }

  /* ---------- Testimonials ---------- */
  .testimonial-group{
    margin-top:48px;
  }
  .testimonial-group:first-of-type{ margin-top:0; }
  .testimonial-group h3{
    font-family:var(--mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--accent);
    margin-bottom:20px;
  }
  .testimonial{
    padding:26px 0;
    border-top:1px solid var(--line);
  }
  .testimonial:first-of-type{ border-top:none; padding-top:0; }
  .testimonial blockquote{
    font-family:var(--display);
    font-size:18px;
    font-weight:400;
    line-height:1.5;
    color:var(--ink);
    margin-bottom:14px;
  }
  .testimonial-cite{
    font-size:14px;
    color:var(--ink);
    font-weight:600;
  }
  .testimonial-source{
    font-family:var(--mono);
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    margin-top:2px;
  }
  .testimonial-context{
    margin-top:16px;
    font-size:14px;
    color:var(--ink-soft);
    font-style:italic;
  }

  /* ---------- Gallery ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  .gallery-item{
    aspect-ratio:4/3;
    border-radius:8px;
    background:var(--paper-dim);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .gallery-placeholder{
    font-family:var(--mono);
    font-size:12px;
    color:var(--ink-soft);
    text-align:center;
    padding:0 16px;
  }
  .gallery-hidden{ display:none; }

  /* Folder-style preview tile: cover image + overlay linking to all photos in the event */
  .gallery-folder{
    cursor:pointer;
    border:1px solid var(--line);
  }
  .gallery-folder:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .folder-badge{
    position:absolute;
    top:10px;
    right:10px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.04em;
    color:var(--paper);
    background:rgba(58,51,43,0.72);
    padding:4px 9px;
    border-radius:20px;
  }
  .folder-overlay{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:28px 14px 12px;
    background:linear-gradient(to top, rgba(58,51,43,0.82), rgba(58,51,43,0));
    color:var(--paper);
  }
  .folder-title{
    display:block;
    font-family:var(--display);
    font-size:15px;
    font-weight:600;
    line-height:1.2;
  }
  .folder-sub{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    color:var(--paper-dim);
    margin-top:3px;
    letter-spacing:0.03em;
  }
  .gallery-folder img{
    transition:transform .3s ease;
  }
  .gallery-folder:hover img{
    transform:scale(1.04);
  }

  @media (max-width:680px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:420px){
    .gallery-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Lightbox ---------- */
  .lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(58,51,43,0.94);
    align-items:center;
    justify-content:center;
  }
  .lightbox.active{ display:flex; }
  .lightbox-img{
    max-width:88vw;
    max-height:78vh;
    object-fit:contain;
    border-radius:6px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
  }
  .lightbox-caption{
    position:absolute;
    left:0; right:0;
    bottom:32px;
    text-align:center;
    color:var(--paper);
    font-family:var(--mono);
  }
  .lightbox-caption .lightbox-title{
    display:block;
    font-family:var(--display);
    font-size:18px;
    font-weight:600;
    margin-bottom:6px;
  }
  .lightbox-caption .lightbox-counter{
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--paper-dim);
  }
  .lightbox-close, .lightbox-prev, .lightbox-next{
    position:absolute;
    background:transparent;
    border:1px solid rgba(250,246,239,0.4);
    color:var(--paper);
    border-radius:50%;
    width:42px;
    height:42px;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s ease, border-color .15s ease;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
    background:rgba(250,246,239,0.12);
    border-color:var(--accent);
  }
  .lightbox-close{ top:24px; right:24px; }
  .lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
  .lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }

  @media (max-width:600px){
    .lightbox-prev{ left:10px; }
    .lightbox-next{ right:10px; }
    .lightbox-close{ top:14px; right:14px; }
  }

  /* ---------- Skills ---------- */
  .skills-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:36px;
  }
  .skill-group h3{
    font-family:var(--mono);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--accent);
    margin-bottom:14px;
  }
  .skill-group ul{ display:flex; flex-direction:column; gap:8px; }
  .skill-group li{ font-size:14.5px; color:var(--ink-soft); }

  @media (max-width:640px){
    .skills-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:440px){
    .skills-grid{ grid-template-columns:1fr; }
  }

  /* ---------- Contact ---------- */
  #contact{ padding-bottom:120px; }
  .contact-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:32px;
  }
  .contact-copy p{ color:var(--ink-soft); max-width:44ch; margin-top:14px; font-size:15.5px; }
  .contact-list{ display:flex; flex-direction:column; gap:10px; text-align:right; }
  .contact-list a{
    font-family:var(--mono);
    font-size:14px;
    border-bottom:1px solid transparent;
  }
  .contact-list a:hover{ border-color:var(--accent); color:var(--accent); }

  @media (max-width:600px){
    .contact-list{ text-align:left; }
  }

  footer{
    padding:28px 0 40px;
    text-align:center;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--ink-soft);
  }

/* ---------- Multi-page nav helpers ---------- */
nav a.active{ color:var(--ink); border-color:var(--accent); }

/* ---------- Event detail page ---------- */
.event-back{
  font-family:var(--mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:28px;
}
.event-back:hover{ color:var(--accent); }
.event-hero-title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(30px, 4vw, 42px);
  margin-bottom:14px;
}
.event-meta{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:18px;
  display:block;
}
.event-desc{
  color:var(--ink-soft);
  font-size:15.5px;
  max-width:64ch;
  margin-bottom:40px;
}
.event-photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.event-photo{
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  cursor:pointer;
  position:relative;
  background:var(--paper-dim);
}
.event-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.event-photo:hover img{ transform:scale(1.04); }
.event-photo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.event-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  text-align:center;
  padding:0 14px;
  cursor:default;
}

@media (max-width:680px){
  .event-photo-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  .event-photo-grid{ grid-template-columns:1fr; }
}