<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Staceyanne M. — Graphic Designer &amp; Content Creator</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300;1,9..144,700&family=Epilogue:wght@300;400;500&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 4.5rem;
    }

    body {
      margin: 0;
      padding: 0;
    }

    :root {
      --pf-bg:            #0d0c0a;
      --pf-fg:            #f0ebe2;
      --pf-muted:         #6b665f;
      --pf-accent:        #c94f1a;
      --pf-card:          #161411;
      --pf-card-hover:    #1d1a16;
      --pf-border:        rgba(240, 235, 226, 0.1);
      --pf-border-strong: rgba(240, 235, 226, 0.22);
      --pf-display:       'Fraunces', Georgia, serif;
      --pf-body:          'Epilogue', system-ui, sans-serif;
      --pf-max:           1280px;
      --pf-pad:           clamp(1.5rem, 5vw, 3rem);
    }

    /* ── Base ───────────────────────────────────────────────────── */
    .pf-root {
      background-color: var(--pf-bg);
      color: var(--pf-fg);
      font-family: var(--pf-body);
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    .pf-root a { color: inherit; text-decoration: none; }
    .pf-root img { display: block; max-width: 100%; }

    .pf-wrap {
      max-width: var(--pf-max);
      margin-inline: auto;
      padding-inline: var(--pf-pad);
    }

    /* ── HEADER / NAV ───────────────────────────────────────────── */
    .pf-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background-color: rgba(13, 12, 10, 0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--pf-border);
    }

    .pf-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 1.25rem;
    }

    .pf-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .pf-monogram {
      width: 2rem;
      height: 2rem;
      background-color: var(--pf-accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--pf-display);
      font-size: 0.875rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: -0.01em;
    }

    .pf-brandname {
      font-family: var(--pf-body);
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .pf-navlinks {
      display: flex;
      list-style: none;
      gap: 2.5rem;
      margin: 0;
      padding: 0;
    }

    .pf-navlinks a {
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--pf-muted);
      transition: color 0.2s ease;
    }

    .pf-navlinks a:hover { color: var(--pf-fg); }

    .pf-navcta {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--pf-accent);
      border: 1px solid var(--pf-accent);
      padding: 0.5rem 1.25rem;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .pf-navcta:hover {
      background-color: var(--pf-accent);
      color: #fff;
    }

    /* ── HERO ───────────────────────────────────────────────────── */
    .pf-hero {
      padding-top: clamp(5rem, 12vw, 10rem);
      padding-bottom: clamp(5rem, 10vw, 8rem);
      border-bottom: 1px solid var(--pf-border);
    }

    .pf-eyebrow {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2.5rem;
      font-size: 0.6875rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-muted);
    }

    .pf-eyebrow::before {
      content: '';
      display: block;
      width: 2.5rem;
      height: 1px;
      background-color: var(--pf-accent);
      flex-shrink: 0;
    }

    .pf-headline {
      font-family: var(--pf-display);
      font-size: clamp(3.75rem, 10vw, 9.5rem);
      font-weight: 300;
      line-height: 0.93;
      letter-spacing: -0.03em;
      margin: 0 0 3.5rem;
    }

    .pf-headline em {
      font-style: italic;
      color: var(--pf-accent);
    }

    .pf-herolower {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      max-width: 820px;
    }

    .pf-tagline {
      font-size: 1.0625rem;
      line-height: 1.75;
      color: var(--pf-muted);
      margin: 0;
    }

    .pf-stats {
      display: flex;
      gap: 3rem;
      align-items: flex-end;
    }

    .pf-statnum {
      font-family: var(--pf-display);
      font-size: 2.75rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .pf-statlabel {
      font-size: 0.6875rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--pf-muted);
      margin-top: 0.4rem;
    }

    /* ── SECTIONS ───────────────────────────────────────────────── */
    .pf-section {
      padding-block: clamp(4rem, 8vw, 7rem);
      border-bottom: 1px solid var(--pf-border);
    }

    .pf-seclabel {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.6875rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-muted);
      margin-bottom: 3.5rem;
    }

    .pf-seclabel-num { color: var(--pf-accent); }

    /* ── WORK ───────────────────────────────────────────────────── */
    .pf-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      background-color: var(--pf-border);
    }

    .pf-card {
      background-color: var(--pf-bg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .pf-thumb {
      aspect-ratio: 4 / 3;
      position: relative;
      overflow: hidden;
      cursor: zoom-in;
    }

    .pf-thumbimg {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 0.5s ease;
    }

    .pf-thumb::after {
      content: 'View Project \2192';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(13, 12, 10, 0.55);
      font-family: var(--pf-body);
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--pf-fg);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pf-card:hover .pf-thumb::after { opacity: 1; }

    .pf-cardinfo {
      padding: 1.25rem 1.5rem 1.75rem;
      background-color: var(--pf-card);
      border-top: 1px solid var(--pf-border);
      transition: background-color 0.2s ease;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .pf-card:hover .pf-cardinfo { background-color: var(--pf-card-hover); }

    .pf-cat {
      font-size: 0.625rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-accent);
      margin: 0 0 0.4rem;
    }

    .pf-projname {
      font-family: var(--pf-display);
      font-size: 1.25rem;
      font-weight: 300;
      line-height: 1.25;
      margin: 0 0 0.5rem;
    }

    .pf-projrow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 0.5rem;
    }

    .pf-client { font-size: 0.8125rem; color: var(--pf-muted); }
    .pf-year   { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--pf-muted); }

    /* ── ABOUT ──────────────────────────────────────────────────── */
    .pf-aboutgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }

    .pf-statement {
      font-family: var(--pf-display);
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      font-weight: 300;
      line-height: 1.25;
      letter-spacing: -0.025em;
      margin: 0 0 2rem;
    }

    .pf-statement em { font-style: italic; color: var(--pf-accent); }

    .pf-bio {
      font-size: 0.9375rem;
      line-height: 1.85;
      color: var(--pf-muted);
      margin: 0 0 1.5rem;
    }

    .pf-aboutlink {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--pf-accent);
      padding-bottom: 2px;
      margin-top: 1rem;
      transition: color 0.2s ease;
    }

    .pf-aboutlink:hover { color: var(--pf-accent); }

    .pf-skillhead {
      font-size: 0.625rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-muted);
      padding-bottom: 1rem;
      margin: 0 0 0.25rem;
      border-bottom: 1px solid var(--pf-border);
    }

    .pf-skills { list-style: none; margin: 0; padding: 0; }

    .pf-skills li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 0.9rem;
      border-bottom: 1px solid var(--pf-border);
      font-size: 0.9375rem;
      transition: color 0.2s ease;
      cursor: default;
    }

    .pf-skills li:hover { color: var(--pf-accent); }

    .pf-skilltag {
      font-size: 0.625rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--pf-muted);
    }

    /* ── SERVICES ───────────────────────────────────────────────── */
    .pf-services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.5px;
      background-color: var(--pf-border);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pf-service {
      background-color: var(--pf-bg);
      padding: 2.25rem 2rem;
      transition: background-color 0.2s ease;
    }

    .pf-service:hover { background-color: var(--pf-card); }

    .pf-svcnum {
      font-size: 0.625rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-accent);
      margin: 0 0 1.25rem;
    }

    .pf-svcname {
      font-family: var(--pf-display);
      font-size: 1.3125rem;
      font-weight: 300;
      line-height: 1.2;
      margin: 0 0 0.875rem;
    }

    .pf-svcdesc {
      font-size: 0.875rem;
      line-height: 1.75;
      color: var(--pf-muted);
      margin: 0;
    }

    /* ── TYPOGRAPHY PORTFOLIO ────────────────────────────────────── */
    .pf-media-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .pf-media-slot {
      aspect-ratio: 1 / 1;
      border: 1.5px dashed var(--pf-border-strong);
      cursor: pointer;
      transition: border-color 0.2s ease, background-color 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .pf-media-slot:hover {
      border-color: var(--pf-accent);
      background-color: rgba(201, 79, 26, 0.04);
    }

    .pf-media-img {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }

    .pf-media-num {
      position: absolute;
      top: 1rem;
      left: 1.25rem;
      font-size: 0.625rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-accent);
      z-index: 1;
      font-family: var(--pf-body);
    }

    /* ── FOOTER ─────────────────────────────────────────────────── */
    .pf-footer { padding-block: clamp(4rem, 8vw, 7rem); }

    .pf-fcta {
      font-family: var(--pf-display);
      font-size: clamp(2.75rem, 6.5vw, 6rem);
      font-weight: 300;
      line-height: 1.0;
      letter-spacing: -0.03em;
      margin: 0 0 3.5rem;
    }

    .pf-fcta em { font-style: italic; color: var(--pf-accent); }

    .pf-fcontact {
      display: flex;
      align-items: center;
      gap: 3rem;
      margin-bottom: 4.5rem;
      flex-wrap: wrap;
    }

    .pf-email {
      font-size: 1.125rem;
      font-weight: 400;
      border-bottom: 1px solid var(--pf-border-strong);
      padding-bottom: 2px;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .pf-email:hover { color: var(--pf-accent); border-color: var(--pf-accent); }

    .pf-socials {
      display: flex;
      gap: 2rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pf-socials a {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--pf-muted);
      transition: color 0.2s ease;
    }

    .pf-socials a:hover { color: var(--pf-fg); }

    .pf-fbot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 2rem;
      border-top: 1px solid var(--pf-border);
      font-size: 0.8125rem;
      color: var(--pf-muted);
      flex-wrap: wrap;
      gap: 1rem;
    }

    .pf-byline { font-family: var(--pf-display); font-style: italic; }

    /* ── LIGHTBOX ───────────────────────────────────────────────── */
    .pf-lb {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background-color: rgba(8, 7, 6, 0.96);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(1rem, 4vw, 3rem);
      cursor: zoom-out;
      animation: pf-lb-fade 0.45s ease;
    }

    .pf-lb.pf-lb-hidden { display: none; }

    @keyframes pf-lb-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    .pf-lb-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      max-width: min(1200px, 100%);
      max-height: 90vh;
      cursor: default;
      animation: pf-lb-rise 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes pf-lb-rise {
      from { transform: translateY(16px) scale(0.96); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }

    .pf-lb-img-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pf-lb-img {
      display: block;
      max-width: 100%;
      max-height: calc(90vh - 5.5rem);
      object-fit: contain;
      width: auto;
      height: auto;
      animation: pf-lb-img-in 0.3s ease;
    }

    @keyframes pf-lb-img-in {
      from { opacity: 0; transform: scale(0.985); }
      to   { opacity: 1; transform: scale(1); }
    }

    .pf-lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 2.75rem;
      height: 2.75rem;
      background: rgba(13, 12, 10, 0.65);
      border: 1px solid rgba(240, 235, 226, 0.15);
      color: var(--pf-fg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.125rem;
      opacity: 0.5;
      transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
      z-index: 2;
    }

    .pf-lb-nav:hover {
      opacity: 1;
      background-color: var(--pf-accent);
      border-color: var(--pf-accent);
    }

    .pf-lb-prev { left: 0.625rem; }
    .pf-lb-next { right: 0.625rem; }

    .pf-lb-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 0.875rem;
      gap: 1.5rem;
      border-top: 1px solid rgba(240, 235, 226, 0.12);
      margin-top: 0.75rem;
    }

    .pf-lb-meta { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }

    .pf-lb-cat {
      font-size: 0.625rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--pf-accent);
    }

    .pf-lb-name {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.1875rem;
      font-weight: 300;
      line-height: 1.2;
    }

    .pf-lb-client {
      font-size: 0.8125rem;
      color: var(--pf-muted);
      margin-top: 0.1rem;
    }

    .pf-lb-counter {
      font-size: 0.6875rem;
      letter-spacing: 0.1em;
      color: var(--pf-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .pf-lb-close {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      background: none;
      border: 1px solid rgba(240, 235, 226, 0.2);
      color: var(--pf-fg);
      font-size: 1.375rem;
      font-weight: 200;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease;
      font-family: 'Epilogue', system-ui, sans-serif;
    }

    .pf-lb-close:hover {
      background-color: var(--pf-accent);
      border-color: var(--pf-accent);
    }

    /* ── BACK TO TOP ─────────────────────────────────────────────── */
    .pf-top-btn {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 200;
      width: 3rem;
      height: 3rem;
      background-color: var(--pf-accent);
      color: #fff;
      border: 3px solid #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.2s ease;
    }

    .pf-top-btn.pf-top-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .pf-top-btn:hover { transform: translateY(-3px); }

    .pf-top-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 960px) {
      .pf-navlinks { display: none; }
      .pf-grid { grid-template-columns: repeat(2, 1fr); }
      .pf-aboutgrid { grid-template-columns: 1fr; }
      .pf-herolower { grid-template-columns: 1fr; }
    }

    @media (max-width: 560px) {
      .pf-navcta { display: none; }
      .pf-grid { grid-template-columns: 1fr; }
      .pf-media-grid { grid-template-columns: 1fr; }
      .pf-fcontact { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .pf-fbot { flex-direction: column; align-items: flex-start; }
    }
  </style>
</head>
<body>
<div class="pf-root">

  <!-- HEADER -->
  <header class="pf-header">
    <div class="pf-wrap">
      <nav class="pf-nav">
        <a href="#hero" class="pf-brand" aria-label="Staceyanne M. home">
          <span class="pf-monogram">SM</span>
          <span class="pf-brandname">Staceyanne M.</span>
        </a>
        <ul class="pf-navlinks" role="list">
          <li><a href="#work">Work</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <a href="mailto:ssm.cybersecurity@icloud.com" class="pf-navcta">For Booking</a>
      </nav>
    </div>
  </header>

  <!-- MAIN -->
  <main>

    <!-- Hero -->
    <section class="pf-hero" id="hero">
      <div class="pf-wrap">
        <p class="pf-eyebrow">Graphic Designer &amp; Content Creator &mdash; California</p>
        <h1 class="pf-headline">
          Craft that<br>
          <em>speaks</em><br>
          before words
        </h1>
        <div class="pf-herolower">
          <p class="pf-tagline">
            I design identities, systems, and printed matter for brands
            that refuse to be ordinary. My work lives at the intersection
            of editorial rigor and visual instinct.
          </p>
          <div class="pf-stats">
            <div>
              <div class="pf-statnum">1</div>
              <div class="pf-statlabel">Years active</div>
            </div>
            <div>
              <div class="pf-statnum">4</div>
              <div class="pf-statlabel">Projects shipped</div>
            </div>
            <div>
              <div class="pf-statnum">30d</div>
              <div class="pf-statlabel">Turnaround</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 01 Selected Work -->
    <section class="pf-section" id="work">
      <div class="pf-wrap">
        <p class="pf-seclabel">
          <span class="pf-seclabel-num">01 &mdash;</span> Selected Work
        </p>
        <div class="pf-grid" role="list" id="pf-gallery"></div>
      </div>
    </section>

    <!-- 02 About -->
    <section class="pf-section" id="about">
      <div class="pf-wrap">
        <p class="pf-seclabel">
          <span class="pf-seclabel-num">02 &mdash;</span> About
        </p>
        <div class="pf-aboutgrid">
          <div>
            <h2 class="pf-statement">
              Design is a conversation between<br>
              <em>form, function,</em><br>
              and the people in between.
            </h2>
            <p class="pf-bio">
              I&rsquo;m Staceyanne M., a California based graphic designer and content
              creator experienced at shaping how my brand and other brands present
              themselves to the world. I studied Graphic Design at MiraCosta College
              and have been independent since 2026. I&rsquo;m particularly drawn to
              projects where clarity and beauty are not competing goals.
            </p>
            <a href="mailto:ssm.cybersecurity@icloud.com" class="pf-aboutlink">
              ssm.cybersecurity@icloud.com &nbsp;&rarr;
            </a>
          </div>
          <div>
            <p class="pf-skillhead">Expertise</p>
            <ul class="pf-skills" role="list">
              <li>Brand Identity Design <span class="pf-skilltag">Core</span></li>
              <li>Art Direction <span class="pf-skilltag">Core</span></li>
              <li>Typography Systems <span class="pf-skilltag">Core</span></li>
              <li>Motion &amp; Digital <span class="pf-skilltag">Collaborating</span></li>
              <li>Design for Production <span class="pf-skilltag">Core</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <!-- 03 Services -->
    <section class="pf-section" id="services">
      <div class="pf-wrap">
        <p class="pf-seclabel">
          <span class="pf-seclabel-num">03 &mdash;</span> Services
        </p>
        <ul class="pf-services" role="list">
          <li class="pf-service">
            <p class="pf-svcnum">01</p>
            <h3 class="pf-svcname">Brand Identity</h3>
            <p class="pf-svcdesc">Logo systems, wordmarks, colour and type palettes, brand guidelines, and application across all touchpoints.</p>
          </li>
          <li class="pf-service">
            <p class="pf-svcnum">02</p>
            <h3 class="pf-svcname">Web Design</h3>
            <p class="pf-svcdesc">Purposeful, user-centered interfaces built around clear hierarchy, accessible typography, and layouts that translate seamlessly from desktop to mobile.</p>
          </li>
          <li class="pf-service">
            <p class="pf-svcnum">03</p>
            <h3 class="pf-svcname">Media Design</h3>
            <p class="pf-svcdesc">Compelling visual assets for digital and broadcast channels &mdash; motion graphics, social content, and multimedia campaigns designed to stop the scroll.</p>
          </li>
          <li class="pf-service">
            <p class="pf-svcnum">04</p>
            <h3 class="pf-svcname">Digital Design</h3>
            <p class="pf-svcdesc">Icon systems, UI components, and digital-first graphics crafted for pixel-perfect clarity across screens, resolutions, and platforms.</p>
          </li>
          <li class="pf-service">
            <p class="pf-svcnum">05</p>
            <h3 class="pf-svcname">Visual Identity</h3>
            <p class="pf-svcdesc">Cohesive brand systems &mdash; logos, colour palettes, type hierarchies, and guidelines &mdash; that give organisations a distinctive and consistent presence.</p>
          </li>
          <li class="pf-service">
            <p class="pf-svcnum">06</p>
            <h3 class="pf-svcname">Photography</h3>
            <p class="pf-svcdesc">Architectural, editorial, and lifestyle photography that captures atmosphere and detail &mdash; images that carry the weight of the story they are asked to tell.</p>
          </li>
        </ul>
      </div>
    </section>

    <!-- 04 Typography Portfolio -->
    <section class="pf-section" id="media">
      <div class="pf-wrap">
        <p class="pf-seclabel">
          <span class="pf-seclabel-num">04 &mdash;</span> Typography Portfolio
        </p>
        <div class="pf-media-grid">
          <div class="pf-media-slot" tabindex="0" aria-label="Media slot 01">
            <span class="pf-media-num">01</span>
            <img class="pf-media-img" src="src/imports/2026-05-22_19-24-42.png" alt="SM monogram mark — bold M with S ribbon" style="object-fit:contain;" />
          </div>
          <div class="pf-media-slot" tabindex="0" aria-label="Media slot 02">
            <span class="pf-media-num">02</span>
            <img class="pf-media-img" src="src/imports/2026-05-22_19-26-53.png" alt="SM monogram — interlocking serif S and M letterforms" style="object-fit:contain;" />
          </div>
          <div class="pf-media-slot" tabindex="0" aria-label="Media slot 03">
            <span class="pf-media-num">03</span>
            <img class="pf-media-img" src="src/imports/image-1.png" alt="Elegant cursive signature monogram" style="object-fit:fill;" />
          </div>
          <div class="pf-media-slot" tabindex="0" aria-label="Media slot 04">
            <span class="pf-media-num">04</span>
            <img class="pf-media-img" src="src/imports/2026-05-22_20-37-10.png" alt="SM typographic monogram composition" style="object-fit:fill;" />
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- FOOTER -->
  <footer class="pf-footer" id="contact">
    <div class="pf-wrap">
      <h2 class="pf-fcta">
        Let&rsquo;s make something<br>
        <em>remarkable</em>
      </h2>
      <div class="pf-fcontact">
        <a href="mailto:ssm.cybersecurity@icloud.com" class="pf-email">ssm.cybersecurity@icloud.com</a>
        <ul class="pf-socials" role="list">
          <li><a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
          <li><a href="#">Behance</a></li>
          <li><a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
          <li><a href="#">Are.na</a></li>
        </ul>
      </div>
      <div class="pf-fbot">
        <span>&copy; 2026 Staceyanne M. All rights reserved.</span>
        <span class="pf-byline">California &mdash; available worldwide</span>
      </div>
    </div>
  </footer>

  <!-- BACK TO TOP -->
  <a href="#hero" class="pf-top-btn" id="pf-top-btn" aria-label="Back to top">
    <svg viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"></polyline></svg>
  </a>

  <!-- LIGHTBOX -->
  <div class="pf-lb pf-lb-hidden" id="pf-lb" role="dialog" aria-modal="true">
    <div class="pf-lb-panel" id="pf-lb-panel">
      <div class="pf-lb-img-wrap" id="pf-lb-img-wrap">
        <button class="pf-lb-nav pf-lb-prev" id="pf-lb-prev" aria-label="Previous project">&#8592;</button>
        <img class="pf-lb-img" id="pf-lb-img" src="" alt="" />
        <button class="pf-lb-nav pf-lb-next" id="pf-lb-next" aria-label="Next project">&#8594;</button>
      </div>
      <div class="pf-lb-bar">
        <div class="pf-lb-meta">
          <span class="pf-lb-cat" id="pf-lb-cat"></span>
          <span class="pf-lb-name" id="pf-lb-name"></span>
          <span class="pf-lb-client" id="pf-lb-client"></span>
        </div>
        <span class="pf-lb-counter" id="pf-lb-counter"></span>
        <button class="pf-lb-close" id="pf-lb-close" aria-label="Close lightbox">&#215;</button>
      </div>
    </div>
  </div>

</div><!-- /.pf-root -->

<script>
  const projects = [
    {
      src:       'src/imports/2026-05-22_20-34-15.png',
      alt:       'Bold graphic poster — Fiction, Imagination, Withdrawal, Reflection typographic illustration',
      name:      'Project',
      category:  'Brand Identity',
      client:    'Conceptual Poster',
      year:      '2026',
      blendMode: 'hard-light'
    },
    {
      src:      'src/imports/2026-05-22_20-46-13.png',
      alt:      'Art Revisited web design — Selected Artists UI with colorful Frank Stella artwork',
      name:     'Portfolio',
      category: 'Web Design',
      client:   'Web Design Principles',
      year:     '2026'
    },
    {
      src:       'src/imports/2026-05-22_19-35-34-1.png',
      alt:       "Tūn In’ Fərnō cinematic title card over burning landscape",
      name:      'Editing & VFX',
      category:  'Media Design',
      client:    'Media Production Principles',
      year:      '2026',
      blendMode: 'difference',
      thumbBg:   '#1a35b5',
      fillImg:   true
    },
    {
      src:      'src/imports/2026-05-22_21-45-24.png',
      alt:      'Bold abstract black and grey graphic composition',
      name:     'Iconography',
      category: 'Digital Design',
      client:   'Graphic Design Principles',
      year:     '2026'
    },
    {
      src:      'src/imports/image-2.png',
      alt:      'Dramatic upward view of The Broad museum facade against blue sky',
      name:     'Architectural Photography',
      category: 'Visual Identity',
      client:   'Graphic Design Principles',
      year:     '2026',
      coverImg: true
    },
    {
      src:       'src/imports/image.png',
      alt:       'Polished chrome locomotive sculpture in a gallery',
      name:      'Outdoor Photography',
      category:  'Independent Work',
      client:    'Graphic Design Principles',
      year:      '2026',
      blendMode: 'difference',
      thumbBg:   '#1a35b5',
      coverImg:  true
    }
  ];

  /* ── Build gallery ─────────────────────────────────────────────── */
  const gallery = document.getElementById('pf-gallery');

  projects.forEach(function(p, i) {
    var article = document.createElement('article');
    article.className = 'pf-card';
    article.setAttribute('role', 'listitem');

    var objectFit = p.fillImg ? 'fill' : (p.coverImg ? 'cover' : 'contain');
    var blendStyle = p.blendMode ? 'mix-blend-mode:' + p.blendMode + ';' : '';
    var thumbBgStyle = p.thumbBg ? 'background-color:' + p.thumbBg + ';' : '';

    article.innerHTML =
      '<div class="pf-thumb" role="button" tabindex="0" aria-label="View ' + p.name + ' project" style="' + thumbBgStyle + '">' +
        '<img class="pf-thumbimg" src="' + p.src + '" alt="' + p.alt + '" style="object-fit:' + objectFit + ';' + blendStyle + '" />' +
      '</div>' +
      '<div class="pf-cardinfo">' +
        '<p class="pf-cat">' + p.category + '</p>' +
        '<h2 class="pf-projname">' + p.name + '</h2>' +
        '<div class="pf-projrow">' +
          '<span class="pf-client">' + p.client + '</span>' +
          '<span class="pf-year">' + p.year + '</span>' +
        '</div>' +
      '</div>';

    var thumb = article.querySelector('.pf-thumb');
    thumb.addEventListener('click', (function(idx) {
      return function() { openLb(idx); };
    })(i));
    thumb.addEventListener('keydown', (function(idx) {
      return function(e) { if (e.key === 'Enter') openLb(idx); };
    })(i));

    gallery.appendChild(article);
  });

  /* ── Lightbox ──────────────────────────────────────────────────── */
  var lbIndex  = null;
  var lb       = document.getElementById('pf-lb');
  var lbImg    = document.getElementById('pf-lb-img');
  var lbWrap   = document.getElementById('pf-lb-img-wrap');
  var lbCat    = document.getElementById('pf-lb-cat');
  var lbName   = document.getElementById('pf-lb-name');
  var lbClient = document.getElementById('pf-lb-client');
  var lbCounter= document.getElementById('pf-lb-counter');

  function openLb(i) {
    lbIndex = i;
    renderLb();
    lb.classList.remove('pf-lb-hidden');
    document.body.style.overflow = 'hidden';
  }

  function closeLb() {
    lb.classList.add('pf-lb-hidden');
    document.body.style.overflow = '';
    lbIndex = null;
  }

  function prevLb() {
    lbIndex = (lbIndex - 1 + projects.length) % projects.length;
    renderLb();
  }

  function nextLb() {
    lbIndex = (lbIndex + 1) % projects.length;
    renderLb();
  }

  function renderLb() {
    var p = projects[lbIndex];
    lbImg.src = p.src;
    lbImg.alt = p.alt;
    lbImg.style.mixBlendMode = p.blendMode || '';
    lbWrap.style.backgroundColor = p.thumbBg || '';
    lbCat.textContent    = p.category;
    lbName.textContent   = p.name;
    lbClient.textContent = p.client + ' — ' + p.year;
    lbCounter.textContent = (lbIndex + 1) + ' / ' + projects.length;
    /* re-trigger entry animation */
    lbImg.classList.remove('pf-lb-img');
    void lbImg.offsetWidth;
    lbImg.classList.add('pf-lb-img');
  }

  document.getElementById('pf-lb-close').addEventListener('click', closeLb);
  document.getElementById('pf-lb-prev').addEventListener('click', function(e) { e.stopPropagation(); prevLb(); });
  document.getElementById('pf-lb-next').addEventListener('click', function(e) { e.stopPropagation(); nextLb(); });
  lb.addEventListener('click', closeLb);
  document.getElementById('pf-lb-panel').addEventListener('click', function(e) { e.stopPropagation(); });

  document.addEventListener('keydown', function(e) {
    if (lbIndex === null) return;
    if (e.key === 'ArrowLeft')  prevLb();
    if (e.key === 'ArrowRight') nextLb();
    if (e.key === 'Escape')     closeLb();
  });

  /* ── Back to top ───────────────────────────────────────────────── */
  var topBtn = document.getElementById('pf-top-btn');
  var hero   = document.getElementById('hero');

  var observer = new IntersectionObserver(function(entries) {
    topBtn.classList.toggle('pf-top-visible', !entries[0].isIntersecting);
  }, { threshold: 0 });

  observer.observe(hero);
</script>
</body>
</html>
