* { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --ink: #111;
      --ink2: #333;
      --ink3: #666;
      --paper: #faf9f6;
      --rule: #111;
      --red: #c0392b;
      --gap: 18px;
    }
    html, body {
      background: var(--paper);
      color: var(--ink);
      font-family: 'Source Serif 4', Georgia, serif;
      min-height: 100vh;
    }

    /* ── LAYOUT ── */
    .np { max-width: 900px; margin: 0 auto; padding: 0 20px 56px; }

    /* ── TOPBAR ── */
    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--rule);
      padding: 7px 0;
      font-size: 10px;
      letter-spacing: .07em;
      color: var(--ink3);
      text-transform: uppercase;
    }
    .tnav { display: flex; gap: 16px; flex-wrap: wrap; }
    .tnav a {
      color: var(--ink);
      text-decoration: none;
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .15s;
      padding-bottom: 2px;
    }
    .tnav a:hover { color: var(--red); }
    .tnav a.active { color: var(--red); border-bottom: 1.5px solid var(--red); }

    /* ── MASTHEAD ── */
    .masthead {
      text-align: center;
      border-bottom: 3px double var(--rule);
      padding: 18px 0 11px;
    }
    .mast-eye { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
    .mast-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(40px, 9vw, 78px);
      font-weight: 900;
      line-height: .95;
      letter-spacing: -.02em;
    }
    .mast-tag { font-style: italic; font-size: 13px; color: var(--ink3); margin-top: 6px; letter-spacing: .04em; }
    .mast-rule { border: none; border-top: 1px solid var(--rule); margin: 10px 0 3px; }
    .mast-dl {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--ink3);
      padding: 4px 0 0;
    }

    /* ── SECTION LABELS ── */
    .slabel {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--paper);
      background: var(--ink);
      padding: 2px 7px;
      display: inline-block;
      margin-bottom: 9px;
    }
    .slabel.r { background: var(--red); }

    /* ── GRIDS ── */
    .c21 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); }
    .resume-flow { display: block; }
    .resume-main { border-right: none; padding-right: 0; }
    .resume-flow .resume-skills { padding-left: 0; margin-top: 24px; }
    .resume-education { margin-bottom: 20px; }
    .c12 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); }
    .c2  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
    .c3  {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 240px));
      justify-content: center;
      gap: var(--gap);
    }
    .cdiv { border-right: 1px solid #ccc; padding-right: var(--gap); }

    /* ── RULES ── */
    .rtt { border-top: 1px solid #ccc; padding-top: 10px; }

    /* ── TYPOGRAPHY ── */
    .hed1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(22px, 4.5vw, 40px);
      font-weight: 900;
      line-height: 1.04;
      margin-bottom: 7px;
    }
    .hed2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(16px, 3vw, 26px);
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .hed3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: 5px;
    }
    .hed4 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    .dek { font-style: italic; font-size: 14px; color: var(--ink2); line-height: 1.5; margin-bottom: 8px; }
    .byl {
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink3);
      border-top: 1px solid #ccc;
      padding: 4px 0;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .body { font-size: 13.5px; line-height: 1.75; color: var(--ink2); }
    .body p { margin-bottom: .8em; }
    .body p:last-child { margin-bottom: 0; }
    
 .pq-container {
  border: none;        /* Ensures no lines appear */
   padding: 10px 8px;   /* Keeps longer quotes from wrapping too early */
  margin: 12px 0;      /* Separates it more from the paragraphs */
}

.pq {
  display: inline;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.7vw, 15px);
  line-height: 1.4;
}

.pq::before { content: '\201C'; font-size: 26px; line-height: 0; vertical-align: -7px; color: var(--ink3); margin-right: 2px; }
.pq::after { content: '\201D'; font-size: 26px; line-height: 0; vertical-align: -7px; color: var(--ink3); margin-left: 2px; }

.pq-attribution {
  display: inline;
  margin-top: 6px;
  font-family: 'Playfair Display', Georgia, serif; /* Add this line */
  font-style: normal;
  font-size: 15px;
  color: var(--ink3); /* Optional: makes it a subtle grey */
  white-space: nowrap;
}

    .rlabel { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 3px; }

    /* ── TAGS ── */
    .tag {
  display: inline;
  font-size: 12px;
  color: var(--ink2);
  font-weight: bold;
}

.tag:not(:last-child)::after {
  content: ',';
  margin: 0 4px 0 0;
  color: var(--ink3);
}

.project-skills {
  margin-top: 7px;
  margin-left: 16px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: bold;
  display: list-item;
  list-style-position: outside;
}

.homepage-project-skills {
  margin-left: 0;
  display: block;
}

.homepage-project-image {
  display: block;
  line-height: 0;
}

.homepage-project-image img {
  display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}

.homepage-project-image:hover img {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .16);
}

