/* =========================================================
   INNER PAGES — shared pieces (hero, filters, row lists, CTA)
   ========================================================= */

/* ---------- page hero ---------- */
.phero {
  position: relative; min-height: 86svh;
  display: grid; align-content: end; gap: clamp(20px, 3vw, 40px);
  padding: calc(var(--header-h) + 8vh) var(--gutter) clamp(40px, 6vw, 80px);
}
.phero__title {
  font-size: clamp(44px, 12.5vw, 240px); font-weight: 300; line-height: 0.86; letter-spacing: -0.045em;
  display: flex; align-items: flex-start; gap: 0.12em;
}
@media (max-width: 767px) { .phero__title h1 { font-size: min(2em, 22vw); } } /* "Projects" + its count must fit a phone */
.phero__title sup { font-family: var(--f-ui); font-size: clamp(14px, 1.4vw, 22px); letter-spacing: 0; line-height: 1; margin-top: 0.6em; opacity: 0.7; }
.phero__foot { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; border-top: 1px solid currentColor; border-color: var(--line-light); padding-top: 24px; }
.theme-light .phero__foot { border-color: var(--line-dark); }
.phero__foot .lead { max-width: 52ch; }

/* ---------- filter chips (radio-like buttons) ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px var(--gutter);
  background: var(--ink); transition: padding-top 0.7s var(--ease-out);
}
.theme-light .toolbar { background: var(--bone); }
.header:not(.is-hidden) ~ main .toolbar { padding-top: calc(var(--header-h) - 6px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-light);
  font-family: var(--f-ui); font-size: 14px; transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.filter small { font-size: 11px; opacity: 0.6; }
.filter:hover { border-color: currentColor; }
.filter[aria-pressed='true'] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.theme-light .filter { border-color: var(--line-dark); }
.theme-light .filter[aria-pressed='true'] { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* ---------- row list with anchored hover bubble (Journal, Projects list view) ---------- */
.rows { list-style: none; border-top: 1px solid var(--line-light); }
.theme-light .rows { border-color: var(--line-dark); }
.rows > li { border-bottom: 1px solid var(--line-light); }
.theme-light .rows > li { border-color: var(--line-dark); }
.row {
  position: relative; display: grid; grid-template-columns: 110px 1fr 160px 90px auto 30px; align-items: center; gap: 20px;
  padding: clamp(18px, 2vw, 28px) 0; isolation: isolate; transition: color 0.25s;
}
.row::before {
  content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--bone);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.4s var(--ease-out);
}
.row.is-hover::before { transform: scaleY(1); transform-origin: 50% 0; }
.row.is-hover { color: var(--ink); }
.theme-light .row::before { background: var(--ink); }
.theme-light .row.is-hover { color: var(--bone); }
.row__date, .row__topic, .row__time { font-family: var(--f-ui); font-size: 13px; opacity: 0.6; }
.row__title { font-size: clamp(20px, 2vw, 32px); line-height: 1.2; letter-spacing: -0.01em; transition: transform 0.4s var(--ease-out); }
.row.is-hover .row__title { transform: translateX(14px); }
.row__arrow { width: 14px; height: 14px; stroke: currentColor; justify-self: end; transition: transform 0.4s var(--ease-out); }
.row.is-hover .row__arrow { transform: rotate(45deg); }
.bubble {
  position: relative; justify-self: end;
  width: clamp(130px, 11vw, 190px); height: clamp(54px, 4.6vw, 80px);
  border-radius: 999px; overflow: hidden; background: var(--ink-2);
  opacity: 0; transform: scale(0.6); transform-origin: 100% 50%;
  transition: opacity 0.25s, transform 0.45s var(--ease-out);
}
.bubble img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 0.8s var(--ease-out); }
.row.is-hover .bubble, .row:focus-visible .bubble { opacity: 1; transform: none; }
.row.is-hover .bubble img, .row:focus-visible .bubble img { transform: none; }
.row.is-hidden { display: none; }

/* ---------- closing CTA band ---------- */
.cta { position: relative; display: block; overflow: hidden; }
.cta__inner { position: relative; z-index: 1; padding: clamp(96px, 14vw, 200px) var(--gutter); display: grid; gap: 28px; justify-items: start; }
.cta__big { font-size: clamp(48px, 9vw, 160px); font-weight: 300; line-height: 0.92; letter-spacing: -0.035em; max-width: 12ch; }
.cta__media { position: absolute; inset: 0; opacity: 0.35; transition: opacity 0.8s; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.cta:hover .cta__media { opacity: 0.55; }
.cta:hover .cta__media img { transform: scale(1); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 5vh 5vw;
  background: rgba(20, 20, 20, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
}
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-sm); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5); }
.lightbox__close { position: absolute; top: 20px; right: var(--gutter); height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-light); font-family: var(--f-ui); font-size: 14px; }

@media (max-width: 767px) {
  .row { grid-template-columns: 1fr 24px; gap: 6px 12px; }
  .row__date { grid-column: 1; grid-row: 1; }
  .row__title { grid-column: 1; grid-row: 2; }
  .row__arrow { grid-column: 2; grid-row: 1 / 3; }
  .row__topic, .row__time, .bubble { display: none; }
  .toolbar { position: relative; }
  .toolbar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); max-width: calc(100% + var(--gutter) * 2); }
  .toolbar .filters::-webkit-scrollbar { display: none; }
  .filter { height: 44px; flex: 0 0 auto; }
}