/* ============================================================
   jessenewman.com — site-wide design system (rebuild)
   Faithful to the live Semplice site, with the approved fixes:
   real Inter for display, real Quicksand 600 for body.
   ONE FILE controls every page. Change here → changes everywhere.
   ============================================================ */

:root {
  --bg: #141414;
  --bg-deep: #1e1e1e;
  --bg-black: #000;
  --bg-footer: #020202;
  --txt: #c9c9c9;
  --txt-dim: #b2b2b2;
  --txt-faint: #5b5b5b;
  --link: #3a9ed8;
  --link-hover: #6fbbe8;
  --title: #fff;
  --display: "Quicksand", sans-serif;      /* big titles + section heads — matches live's rounded look (Jesse 2026-07-17) */
  --body: "Quicksand", sans-serif;         /* body copy (as originally intended) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 18px; }
body {
  font-family: var(--body); font-weight: 600;
  background: var(--bg); color: var(--txt); line-height: 1.556;
  letter-spacing: .5px;
}
img, video { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; }

/* ---------- header — white Semplice navbar, matched to live 2026-08-23:
   48px bar, rgba(245,245,245,.64), black tracked logo 15px/3.3px,
   Quicksand 600 18px links in link-blue, hover/current → black ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  height: 48px; padding: 0 25px;
  background: rgba(245,245,245,.64);
}
header.site.scrolled { background: rgba(245,245,245,.64); }
header.site .logo {
  color: #000; font-size: 15px; line-height: 15px; letter-spacing: 3.3px;
  text-transform: uppercase; font-family: var(--body);
}
header.site nav a {
  color: #000; font-size: 18px; letter-spacing: .5px; margin-left: 25px;
  font-family: var(--body); transition: color .25s;
}
header.site nav a:hover { color: #888; }
header.site nav a.active { color: #000; }

/* ---------- fullscreen chapters (homepage / covers) ---------- */
.chapter {
  position: relative; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: #000;
}
.bg-video, .bg-video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-video video { object-fit: cover; }
.chapter.bg-img { background-image: var(--bg-image); background-size: cover; background-position: 50% 50%; background-attachment: fixed; }
.ch-title {
  position: relative; z-index: 2; color: var(--title); text-align: center;
  font-family: "Inter", Arial, sans-serif; /* live chapter titles compute Inter (2026-08-23) */
  font-size: 5.111rem; line-height: 1.05; padding: 0 1rem; max-width: 62rem;
  text-shadow: 0 0 40px rgba(0,0,0,.25);
}
.ch-title.hero-size { font-size: 6.778rem; line-height: 1; }
.cover-role { position: relative; z-index: 2; text-align: center; }
.cover-role .role { margin-top: 1.2rem; font-size: 1rem; color: #e2e2e2; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- text sections ---------- */
.text-block { background: var(--bg); padding: 8rem 2rem; text-align: center; }
.text-block p { max-width: 44rem; margin: 0 auto; font-size: 1.111rem; color: var(--txt); }
.text-block.lg p { font-size: 1.222rem; }
.text-block p + p { margin-top: 1.5rem; }
.text-block p.dim { color: var(--txt-dim); }
.sec-head { font-family: var(--display); font-size: 1.889rem; color: #e2e2e2; margin: 0 auto 2rem; max-width: 44rem; }
.note-bar { background: var(--bg-deep); padding: 4.6rem 2rem 1.2rem; }
.note-bar p { text-align: center; font-size: .778rem; color: var(--txt-dim); max-width: 34rem; margin: 0 auto; }

/* ---------- media helpers ---------- */
.player-wrap { max-width: min(1640px, 95vw); margin: 0 auto; }
.embed { position: relative; padding-top: 56.25%; background: #000; }
.embed video, .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-note { text-align: center; font-size: .78rem; color: var(--txt-faint); margin-top: 1rem; font-family: var(--body); }

/* ---------- 12-column masonry work grid (Semplice-compatible) ---------- */
.grid12 {
  display: flex; flex-wrap: wrap; gap: 0;
  max-width: min(1700px, 97vw); margin: 0 auto; padding: 0 .25rem;
}
.grid12 .cell { padding: .35rem; }
.w-3 { width: 25%; } .w-4 { width: 33.3333%; } .w-6 { width: 50%; }
.w-8 { width: 66.6667%; } .w-12 { width: 100%; }

/* category filter bar (live Semplice .pg-category-filter, matched 2026-08-23:
   Open Sans 13px uppercase ls .8px, inactive #bbb, active #1259a9, 42px gaps,
   centered flex-wrap between the MY GRID band and the grid) */
.pg-category-filter { padding: 3.2rem 33px 1.4rem; }
.pg-category-filter ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0; padding: 0 0 28px; line-height: 30px;
}
.pg-category-filter li { padding-right: 42px; }
.pg-category-filter li:last-child { padding-right: 0; }
.pg-category-filter a {
  font-family: "Open Sans", Arial, sans-serif; font-size: 13px; font-weight: 400;
  letter-spacing: .8px; text-transform: uppercase; color: #bbb; cursor: pointer;
}
.pg-category-filter a:hover, .pg-category-filter a.pg-filter-active { color: #1259a9; }
.cell.cat-hidden { display: none; }

/* thumb with hover video + meta (the signature interaction) */
.thumb { position: relative; display: block; }
.thumb .media { position: relative; display: block; overflow: hidden; background: #000; }
.thumb img { width: 100%; height: auto; display: block; transition: transform .666s ease, opacity .45s ease; }
.thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .45s ease;
}
.thumb:hover img { transform: scale(1.05); }
.thumb.has-video:hover img { opacity: 0; }
.thumb.has-video:hover video { opacity: 1; }
.grid12.masonry.msn { display: block; position: relative; }
.grid12.masonry.msn > .cell { position: absolute; }

/* caption below the tile — live Semplice "title below" mode (2026-07-17):
   Quicksand 600 22/22 uppercase #666 + 13/13 #a5a5a5 credit, centered,
   8px above, bottom padding makes the ~38px live row gap */
.thumb .meta {
  display: block; text-align: center; padding: 8px 0 1.75rem;
  min-height: 48px; /* uniform caption block so equal-aspect rows stay level */
}
.thumb .meta .t {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: 22px; line-height: 22px; text-transform: uppercase; color: #666;
}
.thumb .meta .c {
  display: block; font-family: var(--body); font-weight: 600;
  font-size: 13px; line-height: 13px; color: #a5a5a5; padding-top: 5px;
}

/* ---------- bottom "more projects" panel (project pages) ----------
   Faithful to the live Semplice project panel: dotted label + 12-across
   micro-thumb grid, current page's own thumb excluded. Meta line is
   hidden on live (data-meta-visibility="title") so we don't emit it. */
.project-panel { background: var(--bg); padding: 9rem 0; }
.project-panel .panel-label {
  font-family: var(--body); color: #b7b7b7; font-size: 1.444rem;
  text-transform: uppercase; text-align: center; line-height: 1;
  padding: 0 1rem 1.111rem;
}
.project-panel .pp-thumbs {
  display: flex; flex-wrap: wrap; justify-content: center;
  max-width: 1230px; margin: 0 auto -1rem; padding: 0 .833rem;
}
.project-panel .pp-thumb { width: 8.3333%; padding: 0 .833rem; }
.project-panel .pp-thumb img { width: 100%; }
.project-panel .pp-title { text-align: center; line-height: 1.2; padding: 0 .4rem 1.1rem; overflow-wrap: anywhere; hyphens: auto; }
.project-panel .pp-title a { color: #aaa; font-size: .61rem; letter-spacing: .01em; text-transform: uppercase; }
@media (max-width: 1199.98px) { .project-panel .pp-thumb { width: 16.6667%; } }
@media (max-width: 991.98px)  { .project-panel .pp-thumb { width: 25%; } }
@media (max-width: 767.98px)  { .project-panel .pp-thumb { width: 33.3333%; } }
@media (max-width: 543.98px)  { .project-panel .pp-thumb { width: 50%; } }

/* ---------- footer ---------- */
footer.site { background: var(--bg-footer); text-align: center; padding: 5rem 2rem 3rem; }
footer.site p { font-size: 1.222rem; }
footer.site .phone, footer.site .mail { color: #848484; }
footer.site .insta { margin-top: .4rem; }
footer.site .insta a { color: #fff; }
footer.site .copyright { margin-top: 2.4rem; font-size: 1rem; color: #777; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .ch-title { font-size: 3.4rem; }
  .ch-title.hero-size { font-size: 5.889rem; }
  .chapter.bg-img { background-attachment: scroll; }
  .w-3, .w-4 { width: 50%; }
  .w-6, .w-8 { width: 100%; }
}
@media (max-width: 560px) {
  .ch-title { font-size: 2.6rem; }
  .ch-title.hero-size { font-size: 3.667rem; }
  header.site nav a { margin-left: .8rem; font-size: 12px; }
  header.site .logo { font-size: 11px; letter-spacing: 2px; }
  .text-block { padding: 5.5rem 1.4rem; }
  .w-3, .w-4, .w-6 { width: 100%; }
}

/* star-threshold filter row (review mode / data-star-filter="public") */
.pg-category-filter ul.stars-filter { padding-top: 0; margin-top: -12px; }
.pg-category-filter ul.stars-filter a { letter-spacing: 2px; }