:root {
      --ink: #141414;
      --paper: #e9e7e2;
      --line: rgba(20, 20, 20, 0.28);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    /* ---------- top announcement bar ---------- */
    .announce {
      background: var(--ink);
      color: #f4f2ee;
      font-size: 11px;
      letter-spacing: 0.14em;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 26px;
      text-transform: uppercase;
    }
    .announce .right { display: flex; gap: 22px; opacity: 0.9; }

    /* ---------- main nav ---------- */
    .nav {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 22px 34px;
      position: relative;
      z-index: 5;
    }
    .nav a { color: var(--ink); text-decoration: none; }
    .nav-left, .nav-right {
      display: flex;
      gap: 30px;
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 400;
      text-transform: uppercase;
    }
    .nav-right { justify-content: flex-end; }
    .brand {
      font-size: 22px;
      font-weight: 400;
      letter-spacing: 0.26em;
      text-align: center;
    }

    /* ---------- hero ---------- */
    .hero {
      position: relative;
      height: calc(100vh - 118px);
      min-height: 520px;
      overflow: hidden;
      background:
        radial-gradient(120% 90% at 50% 8%, #f2f0ec 0%, #e7e5e0 45%, #d5d2cc 100%);
    }

    /* giant background name with grey gradient */
    .bigname {
      position: absolute;
      left: 0; right: 0;
      bottom: 14%;
      text-align: center;
      white-space: nowrap;
      font-size: 22vw;
      line-height: 0.8;
      font-weight: 500;
      letter-spacing: -0.025em;
      background: linear-gradient(180deg, #101010 0%, #2b2b2b 45%, #7d7b77 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      z-index: 1;
      user-select: none;
    }

    /* the figure, standing among the letters
       (clipped so the body ends where the big letters end — hero's 86% line) */
    .person {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 12%);
      height: 108%;
      width: auto;
      max-width: none;
      object-fit: contain;
      object-position: bottom center;
      clip-path: inset(0 0 25% 0);
      filter: grayscale(1) contrast(1.06) brightness(0.98);
      z-index: 2;
      pointer-events: none;
    }

    /* tagline top-left */
    .tagline {
      position: absolute;
      top: 6%;
      left: 34px;
      z-index: 3;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.24em;
      line-height: 2.1;
      text-transform: uppercase;
    }
    .tagline::after {
      content: "";
      display: block;
      width: 46px;
      height: 2px;
      background: var(--ink);
      margin-top: 14px;
    }

    /* bottom-left CTAs */
    .cta {
      position: absolute;
      left: 34px;
      bottom: 8%;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .btn {
      background: var(--ink);
      color: #f4f2ee;
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 400;
      text-transform: uppercase;
      padding: 15px 32px;
    }
    .link {
      color: var(--ink);
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 400;
      text-transform: uppercase;
      border-bottom: 1px solid var(--ink);
      padding-bottom: 3px;
    }

    @media (max-width: 720px) {
      .nav-left, .nav-right { display: none; }
      .nav { grid-template-columns: 1fr; }
      .bigname { font-size: 34vw; bottom: 20%; }
      .tagline { font-size: 12px; }
      .cta { flex-direction: column; align-items: flex-start; gap: 16px; }
    }

    /* ================= ABOUT SECTION ================= */
    .fade-strip {
      min-height: 0;
      position: relative;
      overflow: hidden;
      padding: 90px 6vw 110px;
      background: linear-gradient(180deg, #d5d2cc 0%, #e4e2dd 45%, #edebe6 100%);
    }

    /* ---- collapsible panels ---- */
    .about-inline {
      position: relative;
      z-index: 2;
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .panel {
      background: rgba(253, 252, 250, 0.72);
      border: 1px solid rgba(20, 20, 20, 0.08);
      border-radius: 18px;
      box-shadow:
        0 1px 2px rgba(20, 20, 20, 0.03),
        0 14px 40px -24px rgba(20, 20, 20, 0.2);
      backdrop-filter: blur(6px);
      overflow: hidden;
    }
    .panel.open {
      box-shadow:
        0 1px 2px rgba(20, 20, 20, 0.03),
        0 22px 60px -26px rgba(20, 20, 20, 0.26);
    }

    /* the clickable tab */
    .panel-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: transparent;
      border: 0;
      cursor: pointer;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 11px;
      letter-spacing: 0.32em;
      font-weight: 500;
      text-transform: uppercase;
      color: rgba(20, 20, 20, 0.74);
      padding: 20px 26px;
    }
    .panel-toggle:hover { color: #141414; background: rgba(20, 20, 20, 0.025); }
    .panel.open .panel-toggle { color: #141414; }
    .panel-count {
      margin-left: auto;
      margin-right: 14px;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: rgba(20, 20, 20, 0.58);
    }

    /* + / x indicator */
    .panel-icon {
      position: relative;
      width: 13px;
      height: 13px;
      flex: 0 0 auto;
    }
    .panel-icon::before,
    .panel-icon::after {
      content: "";
      position: absolute;
      background: currentColor;
    }
    .panel-icon::before { left: 0; top: 6px; width: 13px; height: 1.5px; }
    .panel-icon::after  { top: 0; left: 6px; width: 1.5px; height: 13px; }
    .panel.open .panel-icon::after { transform: rotate(90deg); opacity: 0; }

    /* expanding body (grid trick animates to auto height) */
    .panel-body {
      display: grid;
      grid-template-rows: 0fr;
    }
    .panel.open .panel-body { grid-template-rows: 1fr; }
    .panel-body > .panel-inner { overflow: hidden; }
    .panel-pad { padding: 4px 26px 26px; }
    .panel-pad::before {
      content: "";
      display: block;
      height: 1px;
      background: rgba(20, 20, 20, 0.1);
      margin-bottom: 22px;
    }

    /* ---- about prose ---- */
    .about-lines {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.78;
      letter-spacing: 0;
      color: #2b2b27;
    }
    .about-lines p { margin: 0 0 1.1em; }
    .about-lines p:last-of-type { margin-bottom: 0; }

    /* ---- entry lists (experience / projects) ---- */
    .entry {
      padding: 0 0 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(20, 20, 20, 0.08);
    }
    .entry:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
    .entry-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 3px;
    }
    .entry-title {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: 0.005em;
      color: #141414;
    }
    .entry-when {
      flex: 0 0 auto;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(20, 20, 20, 0.62);
      white-space: nowrap;
    }
    .entry-org {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-style: normal;
      font-size: 12.5px;
      letter-spacing: 0.01em;
      color: rgba(20, 20, 20, 0.68);
      margin-bottom: 9px;
    }
    .entry-desc {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.72;
      color: #333330;
      margin: 0;
    }
    .entry-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }
    .tag {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(20, 20, 20, 0.66);
      border: 1px solid rgba(20, 20, 20, 0.14);
      border-radius: 999px;
      padding: 4px 10px;
    }

    @media (max-width: 820px) {
      .about-inline { max-width: 92vw; }
      .entry-head { flex-direction: column; gap: 2px; }
    }

/* ================= SUBPAGES (experience / projects) ================= */
.subpage {
  min-height: calc(100vh - 118px);
  background: linear-gradient(180deg, #e7e5e0 0%, #edebe6 55%, #e9e7e2 100%);
  padding: 70px 6vw 120px;
}
.subpage-head {
  max-width: 780px;
  margin: 0 auto 46px;
}
.subpage-title {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
  color: var(--ink);
}
.subpage-sub {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.64);
  margin-top: 16px;
}
.subpage-head::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background: var(--ink);
  margin-top: 24px;
}
/* on subpages the panels are always open, no toggle chrome */
.subpage .about-inline { max-width: 780px; }
.subpage .panel { opacity: 1; transform: none; }
.subpage .panel-body { grid-template-rows: 1fr; }
.subpage .panel .entry { opacity: 1; transform: none; }
.subpage .panel-pad { padding: 30px 30px 30px; }
.subpage .panel-pad::before { display: none; }
.back-link {
  display: inline-block;
  max-width: 780px;
  margin: 0 auto 26px;
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.66);
  text-decoration: none;
  transition: color 0.2s ease;
}
.back-link:hover { color: #141414; }
.back-wrap { max-width: 780px; margin: 0 auto; }
.nav a.current { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---- certificate list ---- */
.cert-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.cert {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
}
.cert:last-child { border-bottom: 0; }
.cert-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  color: #2b2b27;
}
.cert-issuer {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
  display: block;
  margin-top: 3px;
}
.cert-links { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.cert-link {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.68);
  text-decoration: none;
  border: 1px solid rgba(20, 20, 20, 0.16);
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cert-link:hover {
  color: #141414;
  border-color: rgba(20, 20, 20, 0.62);
  background: rgba(20, 20, 20, 0.03);
}

/* paper / repo link inside an entry */
.entry-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
a.entry-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 20, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
a.entry-link:hover { border-color: #141414; opacity: 0.7; }

@media (max-width: 620px) {
  .cert { flex-direction: column; gap: 8px; }
}

/* ---- journalism clips ---- */
.clip-list { display: flex; flex-direction: column; margin-top: 2px; }
.clip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(20, 20, 20, 0.07);
}
.clip:last-child { border-bottom: 0; padding-bottom: 0; }
.clip-main { min-width: 0; }
.clip-title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #141414;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 20, 0.18);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}
.clip-title:hover { border-color: #141414; }
.clip-meta {
  display: block;
  margin-top: 7px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
}
.clip-date {
  flex: 0 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .clip { flex-direction: column; gap: 8px; }
}

/* ---- journalism photo grid ---- */
.clip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1180px;
  margin: 0 auto;
}
.clip-card {
  background: rgba(253, 252, 250, 0.72);
  border: 1px solid rgba(20, 20, 20, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.clip-card:hover {
  box-shadow: 0 18px 44px -26px rgba(20, 20, 20, 0.32);
  transform: translateY(-2px);
}
.clip-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: #ddd9d2;
}
.clip-card-body {
  padding: 20px 22px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.clip-headline {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.38;
  color: #141414;
  margin: 0 0 14px;
}
.clip-card-foot { margin-top: auto; }
.clip-byline {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(20, 20, 20, 0.68);
  margin: 0;
}
.clip-when {
  display: block;
  margin-top: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
}
.subpage.wide .subpage-head,
.subpage.wide .back-wrap { max-width: 1180px; }

@media (max-width: 980px) {
  .clip-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .clip-grid { grid-template-columns: 1fr; }
}

/* ---- carousel ---- */
.carousel { position: relative; max-width: 1180px; margin: 0 auto; }
.carousel-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .clip-card {
  flex: 0 0 calc((100% - 52px) / 3);
  scroll-snap-align: start;
}
.carousel-btn {
  position: absolute;
  top: 34%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(20, 20, 20, 0.14);
  background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(6px);
  color: #141414;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 6px 20px -10px rgba(20, 20, 20, 0.4);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  z-index: 4;
}
.carousel-btn:hover { background: #fff; border-color: rgba(20, 20, 20, 0.58); }
.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }
.carousel-btn[disabled] { opacity: 0.25; cursor: default; }

.carousel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(20, 20, 20, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active { background: rgba(20, 20, 20, 0.62); transform: scale(1.3); }

@media (max-width: 980px) {
  .carousel-track > .clip-card { flex: 0 0 calc((100% - 20px) / 2); }
  .carousel-track { gap: 20px; }
  .carousel-btn.prev { left: -8px; }
  .carousel-btn.next { right: -8px; }
}
@media (max-width: 640px) {
  .carousel-track > .clip-card { flex: 0 0 88%; }
  .carousel-btn { top: 30%; width: 36px; height: 36px; }
}

/* ---- social cards (square, Instagram) ---- */
.social-card .clip-thumb { aspect-ratio: 1 / 1; }
.social-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.62);
}
.social-excerpt {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: #292925;
  margin: 0 0 12px;
}
.section-label {
  max-width: 1180px;
  margin: 0 auto 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.68);
}
.section-label a {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(20, 20, 20, 0.66);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 20, 0.18);
  padding-bottom: 2px;
}
.section-label a:hover { color: #141414; border-color: #141414; }
.section-gap { height: 74px; }