.homepage-project-title {
  font-size: 16px;
}

    /* ── SKILL BARS ── */
    .srow { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .sname { font-size: 12px; min-width: 128px; color: var(--ink2); font-weight: bold; }
    .strack { flex: 1; height: 5px; background: #ddd; position: relative; overflow: hidden; }
    .sfill {
      position: absolute;
      top: 0; left: 0; height: 100%;
      background: var(--ink);
      width: 0;
      transition: width 1.3s cubic-bezier(.4,0,.2,1);
    }
    .sfill.r { background: var(--red); }
    .spct { font-size: 11px; color: var(--ink3); min-width: 28px; text-align: right; }

    /* ── SKILLS LIST ── */
    .skills-list {
      margin-top: 10px;
      padding-left: 18px;

      gap: 6px 14px;
      font-size: 12px;
      color: var(--ink2);
      line-height: 1.35;
    }
    .skills-list li {
      margin: 0;
        padding: 4px 0;
          }


    /* ── TIMELINE ── */
    .tl { border-left: 2px solid var(--ink); padding-left: 16px; }
    .tli { position: relative; margin-bottom: 16px; }
    .tli::before {
      content: '';
      position: absolute;
      left: -21px; top: 4px;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--ink);
      border: 2px solid var(--paper);
      outline: 2px solid var(--ink);
    }
    .tyr { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 2px; }
    .ttl { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
    .tsub { font-size: 12px; color: var(--ink3); font-style: italic; }
    .homepage-career .tyr { font-size: 10px; }
    .homepage-career .ttl { font-size: 14px; }
    .homepage-career .tsub { font-size: 13px; }

    /* ── TABLE ROWS ── */
    .gstat { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eee; font-size: 12px;/* ADD THESE TWO LINES */
              gap: 15px;            /* Forces a gap so text never touches */
              align-items: flex-start; /* Keeps "Degrees" at the top if the info wraps */ }

    .gstat span:last-child {
  text-align: right;    /* Makes the info hug the right side */
}

    .gstat:last-child { border-bottom: none; }
    .gdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

    /* ── PROJECT CARDS ── */
    .pcard { padding-top: 10px; margin-bottom: 18px; }
    .project-link {
      display: inline-block;
      margin-top: 9px;
      color: var(--red);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .project-link:hover { color: var(--ink); }
       .resume-project-website {
         color: var(--red);
         font-size: 13px;
         font-weight: bold;
         text-decoration: underline;
         text-underline-offset: 2px;
       }
       .resume-project-website:hover { color: var(--ink); }
       .project-title-row {
         display: flex;
         align-items: baseline;
         gap: 12px;
       }
       .project-title-row .resume-project-website {
         margin-left: auto;
         flex-shrink: 0;
       }

    /* ── AD BLOCK ── */
    .adblk { border: 1px solid #ccc; padding: 12px; text-align: center; margin-top: 12px; }
    .adlbl { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #aaa; margin-bottom: 5px; }

    /* ── CONTACT FORM ── */
    .cfield {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--ink);
      background: transparent;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 13px;
      padding: 6px 2px;
      margin-bottom: 13px;
      color: var(--ink);
      outline: none;
    }
    .cfield:focus { border-bottom-color: var(--red); }
    .cfield::placeholder { color: #aaa; font-style: italic; }
    textarea.cfield { resize: vertical; }
    .cbtn {
      background: var(--ink);
      color: var(--paper);
      border: none;
      padding: 8px 22px;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .15s;
    }
    .cbtn:hover { background: var(--red); }

    /* ── META CHIPS ── */
    .mchip {
      display: inline-block;
      font-size: 9px;
      letter-spacing: .1em;
      text-transform: uppercase;
      border: 1px solid var(--ink3);
      padding: 3px 8px;
      margin: 0 3px 5px 0;
      color: var(--ink);
    }
    .mchip.on { background: var(--ink); color: var(--paper); }

    /* ── VIZ BOX ── */
    .viz-box { border: 1px solid #ccc; padding: 12px; background: #fff; margin-top: 8px; }
    .viz-ttl { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 5px; }

    /* ── ML DEMO ── */
    .ml-demo { border: 2px dashed #ccc; padding: 22px 16px; margin-top: 10px; text-align: center; }
    .ml-input {
      width: 100%;
      border: none;
      border-bottom: 1px solid #999;
      background: transparent;
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 13px;
      padding: 6px 2px;
      margin-bottom: 12px;
      outline: none;
      color: var(--ink);
    }
    .ml-input::placeholder { color: #aaa; font-style: italic; }
    .ml-result { margin-top: 14px; min-height: 40px; font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--ink); }
    .ml-sub { font-size: 11px; color: var(--ink3); letter-spacing: .05em; margin-top: 4px; }

    @keyframes tick { from { opacity: .4 } to { opacity: 1 } }
    .thinking { animation: tick .5s infinite alternate; }

    /* ── RESUME PREVIEW ── */
    .resume-preview-link { color: inherit; }
    .resume-preview-link:hover .resume-preview-box { opacity: 1; transform: scale(1.02); border-color: var(--red); }
    .resume-preview-link:hover .resume-preview-box img { filter: grayscale(0%) contrast(1.1); }

    /* ── PROFILE PICTURE ── */
    .pfp-img {
      width: 100%;
      max-width: 270px;
      height: 450px;
      display: block;
      border: 2px solid var(--ink);
      aspect-ratio: 1;
      object-fit: cover;
      margin: 0 auto 14px;
    }

    /* ── FOOTER ── */
    .footer {
      border-top: 3px double var(--rule);
      margin-top: 24px;
      padding-top: 8px;
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink3);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      .c21, .c12, .c2, .c3 { grid-template-columns: 1fr; }
      .cdiv { border-right: none; border-bottom: 1px solid #ccc; padding-right: 0; padding-bottom: var(--gap); }
      .tnav { gap: 10px; }
      .skills-list { grid-template-columns: 1fr; }
    }