/* Portfolio — public site stylesheet (round 17).
   Structural rules live here (fonts, layout, breakpoints, column counts, chrome,
   gallery, overlay). Single tunable values come from :root tokens emitted inline
   from theme.json (#88). */

/* ---- Self-hosted Inter (#94), no CDN ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: 0.01em; line-height: 1.2; }
img, video { display: block; max-width: 100%; height: auto; }
.icon { width: 1.2rem; height: 1.2rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---- Header: full-bleed, sticky, quiet ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand:hover { color: inherit; }
.brand-mark { font-weight: 300; font-size: 1.15rem; letter-spacing: 0.03em; }
.brand-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-nav { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.nav-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: color 120ms ease, background-color 120ms ease;
}
.nav-icon:hover { color: var(--accent); background: var(--surface); }

/* ---- Main: gutter breathing room (#92) ---- */
.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--gutter);
}

/* ---- Footer: full-bleed, one line, small ---- */
.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem var(--gutter);
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--hairline);
}
.site-footer .sep { opacity: 0.5; }

/* =====================================================================
   GALLERY (3.2)
   ===================================================================== */

/* ---- Filter bar: single-select (#91) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--gutter);
}
.filter-btn,
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.filter-btn:hover,
.chip:hover { color: var(--text); border-color: var(--text-muted); }
.filter-btn.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

/* ---- Grid: order-preserving, ragged, no masonry (#95) ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2 */
  gap: var(--gutter);
  align-items: start;                       /* natural heights -> ragged bottoms */
}
@media (min-width: 40rem) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }   /* mid: 3 */
}
@media (min-width: 72rem) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }   /* large: 4 max */
}

.gallery-empty { color: var(--text-muted); }
.gallery-notice {
  margin: 0 auto var(--gutter);
  max-width: 32rem;
  padding: 0.7rem 1rem;
  text-align: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--radius);
}

/* ---- Card ---- */
.card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.card-media { position: relative; display: block; }
.card-media img,
.card-media picture { display: block; width: 100%; height: auto; }

/* Small "contains video" badge, top-left corner (minimal image coverage). */
.card-vid {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--accent);
  pointer-events: none;
}
.card-vid svg { width: 1.02rem; height: 1.02rem; margin-left: 1px; }  /* no crop (#92) */

/* Whole-card link via stretched ::after (z1). Chips sit above it (z3). */
.card-link { position: absolute; inset: 0; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Client name below the image, inside the card's rounded rect (no scrim). */
.card-label {
  padding: 0.4rem 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text) calc(var(--card-label) * 100%), transparent);
}

/* Hover overlay is DESKTOP-ONLY (B5/B6). Touch never renders it. */
.card-overlay { display: none; }

@media (hover: hover) and (pointer: fine) {
  .card-overlay {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0.7rem;
    opacity: 0;
    transition: opacity 150ms ease;       /* no image darkening — blocks carry their own bg */
    pointer-events: none;
  }
  .card:hover .card-overlay,
  .card:focus-within .card-overlay { opacity: 1; }

  /* Year: its own little box, top-right (reveals on hover). */
  .card-year {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    color: var(--text);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) calc(var(--card-overlay) * 100%), transparent);
  }

  /* Categories above the card-text rectangle; informational (not links). */
  .card-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .card-cats .chip {
    color: var(--text);                   /* white labels */
    border-color: transparent;
    background: color-mix(in srgb, var(--bg) calc(var(--card-overlay) * 100%), transparent);
  }

  /* Card text — the only thing beneath the categories — on a rounded rect. */
  .ov-text {
    padding: 0.5rem 0.6rem;
    text-align: left;
    font-size: 0.8rem;
    color: var(--accent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) calc(var(--card-overlay) * 100%), transparent);
  }
}

