/* PHOMI — Referentsid gallery page.
   Depends on the tokens + .wrap / .eyebrow / .tex--* rules in styles.css. */

/* ─── Hero ─── */
/* Flat dark header — same solid --ink as the legal-page .crumb strip
   (styles.css), so breadcrumb + hero read as one continuous dark block. */
.ref-hero{
  padding:56px 0 56px;
  background:var(--ink);
  color:#fff;
}
.ref-hero-title{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.98;
  font-size:clamp(40px,7vw,96px);
  margin:0 0 20px;
  color:#fff;
}
.ref-hero-title em{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}
.ref-hero-sub{
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.55;
  color:rgba(255,255,255,.74);
  max-width:64ch;
  margin:0;
}

/* ─── Filter bar ─── */
.ref-gallery{ padding:32px 0 96px; background:var(--paper) }
.ref-filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:8px 0 28px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:28px;
}
.ref-filter-groups{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.ref-filter-label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.ref-pills{ display:flex; gap:8px; flex-wrap:wrap }
.ref-pill{
  font-family:var(--f-sans);
  font-size:14px;
  line-height:1;
  color:var(--ink-2);
  background:var(--stone);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 16px;
  cursor:pointer;
  transition:background .2s var(--easing), color .2s var(--easing), border-color .2s var(--easing);
}
.ref-pill:hover{ border-color:var(--primary-deep) }
.ref-pill.is-active{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.ref-count{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
}

/* ─── Grid ─── */
.ref-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
@media (max-width:900px){ .ref-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .ref-grid{ grid-template-columns:1fr } }

.ref-tile{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--stone-2);
  cursor:pointer;
  text-align:left;
  box-shadow:var(--shadow-card);
  transition:transform .5s var(--easing), box-shadow .5s var(--easing);
}
.ref-tile:hover{ transform:translateY(-4px) }
.ref-tile:focus-visible{ outline:2px solid var(--primary-deep); outline-offset:3px }
.ref-tile--placeholder{ cursor:default }
/* Filter uses the `hidden` attribute; the attribute selector must beat the
   `.ref-tile{display:block}` above, or filtered-out tiles stay visible. */
.ref-tile[hidden]{ display:none }

.ref-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s var(--easing);
}
.ref-tile:hover .ref-img{ transform:scale(1.04) }

.ref-tile-type{
  position:absolute;
  top:12px;left:12px;
  z-index:2;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,255,255,.82);
  padding:5px 9px;
  border-radius:6px;
  backdrop-filter:blur(6px);
}
.ref-cap{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:44px 16px 16px;
  color:#fff;
  background:linear-gradient(to top, rgba(15,20,25,.78) 0%, rgba(15,20,25,.32) 55%, transparent 100%);
}
.ref-cap .where{ font-family:var(--f-serif); font-style:italic; font-size:18px; line-height:1.15 }
.ref-cap .what{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; opacity:.86 }

.ref-empty{
  color:var(--ink-2);
  font-size:15px;
  line-height:1.6;
  max-width:62ch;
  margin:0 0 24px;
  padding:16px 18px;
  background:var(--stone);
  border-radius:10px;
  border:1px solid var(--line-soft);
}

/* ─── Lightbox ─── */
.ref-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,48px);
}
.ref-lightbox.is-open{ display:flex }
.ref-lb-scrim{
  position:absolute;
  inset:0;
  background:rgba(9,12,14,.86);
  backdrop-filter:blur(4px);
}
.ref-lb-card{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  max-width:1200px;
  width:100%;
  max-height:88vh;
  background:var(--paper);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
}
.ref-lb-stage{
  background:#0f1419;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.ref-lb-img{
  max-width:100%;
  max-height:88vh;
  object-fit:contain;
  display:block;
}
.ref-lb-side{
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
}
.ref-lb-type{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary-deep);
}
.ref-lb-title{
  font-family:var(--f-serif);
  font-style:italic;
  font-weight:400;
  font-size:30px;
  line-height:1.1;
  margin:0;
}
.ref-lb-what{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted);
  line-height:1.6;
}
.ref-lb-nav,
.ref-lb-close{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ink);
  cursor:pointer;
  transition:background .2s var(--easing);
}
.ref-lb-nav:hover,
.ref-lb-close:hover{ background:#fff }
.ref-lb-nav svg{ width:24px; height:24px }
.ref-lb-close svg{ width:20px; height:20px }
.ref-lb-prev{ top:50%; left:14px; transform:translateY(-50%) }
.ref-lb-next{ top:50%; left:auto; right:calc(320px + 14px); transform:translateY(-50%) }
.ref-lb-close{ top:14px; right:14px }

@media (max-width:820px){
  .ref-lb-card{ grid-template-columns:1fr; max-height:92vh }
  .ref-lb-stage{ max-height:60vh }
  .ref-lb-img{ max-height:60vh }
  .ref-lb-next{ right:14px }
}