/* === TYPOGRAPHY === */
@font-face {
  font-family: "InterVar";
  src: url("fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Fallbacks if Inter isn't present */
:root{
  --font-sans: InterVar, Inter, ui-sans-serif, system-ui, -apple-system,
               Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
}
html, body { font-family: var(--font-sans); }

/* smooth scroll everywhere */
html { scroll-behavior: smooth; }

/* page shell */
body { background:#000; color:#fff; }

/* === THEME VARIABLES === */
:root{
  --bg:#fff; --fg:#000; --accent:#000;
}
.theme-dark{ --bg:#000; --fg:#fff; --accent:#fff; }
.theme-light{ --bg:#fff; --fg:#000; --accent:#000; }
.theme-blue{ --bg:#001034; --fg:#fff; --accent:#79FFE9; }

/* Fallback: force contrast on dark pages */
.theme-dark .pill {
  border-color: #fff !important;
  color: #fff !important;
}
.theme-dark .pill svg {
  stroke: #fff !important;
}

/* HEADER / NAV */
.site-header{
  background:var(--bg); color:var(--fg); position:sticky; top:0; z-index:100;
  padding:16px 24px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.topnav{
  display:flex; align-items:center; justify-content:space-between; max-width:1400px; margin:0 auto;
}
.topnav a{ color:var(--fg); text-decoration:none; }
.brand{ font-weight:700; font-size:16px; }
.menu{
  display:flex; gap:24px; list-style:none; margin:0; padding:0;
}
.menu a{
  padding:8px 4px; font-weight:500; transition:opacity .2s;
}
.menu a:hover{ opacity:.8; }
.menu a[aria-current="page"],
.menu a.active{
  border-bottom:2px solid var(--accent);
  color:var(--accent);
  opacity:1 !important;
}
.nav-pill{
  display:none;
  align-items:center;
  gap:8px;
  border:1.2px solid var(--accent);
  border-radius:999px; padding:6px 14px; background:transparent; color:var(--fg);
  cursor:pointer; font-family:inherit; font-size:14px;
}
/* Only allow .topnav inside header (safety) */
main .topnav { display: none !important; }

/* Mobile menu must be hidden on desktop */
.menu--mobile { display: none !important; }

@media (max-width:800px){
  .menu{ display:none !important; }
  .nav-pill{ display:inline-flex !important; }
  .menu--mobile:not([hidden]){
    display: flex !important;
    position:absolute; right:16px; top:56px; background:var(--bg);
    padding:12px 14px; border:1px solid var(--accent); border-radius:16px;
    flex-direction:column; gap:12px; box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
}

.work-main { width:min(1200px, 92vw); margin:24px auto 120px; }

/* Pill component (unified across site) */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1.2px solid var(--accent); background:transparent; color:var(--fg);
  font:inherit; cursor:pointer; text-decoration:none;
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pill:hover{ opacity:.8; }
.pill:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pill svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

.pill--floating{
  position:fixed; right:clamp(16px,2vw,24px);
  bottom:calc(env(safe-area-inset-bottom,0) + clamp(16px,2vw,24px));
  z-index:999;
  box-shadow:0 6px 24px rgba(0,0,0,.35); backdrop-filter:saturate(140%) blur(6px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  transition: opacity .2s ease, transform .2s ease;
}
.pill--floating.is-hidden{ opacity:0; pointer-events:none; transform:translateY(8px); }
.pill--raise{ transform:translateY(-64px); } /* lifts above sticky footer if needed */

/* Center helper for "other works" */
.centered-row{ display:flex; justify-content:center; margin:28px 0 10px; }
.rotate-180{ transform:rotate(180deg); }

/* cards */
.work-grid {
  display:grid; grid-template-columns: repeat(3, 358px);
  justify-content:center; gap:32px; margin:48px auto 24px;
}
.work-card {
  position:relative; display:block; width:358px; height:653px;
  border-radius:40px; outline:1.2px solid rgba(255,255,255,.7);
  overflow:hidden; background:#0a0a0a; text-decoration:none;
}
.work-card__img {
  display:block; width:100%; height:100%; object-fit:cover; filter:brightness(0.96);
}
.work-card__link {
  position:absolute; inset:0; z-index:5;
}
.work-card::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(transparent, rgba(255,255,255,.05));
  pointer-events:none;
}
.work-card:hover::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

/* disclaimer */
.work-disclaimer { margin:8px auto 22px; max-width:72ch; color:rgba(255,255,255,.85); }
.work-disclaimer p { line-height:1.5; text-align:center; }

/* Masonry layout */
.masonry{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-auto-rows:10px;   /* base unit for row spanning */
  gap:16px;
}

@media (max-width:1100px){
  .masonry{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .masonry{ grid-template-columns:1fr; }
}

.media{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:#111;
  outline:1px solid rgba(255,255,255,.12);
}

/* Critical: prevent image baseline gaps */
.media img, .media video{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.media .caption{
  position:absolute; left:10px; right:10px; bottom:8px;
  color:#fff; font-size:12px; line-height:1.2;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.media .caption {
  position:absolute; left:10px; right:10px; bottom:8px;
  color:#fff; font-size:12px; line-height:1.2; text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.media[data-type="video"]::after {
  content:"▸"; position:absolute; right:10px; top:8px;
  font-size:18px; background:rgba(0,0,0,.55); border-radius:8px; padding:2px 6px;
}

/* Legacy back-to-top removed - now using .pill--floating */

/* responsive tweaks */
@media (max-width:1200px){
  .work-grid{ grid-template-columns:repeat(3, min(30vw, 358px)); gap:min(3vw, 32px); }
}
@media (max-width:900px){
  .work-grid{ grid-template-columns: repeat(1, min(92vw, 420px)); }
}
@media (max-width:780px){
  .work-card{ width:100%; height:540px; border-radius:28px; }
  .masonry{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .masonry{ grid-template-columns:1fr; }
}

/* sr-only utility for accessibility */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Chevron icon rotation */
.icon-chev {
  transition: transform .2s ease;
}
.nav-pill[aria-expanded="true"] .icon-chev {
  transform: rotate(180deg);
}