/* ============================================================
   Re:Jason - project lightbox
   Shared by every page that wants to open a project. Pair with
   rejason-projects.js (the data) and rejason-lightbox.js (the
   behaviour); all three are needed, and the CSS must be linked
   BEFORE rejason-mobile.css so the phone overrides still win.

   .rj-dot lives here too: the lightbox meta row uses it for the
   category colour, and pages other than the index have no other
   reason to define it.
   ============================================================ */

.rj-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;flex-shrink:0;}

.rj-overlay{display:none;position:fixed;inset:0;background:rgba(14,14,14,.75);z-index:100;align-items:center;justify-content:center;padding:24px;}
.rj-overlay.open{display:flex;}
.rj-lightbox{background:#F4F1EA;width:100%;max-width:820px;max-height:90vh;overflow-y:auto;position:relative;border-top:6px solid #FFE14A;}
.rj-lb-close{position:absolute;top:14px;right:16px;background:none;border:none;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:#0E0E0E;opacity:.72;padding:4px 8px;z-index:2;}
.rj-lb-close:hover{opacity:1;}
.rj-lb-hero{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#ccc;}.rj-lb-hero--contain{object-fit:contain!important;background:#1a1a1a!important;}
.rj-lb-body{padding:24px 28px 32px;}
.rj-lb-meta{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;flex-wrap:wrap;}
.rj-lb-title{font-family:'Fraunces',serif;font-size:38px;letter-spacing:-.02em;font-weight:400;margin:0 0 12px;line-height:1.05;}
.rj-lb-desc{font-size:14px;line-height:1.6;opacity:.8;margin:0 0 12px;max-width:600px;}
.rj-lb-desc a{color:#A8381E;text-decoration:none;border-bottom:1px solid rgba(168,56,30,.3);}
.rj-lb-filter-link{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#0E0E0E;text-decoration:none;border-bottom:1px solid rgba(14,14,14,.3);margin-right:12px;}
.rj-lb-thumbs{display:flex;gap:6px;margin:16px 0 20px;flex-wrap:wrap;}
.rj-lb-thumb{width:88px;height:66px;object-fit:cover;border:2px solid transparent;cursor:pointer;display:block;opacity:.7;transition:opacity .15s,border-color .15s;}
.rj-lb-thumb.active{border-color:#0E0E0E;opacity:1;}
.rj-lb-link{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:10px 18px;border:1.5px solid #0E0E0E;display:inline-block;font-weight:500;color:#0E0E0E;text-decoration:none;transition:background .15s,color .15s;}
.rj-lb-link:hover{background:#0E0E0E;color:#FFE14A;}

/* The eighth cell, when a project has more images than the strip shows.
   Sized to match a thumb so the row stays even. */
.rj-lb-more{width:88px;height:66px;flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;border:1.5px dashed rgba(14,14,14,.35);
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:#0E0E0E;text-decoration:none;opacity:.75;
  transition:opacity .15s,border-color .15s,background .15s;}
.rj-lb-more span{font-family:'Fraunces',serif;font-size:19px;letter-spacing:-.02em;
  font-style:italic;text-transform:none;line-height:1;}
.rj-lb-more:hover{opacity:1;border-color:#0E0E0E;background:#FFE14A;border-style:solid;}