/* ---- Contact overlay: :target, CSS-only (#89) ---- */
.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.contact-overlay:target { display: flex; }
.contact-scrim { position: absolute; inset: 0; background: color-mix(in srgb, #000 62%, transparent); }
.contact-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.contact-card h2 { margin-bottom: 1rem; font-size: 1.2rem; }
.contact-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  color: var(--text-muted);
}
.contact-close:hover { color: var(--accent); background: var(--bg); }
.contact-form { display: flex; flex-direction: column; gap: 0.7rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { resize: vertical; }
.contact-form button {
  margin-top: 0.2rem;
  padding: 0.55rem 0.9rem;
  font: inherit;
  cursor: pointer;
  color: var(--bg);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
}
.contact-form button:hover { filter: brightness(1.08); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Stub helper (temporary; removed as templates land) ---- */
.stub { color: var(--text-muted); }
.stub strong { color: var(--text); font-weight: 400; }

/* ---- Responsive ---- */
@media (max-width: 30rem) { .brand-desc { display: none; } }

/* ---- Accessibility floor ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   DETAIL PAGE (3.3)  — #92/#93   (text above media; boxed text + contribs)
   ===================================================================== */

.detail {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "hero" "text" "media";   /* text above media */
  gap: var(--gutter);
  align-items: start;
}
.detail.has-contribs { grid-template-areas: "hero" "contribs" "text" "media"; }

.detail-hero     { grid-area: hero; }
.detail-contribs { grid-area: contribs; }
.detail-text     { grid-area: text; }
.detail-media    { grid-area: media; }

/* Desktop: fixed contribution rail beside the hero; text still above media. */
@media (min-width: 48rem) {
  .detail.has-contribs {
    grid-template-columns: 1fr 220px;
    grid-template-areas:
      "hero  contribs"
      "text  text"
      "media media";
  }
}

/* ---- Hero ---- */
.detail-hero img,
.detail-hero picture { display: block; width: 100%; height: auto; }
.detail-hero .media-item { border-radius: var(--radius); overflow: hidden; }
/* Portrait IMAGE hero: cap height (~80vh), centered — no crop (#92). */
.detail.hero-portrait .detail-hero img {
  width: auto; max-width: 100%; max-height: 80vh; margin-inline: auto;
}

/* ---- Contributions (#93) — boxed ---- */
.detail-contribs {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
@media (max-width: 48rem) {
  .detail-contribs { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.1rem; }
}
.contrib { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; color: var(--text); }
.contrib-ico { flex: 0 0 auto; display: inline-flex; color: var(--contrib-did); }
.contrib-ico svg { display: block; }
.contrib-head {
  flex-basis: 100%;
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contrib.is-didnt .contrib-label { color: var(--text-muted); text-decoration: line-through; }
.contrib.is-didnt .contrib-ico   { color: var(--contrib-did); opacity: var(--contrib-muted); }

/* ---- Project details — boxed ---- */
.detail-text {
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.detail-title { font-size: 1.6rem; }
.detail-meta { margin-top: 0.3rem; color: var(--text-muted); }
.detail-desc { margin-top: 0.85rem; max-width: 62ch; font-weight: 400; }
.detail-desc a { color: var(--accent); }
.detail-desc strong, .detail-desc b { font-weight: 700; color: var(--text); }

/* ---- Additional media grid (max 3/row, ragged, no crop) ---- */
.detail-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 40rem) { .detail-media { grid-template-columns: 1fr; } }
.media-item { border-radius: var(--radius); overflow: hidden; }
.media-item img,
.media-item picture { display: block; width: 100%; height: auto; }
.media-video { grid-column: 1 / -1; }   /* videos get a full-width row */

/* ---- Video sizing: landscape fills width (natural height, no bars);
       square/portrait capped at 80vh + centered ---- */
.detail-video {
  display: block;
  background: #000;
  margin-inline: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.media-video--wide .detail-video { width: 100%; }
.media-video--tall .detail-video { width: auto; height: 80vh; max-width: 100%; }

/* ---- Lightbox (CSS-only :target; full-resolution image) ---- */
.zoom { display: block; cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}
.lightbox:target { display: flex; }
.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.lightbox-fig { position: relative; z-index: 1; display: block; cursor: zoom-out; max-width: 100%; max-height: 90vh; }
.lightbox-fig img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: var(--radius); }