:root {
      --bg:        #ffffff;
      --bg2:       #fdf6f8;
      --bg3:       #f7edf1;
      --fg:        #1a1118;
      --muted:     rgba(26,17,24,.55);
      --muted2:    rgba(26,17,24,.32);
      --line:      rgba(26,17,24,.09);
      --pink:      #e8829a;
      --pink-deep: #c45b75;
      --pink-lt:   rgba(232,130,154,.13);
      --pink-pill: rgba(232,130,154,.18);
      --chip:      rgba(26,17,24,.04);
      --radius:    13px;
      --mono:      'IBM Plex Mono', monospace;
      --sans:      'IBM Plex Sans', system-ui, sans-serif;
    }

    [data-night="night"] {
      --bg:        #110d0f;
      --bg2:       #1b1317;
      --bg3:       #241a1e;
      --fg:        #f5eef1;
      --muted:     rgba(245,238,241,.58);
      --muted2:    rgba(245,238,241,.34);
      --line:      rgba(245,238,241,.10);
      --pink:      #e896ae;
      --pink-deep: #f0aec0;
      --pink-lt:   rgba(232,150,174,.12);
      --pink-pill: rgba(232,150,174,.18);
      --chip:      rgba(245,238,241,.05);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg);
      color: var(--fg);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .wrap { max-width: 880px; margin: 0 auto; padding: 32px 22px 100px; }

    /* ── TOP BAR ── */
    .topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .topbar-left { display:flex; align-items:center; gap:8px; }
    .status-dot {
      width:7px; height:7px; border-radius:50%; background:#7ecba1;
      animation: pulse 2.6s ease-in-out infinite; flex-shrink:0;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
    .status-label { font-family:var(--mono); font-size:11px; color:var(--muted2); letter-spacing:.04em; }
    .topbar-right { display:flex; gap:6px; flex-wrap:wrap; }

    .pill {
      font-family:var(--mono); font-size:11px; letter-spacing:.04em;
      padding:5px 14px; border:1px solid var(--line); border-radius:999px;
      color:var(--muted); background:transparent; cursor:pointer;
      transition:all .18s ease; text-decoration:none;
      display:inline-flex; align-items:center; gap:4px;
    }
    .pill:hover  { border-color:var(--pink); color:var(--pink-deep); background:var(--pink-lt); }
    .pill:focus  { outline:2px solid var(--pink); outline-offset:2px; }
    .pill.solid  { background:var(--pink); color:#fff; border-color:var(--pink); }
    .pill.solid:hover { background:var(--pink-deep); border-color:var(--pink-deep); }

    hr.div { border:none; border-top:1px solid var(--line); margin:52px 0; }

    /* ── HERO ── */
    .hero { margin-top:68px; }
    .hero-eyebrow {
      font-family:var(--mono); font-size:11px; letter-spacing:.18em;
      text-transform:uppercase; color:var(--pink); margin-bottom:22px;
      opacity:0; animation:fadeUp .6s .05s forwards;
    }
    h1 {
      font-family:var(--mono);
      font-size:clamp(48px, 9vw, 86px);
      font-weight:700; line-height:1.0; letter-spacing:-.035em; margin-bottom:30px;
      opacity:0; animation:fadeUp .7s .18s forwards;
    }
    h1 .acc { color:var(--pink); }

    .hero-sub {
      font-size:16.5px; color:var(--muted); max-width:540px; line-height:1.82;
      opacity:0; animation:fadeUp .7s .3s forwards;
    }
    .hero-sub a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .18s; }
    .hero-sub a:hover { border-color:var(--pink); }

    .hero-pills {
      display:flex; flex-wrap:wrap; gap:8px; margin-top:30px;
      opacity:0; animation:fadeUp .7s .42s forwards;
    }
    .tag {
      font-family:var(--mono); font-size:11px; padding:5px 13px;
      border-radius:999px; background:var(--bg2);
      color:var(--muted); border:1px solid var(--line); letter-spacing:.03em;
    }
    .tag.hl { background:var(--pink-pill); color:var(--pink-deep); border-color:rgba(232,130,154,.28); }

    /* ── MARQUEE ── */
    .marquee-wrap {
      overflow:hidden; border-top:1px solid var(--line);
      border-bottom:1px solid var(--line); padding:13px 0; margin:0 -22px;
    }
    .marquee-track { display:flex; gap:42px; width:max-content; animation:marquee 28s linear infinite; }
    .marquee-item {
      font-family:var(--mono); font-size:11.5px; color:var(--muted2);
      letter-spacing:.07em; white-space:nowrap; display:flex; align-items:center; gap:14px;
    }
    .marquee-item::after { content:'·'; color:var(--line); font-size:18px; }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ── SECTION LABEL ── */
    .sec-label {
      font-family:var(--mono); font-size:10px; letter-spacing:.22em;
      text-transform:uppercase; color:var(--muted2); margin-bottom:0;
      display:flex; align-items:center; gap:14px;
    }
    .sec-label::after { content:''; flex:1; height:1px; background:var(--line); }

    /* ── EXPERIENCE GALLERY (Yeji-style) ── */
    .exp-list { margin-top:0; }

    .exp-item {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:22px 0;
      border-bottom:1px solid var(--line);
      cursor:default;
      position:relative;
      overflow:hidden;
      transition:padding .35s cubic-bezier(.23,1,.32,1);
    }
    .exp-item:first-child { border-top:1px solid var(--line); }

    /* The hover fill strip */
    .exp-item::before {
      content:'';
      position:absolute;
      inset:0;
      background:var(--pink-lt);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .4s cubic-bezier(.23,1,.32,1);
      z-index:0;
    }
    .exp-item:hover::before { transform:scaleX(1); }

    .exp-left { position:relative; z-index:1; flex:1; min-width:0; }
    .exp-right { position:relative; z-index:1; display:flex; align-items:center; gap:16px; flex-shrink:0; }

    .exp-role {
      font-family:var(--mono); font-weight:600;
      font-size:clamp(16px,2.6vw,22px);
      letter-spacing:-.02em; line-height:1.2;
      transition:color .25s, transform .35s cubic-bezier(.23,1,.32,1);
    }
    .exp-item:hover .exp-role { color:var(--pink-deep); transform:translateX(6px); }

    .exp-company {
      font-family:var(--mono); font-size:12px;
      color:var(--pink); margin-top:4px; letter-spacing:.03em;
      transition:transform .35s cubic-bezier(.23,1,.32,1);
    }
    .exp-item:hover .exp-company { transform:translateX(6px); }

    .exp-desc {
      font-size:13.5px; color:var(--muted); line-height:1.68;
      max-height:0; overflow:hidden;
      transition:max-height .45s cubic-bezier(.23,1,.32,1), margin-top .35s, opacity .35s;
      opacity:0; margin-top:0;
    }
    .exp-item:hover .exp-desc { max-height:120px; opacity:1; margin-top:10px; }

    .exp-date {
      font-family:var(--mono); font-size:11px;
      color:var(--muted2); letter-spacing:.03em; white-space:nowrap;
      transition:color .25s;
    }
    .exp-item:hover .exp-date { color:var(--pink); }

    /* floating image that follows cursor */
    .exp-img {
      width:140px; height:90px; border-radius:10px;
      object-fit:cover; background:var(--bg3);
      opacity:0; transform:scale(.88) rotate(-2deg);
      transition:opacity .3s, transform .35s cubic-bezier(.23,1,.32,1);
      pointer-events:none; flex-shrink:0;
      overflow:hidden; display:flex; align-items:center; justify-content:center;
    }
    .exp-item:hover .exp-img { opacity:1; transform:scale(1) rotate(0deg); }

    /* placeholder art inside each card */
    .exp-img-inner {
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      font-family:var(--mono); font-size:10px; color:var(--muted2);
      letter-spacing:.08em; text-transform:uppercase;
    }

    .exp-img.pwc    { background: linear-gradient(135deg,#ffe0e8 0%,#ffd0dc 100%); }
    .exp-img.aj     { background: linear-gradient(135deg,#e8f0ff 0%,#d8e8ff 100%); }
    .exp-img.imara  { background: linear-gradient(135deg,#e0f5e8 0%,#d0edda 100%); }
    .exp-img.wqcc   { background: linear-gradient(135deg,#f0e8ff 0%,#e4d8ff 100%); }

    /* ── PROJECT CARDS ── */
    .proj-grid { display:grid; grid-template-columns:1fr; gap:14px; }
    @media(min-width:580px){ .proj-grid{grid-template-columns:1fr 1fr} }

    .proj-card {
      background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
      padding:22px; transition:border-color .2s, transform .22s cubic-bezier(.23,1,.32,1), box-shadow .22s;
    }
    .proj-card:hover {
      border-color:var(--pink); transform:translateY(-3px);
      box-shadow:0 10px 32px rgba(232,130,154,.10);
    }
    .proj-num { font-family:var(--mono); font-size:10px; color:var(--pink); letter-spacing:.1em; margin-bottom:12px; }
    .proj-name { font-family:var(--mono); font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:9px; line-height:1.25; }
    .proj-desc { font-size:13.5px; color:var(--muted); line-height:1.68; margin-bottom:16px; }
    .proj-stack { display:flex; flex-wrap:wrap; gap:6px; }
    .chip {
      font-family:var(--mono); font-size:10px; padding:3px 9px;
      border-radius:999px; background:var(--chip);
      border:1px solid var(--line); color:var(--muted2); letter-spacing:.02em;
    }

    /* ── ABOUT ── */
    .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    @media(max-width:480px){ .about-grid{grid-template-columns:1fr} }
    .about-card { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
    .about-card-cat { font-family:var(--mono); font-size:10px; color:var(--pink); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
    .about-card-body { font-size:14px; color:var(--muted); line-height:1.72; }

    /* ── CONTACT ── */
    .contact-cute {
      font-family:var(--mono);
      font-size:clamp(13px,1.5vw,15px);
      color:var(--muted2);
      letter-spacing:.04em;
      margin-bottom:22px;
      font-style:italic;
    }
    .contact-links { display:flex; flex-wrap:wrap; gap:10px; }

    /* ── MODAL ── */
    .modalOverlay {
      position:fixed; inset:0; background:rgba(0,0,0,.35);
      backdrop-filter:blur(8px); display:none;
      align-items:center; justify-content:center; padding:18px; z-index:500;
    }
    .modal {
      width:min(680px,100%); background:var(--bg); border:1px solid var(--line);
      border-radius:18px; padding:28px; max-height:88vh; overflow-y:auto;
    }
    .modal-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
    .modal-title { font-family:var(--mono); font-size:18px; font-weight:700; letter-spacing:-.02em; }
    .skills-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
    .skill-tile {
      background:var(--bg2); border:1px solid var(--line); border-radius:10px;
      padding:14px; font-family:var(--mono); font-size:12px; color:var(--muted);
      line-height:1.55; transition:border-color .18s, transform .18s;
    }
    .skill-tile:hover { border-color:var(--pink); transform:translateY(-2px); }
    .skill-cat { font-size:9px; color:var(--pink); letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    .reveal { opacity:0; transform:translateY(20px); transition:opacity .65s cubic-bezier(.23,1,.32,1), transform .65s cubic-bezier(.23,1,.32,1); }
    .reveal.in { opacity:1; transform:translateY(0); }
    .d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}

    /* ── FOOTER ── */
    .footer {
      margin-top:72px; padding-top:24px; border-top:1px solid var(--line);
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    }
    .footer-name { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--muted2); letter-spacing:.02em; }
    .footer-hint { font-family:var(--mono); font-size:10px; color:var(--muted2); letter-spacing:.1em; }

    .emoji {
        margin-left: 0.4rem;   /* adjust to taste */
    }

        /* ── HERO PHOTO ── */
    .hero-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: start;
    }
    @media(max-width:600px) {
    .hero-layout { grid-template-columns: 1fr; }
    .hero-photo-wrap { display: flex; justify-content: center; order: -1; }
    }
    .hero-photo-wrap {
    opacity: 0;
    animation: fadeUp .8s .55s forwards;
    position: relative;
    }
    .hero-photo {
    width: 210px;
    height: 280px;
    object-fit: cover;
    object-position: center 15%;
    border-radius: 130px 130px 18px 18px;
    border: 1.5px solid var(--line);
    display: block;
    filter: saturate(.9) contrast(1.03);
    transition: transform .45s cubic-bezier(.23,1,.32,1), filter .35s, box-shadow .35s;
    box-shadow: 0 8px 32px rgba(232,130,154,.12);
    }
    .hero-photo:hover {
    transform: scale(1.03) rotate(1.5deg);
    filter: saturate(1.08) contrast(1.03);
    box-shadow: 0 16px 48px rgba(232,130,154,.22);
    }
    .photo-label {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted2);
    letter-spacing: .08em;
    white-space: nowrap;
    }

    /* ── WARD NAME CYCLE ── */
    #ward-name { cursor: default; }

    .exp-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}