:root{
    --ivory:#F8F5EF;
    --ivory-deep:#F1ECE2;
    --marble-vein:#E7E0D3;
    --ink:#2C2A26;
    --ink-soft:#4A463F;
    --ink-muted:#5F5A50;
    --gold:#B8860B;
    --gold-soft:#C5A572;
    --gold-pale:#D9C9A8;
    --rule:#D8CBB0;
    --serif-display:"Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
    --serif-body:"EB Garamond", Georgia, "Times New Roman", serif;
  }

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

  html{ scroll-behavior:smooth; scroll-padding-top:32px; }

  body{
    font-family:var(--serif-body);
    color:var(--ink);
    background-color:var(--ivory);
    /* Marble / ivory texture built purely from CSS gradients */
    background-image:
      radial-gradient(circle at 18% 12%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(circle at 82% 78%, rgba(231,224,211,0.55) 0%, rgba(231,224,211,0) 42%),
      linear-gradient(125deg, rgba(231,224,211,0.30) 0%, rgba(231,224,211,0) 22%),
      linear-gradient(218deg, rgba(217,201,168,0.18) 0%, rgba(217,201,168,0) 30%),
      repeating-linear-gradient(63deg, rgba(220,210,190,0.05) 0px, rgba(220,210,190,0.05) 1px, transparent 1px, transparent 9px),
      repeating-linear-gradient(153deg, rgba(214,203,176,0.04) 0px, rgba(214,203,176,0.04) 1px, transparent 1px, transparent 13px);
    background-attachment:fixed;
    line-height:1.62;
    font-size:18px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  ::selection{ background:var(--gold-pale); color:var(--ink); }

  /* ==================== SCATTERED RENAISSANCE SKETCHES ==================== */
  /* Public-domain book illustrations: Besler, Hortus Eystettensis (1640);
     Fuchs, New Kreüterbuch (1543); Gessner / Aldrovandi bestiaries (16th c.).
     Scatter is denser & more concrete toward the page edges, fading near the
     centre so body text stays clean. Per-image opacity is set inline. */
  .decor{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
  }
  .decor .d{
    position:absolute;
    height:auto;
    filter:saturate(1.05);
    mix-blend-mode:multiply;
  }
  @media (max-width:760px){
    /* drop the inner faint sketches and shrink edge ones on small screens */
    .decor .d{ display:none; }
    .decor .d:nth-child(-n+4){ display:block; width:110px !important; opacity:.22 !important; }
  }


  a{ color:var(--gold); text-decoration:none; transition:color .25s ease; }
  a:hover{ color:var(--ink); }
  a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

  .page{
    max-width:880px;
    margin:0 auto;
    padding:0 28px 96px;
  }

  /* ---------------------------------------------------------------
     HERO — grand symmetric "temple facade"
     --------------------------------------------------------------- */
  .hero{
    position:relative;
    text-align:center;
    padding:96px 0 64px;
    margin-bottom:24px;
  }

  /* The two thin gold "columns" framing the name — softened to a single hairline flourish */
  .facade{
    position:relative;
    display:inline-block;
    padding:0 48px;
    max-width:100%;
  }
  .facade::before,
  .facade::after{
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    width:1px;
    background:linear-gradient(to bottom,
      rgba(184,134,11,0) 0%,
      var(--gold-soft) 20%,
      var(--gold) 50%,
      var(--gold-soft) 80%,
      rgba(184,134,11,0) 100%);
  }
  .facade::before{ left:14px; }
  .facade::after{ right:14px; }

  /* small diamond finials at the head & foot of each hairline flourish */
  .capital,
  .base{
    position:absolute;
    width:7px;
    height:7px;
    transform:rotate(45deg);
    background:transparent;
    border:1px solid var(--gold-soft);
  }
  .capital{ top:4px; }
  .base{ bottom:4px; }
  .capital.left,  .base.left { left:11px; }
  .capital.right, .base.right{ right:11px; }

  .pediment{
    font-family:var(--serif-display);
    font-size:.74rem;
    letter-spacing:.62em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:22px;
    padding-left:.62em;
    font-weight:600;
  }

  .name{
    font-family:var(--serif-display);
    font-weight:600;
    font-size:clamp(3rem, 9vw, 5.4rem);
    line-height:1.0;
    letter-spacing:.04em;
    color:var(--ink);
    overflow-wrap:anywhere;
  }
  .name .given,
  .name .family{ display:block; }
  .name .family{ font-style:italic; font-weight:500; color:var(--ink-soft); }

  .hero-rule{
    width:160px;
    height:1px;
    margin:30px auto 24px;
    background:linear-gradient(to right, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    position:relative;
  }
  .hero-rule::after{
    content:"\2666";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    color:var(--gold);
    font-size:.7rem;
    background:var(--ivory);
    padding:0 10px;
    line-height:1;
  }

  .title{
    font-family:var(--serif-display);
    font-size:clamp(1.3rem, 3.2vw, 1.85rem);
    font-weight:500;
    color:var(--ink-soft);
    letter-spacing:.03em;
    margin-bottom:10px;
  }
  .subtitle{
    font-style:italic;
    color:var(--ink-muted);
    font-size:1.05rem;
    letter-spacing:.02em;
  }

  .contacts{
    margin-top:32px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0;
    font-size:.98rem;
    letter-spacing:.04em;
    color:var(--ink-soft);
  }
  .contacts .item{ padding:4px 18px; white-space:nowrap; }
  .contacts .sep{ color:var(--gold-soft); }
  .contacts a{ border-bottom:1px solid transparent; }
  .contacts a:hover{ border-bottom-color:var(--gold-soft); }

  /* ---------------------------------------------------------------
     SECTIONS
     --------------------------------------------------------------- */
  section{ margin-top:60px; }
  /* subtle affordance when a section is reached via an in-page / deep #hash link */
  section:target .section-label{ color:var(--gold); }
  section:target .section-rule{ width:140px; transition:width .4s ease; }

  .section-head{
    text-align:center;
    margin-bottom:40px;
  }
  .section-label{
    font-family:var(--serif-display);
    font-size:1.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.34em;
    color:var(--ink);
    padding-left:.34em;
    display:inline-block;
  }
  /* thin gold rule line under each section header */
  .section-rule{
    width:88px;
    height:1px;
    margin:14px auto 0;
    background:linear-gradient(to right, transparent, var(--gold), transparent);
    position:relative;
  }
  .section-rule::before,
  .section-rule::after{
    content:"";
    position:absolute;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--gold);
  }
  .section-rule::before{ left:-3px; }
  .section-rule::after{ right:-3px; }

  /* Summary / About */
  .summary{
    font-size:1.22rem;
    line-height:1.72;
    color:var(--ink-soft);
    text-align:center;
    max-width:740px;
    margin:0 auto;
    font-weight:400;
  }
  .summary + .summary{ margin-top:18px; }
  .summary .lead-cap{
    font-family:var(--serif-display);
    color:var(--gold);
    font-weight:600;
  }
  .summary .project-name{
    font-family:var(--serif-display);
    font-weight:600;
    color:var(--ink);
  }
  .credibility{
    margin-top:22px;
    text-align:center;
    font-style:italic;
    color:var(--ink-muted);
    font-size:1rem;
    letter-spacing:.02em;
  }
  .credibility strong{ font-style:normal; color:var(--ink-soft); font-weight:600; }

  /* ---------------------------------------------------------------
     RESEARCH INTERESTS — elegant centered list
     --------------------------------------------------------------- */
  .themes{
    list-style:none;
    margin:0 auto;
    padding:0;
    max-width:760px;
  }
  .themes li{
    position:relative;
    text-align:center;
    font-family:var(--serif-display);
    font-size:1.34rem;
    font-weight:500;
    letter-spacing:.012em;
    color:var(--ink-soft);
    padding:16px 14px;
    border-top:1px solid var(--rule);
  }
  .themes li:first-child{ border-top:none; }
  .themes li::before{
    content:"\2666";
    color:var(--gold-soft);
    font-size:.6rem;
    vertical-align:middle;
    margin-right:14px;
    position:relative;
    top:-2px;
  }
  .themes li span{
    display:block;
    font-family:var(--serif-body);
    font-style:italic;
    font-size:.94rem;
    color:var(--ink-muted);
    letter-spacing:.02em;
    margin-top:2px;
  }

  /* ---------------------------------------------------------------
     PROJECT CARDS
     --------------------------------------------------------------- */
  .cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
  }
  .card{
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg, rgba(255,255,255,0.62), rgba(241,236,226,0.5));
    border:1px solid var(--rule);
    border-radius:3px;
    padding:26px 24px 24px;
    transition:border-color .25s ease, box-shadow .3s ease, transform .3s ease;
    box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
  }
  .card:hover,
  .card:focus-within{
    border-color:var(--gold-soft);
    box-shadow:0 8px 26px -16px rgba(120,92,20,0.5);
    transform:translateY(-3px);
  }
  .card-art{
    width:96px;
    height:96px;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--rule);
    border-radius:50%;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,0.7), rgba(255,255,255,0) 62%),
      linear-gradient(180deg, rgba(248,245,239,0.9), rgba(241,236,226,0.7));
  }
  .card-art img{
    width:72px;
    height:72px;
    object-fit:contain;
    display:block;
  }
  .card-name{
    font-family:var(--serif-display);
    font-size:1.46rem;
    font-weight:600;
    letter-spacing:.015em;
    color:var(--ink);
    text-align:center;
    margin-bottom:4px;
  }
  .card-name a{ color:var(--ink); border-bottom:1px solid transparent; }
  .card-name a:hover{ color:var(--gold); border-bottom-color:var(--gold-soft); }
  .card-rule{
    width:46px;
    height:1px;
    margin:8px auto 14px;
    background:linear-gradient(to right, transparent, var(--gold-soft), transparent);
  }
  .card-desc{
    font-size:1rem;
    line-height:1.56;
    color:var(--ink-soft);
    text-align:left;
    flex:1 1 auto;
  }
  .card-tags{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--rule);
    font-size:.84rem;
    font-style:italic;
    letter-spacing:.02em;
    color:var(--ink-muted);
    text-align:center;
  }
  .card-link{
    margin-top:14px;
    text-align:center;
    font-size:.9rem;
    letter-spacing:.06em;
  }
  .card-link a{
    text-transform:uppercase;
    font-family:var(--serif-display);
    font-weight:600;
    letter-spacing:.14em;
    border-bottom:1px solid transparent;
  }
  .card-link a:hover{ border-bottom-color:var(--gold-soft); }
  .card-link a::after{ content:" \2197"; font-size:.82em; }

  /* small linked list (upstream contributions near projects / in background) */
  .inline-links{
    margin-top:34px;
    text-align:center;
    font-size:1rem;
    color:var(--ink-muted);
  }
  .inline-links .lbl{
    font-family:var(--serif-display);
    text-transform:uppercase;
    letter-spacing:.2em;
    font-size:.84rem;
    font-weight:600;
    color:var(--gold);
    display:block;
    margin-bottom:8px;
  }
  .inline-links a{ border-bottom:1px solid transparent; }
  .inline-links a:hover{ border-bottom-color:var(--gold-soft); }
  .inline-links .sep{ color:var(--gold-soft); margin:0 10px; }

  /* ---------------------------------------------------------------
     SELECTED WORK — text mentions (not cards)
     --------------------------------------------------------------- */
  .work-list{ max-width:780px; margin:0 auto; }
  .work-item{
    padding:22px 0;
    border-top:1px solid var(--rule);
  }
  .work-item:first-child{ border-top:none; padding-top:0; }
  .work-item:last-child{ padding-bottom:0; }
  .work-title{
    font-family:var(--serif-display);
    font-size:1.34rem;
    font-weight:600;
    color:var(--ink);
    letter-spacing:.01em;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:4px 18px;
  }
  .work-title .work-meta{
    font-family:var(--serif-body);
    font-size:.92rem;
    font-weight:400;
    font-style:italic;
    color:var(--ink-muted);
    white-space:nowrap;
  }
  .work-desc{
    margin-top:7px;
    font-size:1.04rem;
    color:var(--ink-soft);
    line-height:1.58;
  }
  .work-tag{
    margin-top:8px;
    font-size:.84rem;
    font-style:italic;
    letter-spacing:.03em;
    color:var(--ink-muted);
  }
  .work-tag::before{ content:"\2666"; color:var(--gold-soft); font-size:.58rem; margin-right:8px; vertical-align:middle; position:relative; top:-2px; }

  /* ---------------------------------------------------------------
     NEWS — dated feed
     --------------------------------------------------------------- */
  .news{ list-style:none; margin:0 auto; padding:0; max-width:780px; }
  .news li{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 22px;
    padding:16px 0;
    border-top:1px solid var(--rule);
  }
  .news li:first-child{ border-top:none; padding-top:0; }
  .news .date{
    flex:0 0 auto;
    font-family:var(--serif-display);
    font-weight:600;
    font-size:1.02rem;
    letter-spacing:.06em;
    color:var(--gold);
    min-width:84px;
  }
  .news .news-body{
    flex:1 1 320px;
    color:var(--ink-soft);
    font-size:1.05rem;
    line-height:1.56;
  }

  /* ---------------------------------------------------------------
     ARTICLES / WRITING — titled rows
     --------------------------------------------------------------- */
  .articles{ list-style:none; margin:0 auto; padding:0; max-width:780px; }
  .articles li{
    padding:18px 0;
    border-top:1px solid var(--rule);
  }
  .articles li:first-child{ border-top:none; padding-top:0; }
  .article-title{
    font-family:var(--serif-display);
    font-size:1.3rem;
    font-weight:600;
    color:var(--ink);
    letter-spacing:.01em;
  }
  .article-title a{ color:var(--ink); border-bottom:1px solid transparent; }
  .article-title a:hover{ color:var(--gold); border-bottom-color:var(--gold-soft); }
  .article-dek{
    margin-top:6px;
    font-size:1rem;
    color:var(--ink-soft);
    line-height:1.55;
  }
  .article-meta{
    display:inline-block;
    margin-top:8px;
    font-family:var(--serif-display);
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.76rem;
    font-weight:600;
    color:var(--gold);
    border:1px solid var(--gold-pale);
    border-radius:2px;
    padding:2px 10px;
  }

  /* ---------------------------------------------------------------
     BACKGROUND / EXPERIENCE (compact)
     --------------------------------------------------------------- */
  .entry{ margin-bottom:32px; }
  .entry:last-child{ margin-bottom:0; }
  .entry-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:baseline;
    gap:6px 20px;
    border-bottom:1px solid var(--rule);
    padding-bottom:8px;
    margin-bottom:6px;
  }
  .entry-org{
    font-family:var(--serif-display);
    font-size:1.5rem;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--ink);
  }
  .entry-meta{
    font-style:italic;
    color:var(--ink-muted);
    font-size:.96rem;
    text-align:right;
    white-space:nowrap;
  }
  .entry-role{
    font-family:var(--serif-display);
    font-size:1.14rem;
    font-style:italic;
    color:var(--gold);
    letter-spacing:.02em;
    margin-bottom:4px;
  }
  .entry-note{
    font-size:1.0rem;
    color:var(--ink-soft);
    line-height:1.55;
  }

  /* Education */
  .edu{ text-align:center; }
  .edu .school{
    font-family:var(--serif-display);
    font-size:1.5rem;
    font-weight:600;
    color:var(--ink);
    letter-spacing:.02em;
  }
  .edu .degree{
    font-style:italic;
    color:var(--gold);
    font-size:1.14rem;
    margin-top:4px;
  }
  .edu .edu-meta{
    color:var(--ink-muted);
    font-size:.98rem;
    margin-top:6px;
    font-style:italic;
  }

  /* Skills */
  .skills-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px 44px;
  }
  .skill-block{
    border-top:1px solid var(--rule);
    padding-top:14px;
  }
  .skill-block h3{
    font-family:var(--serif-display);
    font-size:.96rem;
    text-transform:uppercase;
    letter-spacing:.24em;
    color:var(--gold);
    font-weight:600;
    margin-bottom:10px;
    padding-left:.24em;
  }
  .chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .chip{
    font-size:.92rem;
    color:var(--ink-soft);
    background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(241,236,226,0.5));
    border:1px solid var(--rule);
    border-radius:2px;
    padding:4px 12px;
    letter-spacing:.02em;
    transition:border-color .25s ease, color .25s ease;
  }
  .chip:hover{ border-color:var(--gold-soft); color:var(--ink); }

  /* Footer */
  .colophon{
    margin-top:80px;
    text-align:center;
    color:var(--ink-muted);
    font-style:italic;
    font-size:.92rem;
    letter-spacing:.06em;
  }
  .colophon .mark{
    display:block;
    color:var(--gold);
    font-size:1rem;
    margin-bottom:10px;
    letter-spacing:.4em;
  }
  .colophon a{ border-bottom:1px solid transparent; }
  .colophon a:hover{ border-bottom-color:var(--gold-soft); }

  /* ---------------------------------------------------------------
     RESPONSIVE
     --------------------------------------------------------------- */
  @media (max-width:820px){
    .cards{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
  }

  @media (max-width:640px){
    body{ font-size:17px; background-attachment:scroll; }
    .page{ padding:0 20px 64px; }
    .hero{ padding:64px 0 44px; }
    .facade{ padding:0 26px; }
    .facade::before{ left:6px; }
    .facade::after{ right:6px; }
    .capital.left, .base.left{ left:3px; }
    .capital.right, .base.right{ right:3px; }
    .pediment{ letter-spacing:.42em; font-size:.66rem; }

    .contacts{ flex-direction:column; gap:2px; }
    .contacts .item{ padding:3px 0; }
    .contacts .sep{ display:none; }

    .themes li{ font-size:1.2rem; }
    .work-title{ flex-direction:column; }
    .work-title .work-meta{ white-space:normal; }
    .entry-head{ flex-direction:column; }
    .entry-meta{ text-align:left; white-space:normal; }
    .news .date{ min-width:0; }

    .skills-grid{ grid-template-columns:1fr; gap:22px; }
    .section-label{ font-size:1.4rem; letter-spacing:.24em; }

    .inline-links .sep{ display:inline-block; margin:0 7px; }
  }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    a, .card{ transition:none; }
    .card:hover, .card:focus-within{ transform:none; }
  }

/* ==================== TOP NAV (multi-page) ==================== */
.site-nav{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:0; padding:22px 16px 0; margin:0 auto;
}
.site-nav a{
  font-family:var(--serif-display); font-size:1.02rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); padding:8px 22px;
  border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease;
}
.site-nav a:hover{ color:var(--gold); }
.site-nav a[aria-current="page"]{ color:var(--gold); border-bottom-color:var(--gold-soft); }
.site-nav .nav-sep{ color:var(--gold-soft); font-size:.6rem; opacity:.7; }
@media (max-width:560px){
  .site-nav a{ padding:7px 13px; letter-spacing:.12em; font-size:.92rem; }
}
/* tighten hero when it follows the nav on inner pages */
.inner-hero{ padding-top:40px; padding-bottom:40px; }
.page-lead{ text-align:center; color:var(--ink-muted); font-style:italic; max-width:640px; margin:-18px auto 8px; }