index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsible AI — Insights</title>
<style>
  :root{
    --ink:#121311;
    --paper:#ECE7DC;
    --paper-dim:#DCD5C4;
    --line:#3A3A33;
    --accent:#A8412E; /* clay/rust */
    --accent-soft:#C9714F;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    line-height:1.5;
  }
  .wrap{max-width:1180px; margin:0 auto; padding: 64px 28px 120px;}

  header.hero{
    border-bottom:1px solid #2B2B26;
    padding-bottom:48px;
    margin-bottom:56px;
  }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent-soft);
    margin-bottom:18px;
  }
  h1{
    font-size:clamp(40px, 6vw, 76px);
    font-weight:400;
    letter-spacing:-0.01em;
    color:var(--paper);
    max-width:14ch;
  }
  h1 em{
    font-style:italic;
    color:var(--accent-soft);
  }
  .lede{
    margin-top:22px;
    max-width:62ch;
    font-size:18px;
    color:#B8B2A4;
  }

  .field-note{
    font-family:var(--mono);
    font-size:12px;
    color:#7A7468;
    margin-top:28px;
    border-left:2px solid var(--accent);
    padding-left:14px;
  }

  /* Gallery */
  .gallery-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
    flex-wrap:wrap;
  }
  .gallery-head h2{
    font-size:14px;
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.14em;
    color:#8A8475;
  }
  .count{
    font-family:var(--mono);
    font-size:12px;
    color:#5C5848;
  }

  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap:14px;
  }

  .card{
    position:relative;
    background:var(--paper-dim);
    border:1px solid #2B2B26;
    cursor:zoom-in;
    overflow:hidden;
    aspect-ratio: 4 / 3;
    transition: transform .25s ease, border-color .25s ease;
  }
  .card:hover{ transform: translateY(-3px); border-color:var(--accent-soft); }
  .card:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }

  .card img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter: grayscale(45%) contrast(1.02);
    transition: filter .3s ease, transform .4s ease;
  }
  .card:hover img{ filter:grayscale(0%); transform:scale(1.04); }

  .card .tag{
    position:absolute;
    left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(18,19,17,.92), rgba(18,19,17,0));
    color:var(--paper);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.04em;
    padding:22px 12px 10px;
    text-transform:capitalize;
  }
  .card .num{
    position:absolute;
    top:8px; left:8px;
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink);
    background:var(--accent-soft);
    padding:2px 6px;
  }

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0;
    background:rgba(10,10,9,.94);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox figure{
    max-width:min(90vw, 1000px);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .lightbox img{
    max-width:100%;
    max-height:74vh;
    object-fit:contain;
    border:1px solid #2B2B26;
    background:var(--paper-dim);
  }
  .lightbox figcaption{
    font-family:var(--mono);
    font-size:13px;
    color:#B8B2A4;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .lightbox figcaption .lbl{ color:var(--paper); text-transform:capitalize; font-size:15px; font-family:Georgia, serif; }

  .lb-close, .lb-prev, .lb-next{
    position:fixed;
    background:transparent;
    border:1px solid #3A3A33;
    color:var(--paper);
    font-family:var(--mono);
    cursor:pointer;
    transition: background .2s, border-color .2s;
  }
  .lb-close{
    top:24px; right:28px;
    width:40px; height:40px;
    font-size:16px;
  }
  .lb-prev, .lb-next{
    top:50%; transform:translateY(-50%);
    width:46px; height:46px;
    font-size:18px;
  }
  .lb-prev{ left:24px; }
  .lb-next{ right:24px; }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover{
    background:var(--accent); border-color:var(--accent);
  }

  footer{
    margin-top:80px;
    padding-top:28px;
    border-top:1px solid #2B2B26;
    font-family:var(--mono);
    font-size:12px;
    color:#5C5848;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }

  @media (max-width:520px){
    .wrap{padding:40px 18px 90px;}
    .lb-prev{left:8px;} .lb-next{right:8px;}
  }
</style>
</head>
<body>

<div class="wrap">

  <header class="hero">
    <div class="eyebrow">Field Notes / 16 Insights</div>
    <h1>Responsible AI, <em>Study Cards</em></h1>
    <p class="field-note">SOURCE: /images — 16 PNG insight cards</p>
  </header>

  <section class="gallery-head">
    <h2>Insight Index</h2>
    <span class="count">01 — 16</span>
  </section>

  <div class="grid" id="gallery"></div>

</div>

<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Image preview">
  <button class="lb-prev" id="lbPrev" aria-label="Previous image">‹</button>
  <figure>
    <img id="lbImg" src="" alt="">
    <figcaption>
      <span class="lbl" id="lbLabel"></span>
      <span id="lbIndex"></span>
    </figcaption>
  </figure>
  <button class="lb-next" id="lbNext" aria-label="Next image">›</button>
  <button class="lb-close" id="lbClose" aria-label="Close preview">✕</button>
</div>

<script>
  const images = [
    "governance-gates-high",
    "lifecycle-perspective-high",
    "ethics-bridge-high",
    "fairness-high",
    "transparency-high", 
    "privacy-high", 
    "safety-high",
    "accountability-high",
    "sustainability-high",
    "maturity-high",
    "incident-forensics-high",
    "stakeholder-grid-high",
    "wicked-problem-high",
    "challenges-high",
    "trends-high"
  ];

  const gallery = document.getElementById('gallery');

  function prettyLabel(name){
    return name.replace(/-high$/, '').replace(/-/g, ' ');
  }

  images.forEach((name, i) => {
    const card = document.createElement('div');
    card.className = 'card';
    card.tabIndex = 0;
    card.dataset.index = i;
    card.innerHTML = `
      <span class="num">${String(i+1).padStart(2,'0')}</span>
      <img src="images/${name}.png" alt="${prettyLabel(name)}" loading="lazy">
      <div class="tag">${prettyLabel(name)}</div>
    `;
    card.addEventListener('click', () => openLightbox(i));
    card.addEventListener('keydown', e => { if(e.key === 'Enter' || e.key === ' ') openLightbox(i); });
    gallery.appendChild(card);
  });

  const lightbox = document.getElementById('lightbox');
  const lbImg = document.getElementById('lbImg');
  const lbLabel = document.getElementById('lbLabel');
  const lbIndex = document.getElementById('lbIndex');
  let current = 0;

  function openLightbox(i){
    current = i;
    render();
    lightbox.classList.add('open');
  }
  function render(){
    const name = images[current];
    lbImg.src = `images/${name}.png`;
    lbImg.alt = prettyLabel(name);
    lbLabel.textContent = prettyLabel(name);
    lbIndex.textContent = `${String(current+1).padStart(2,'0')} / ${String(images.length).padStart(2,'0')}`;
  }
  function closeLightbox(){ lightbox.classList.remove('open'); }
  function next(){ current = (current + 1) % images.length; render(); }
  function prev(){ current = (current - 1 + images.length) % images.length; render(); }

  document.getElementById('lbClose').addEventListener('click', closeLightbox);
  document.getElementById('lbNext').addEventListener('click', next);
  document.getElementById('lbPrev').addEventListener('click', prev);
  lightbox.addEventListener('click', e => { if(e.target === lightbox) closeLightbox(); });

  document.addEventListener('keydown', e => {
    if(!lightbox.classList.contains('open')) return;
    if(e.key === 'Escape') closeLightbox();
    if(e.key === 'ArrowRight') next();
    if(e.key === 'ArrowLeft') prev();
  });
</script>

<div class="wrap" style="padding-top:0;">
  <footer>
    <span>RESPONSIBLE AI / INSIGHT ARCHIVE</span>
    <span>place PNGs in an "images" folder beside this file</span>
  </footer>
</div>

</body>
</html>