/* ============================================================================
   COMPONENT: PAGE SHELL
   全站页面骨架：页首标题、居中信息页、带筛选器的长内容页。

   约定：
   - 字号与几何只读取 design-tokens.css，不在页面文件重复写断点。
   - 页面 CSS 只负责该页面独有的内容布局。
   ============================================================================ */

/* 作品 / 摄影 / 博客共用的右上页首。 */
.page-header {
  position: relative;
  width: 100%;
  min-height: var(--page-header-height);
  margin: 0;
}

.page-header__title,
.page-header__subtitle {
  position: absolute;
  right: var(--page-corner-right);
  z-index: 10;
  margin: 0;
  text-align: right;
  text-transform: uppercase;
}

.page-header__title {
  top: var(--trigger-offset);
  color: var(--color-text-main);
  font-family: var(--font-heading);
  font-size: var(--type-page-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.page-header__subtitle {
  top: calc(var(--trigger-offset) + var(--type-page-title) + var(--space-xs));
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--type-ui);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
}

/* About / Contact 等短页面共用的居中舞台。 */
.page-stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--page-block-start) var(--page-gutter) var(--space-2xl);
}

.page-stage__title {
  margin: 0 0 var(--space-lg);
  color: var(--color-text-main);
  font-family: var(--font-heading);
  font-size: var(--type-page-title);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.page-stage__body {
  width: 100%;
  max-width: var(--container-sm);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: var(--weight-light);
  line-height: var(--leading-reading);
  text-align: center;
}

/* Photography / Journal 共用的 sticky filter 外壳。 */
.filter-context {
  --scope-center-padding: max(var(--page-gutter), calc((100vw - var(--container-lg)) / 2));
  --layout-sidebar-width: clamp(380px, 35vw, 500px);
  --scope-avoid-left: calc(var(--layout-sidebar-width) + var(--page-gutter));
  --scope-avoid-right: var(--desktop-right-gutter);
  --scope-safe-left: var(--scope-center-padding);
  --scope-safe-right: var(--scope-center-padding);

  position: relative;
  width: 100%;
  min-height: 100vh;
}

.filter-context__sentinel {
  position: absolute;
  top: calc(var(--mobile-sticky-top) * -1);
  left: 0;
  z-index: -1;
  width: 100%;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

.filter-context__bar {
  position: sticky;
  top: var(--mobile-sticky-top);
  z-index: var(--layer-sticky);
  width: 100%;
  margin: var(--section-gap) 0;
  background: transparent;
  transition: top 0.3s ease;
}

.filter-context__bar::before {
  content: '';
  position: absolute;
  inset: 0 0 0;
  z-index: -1;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition: background-color 0.6s ease,
              backdrop-filter 0.6s ease,
              border-color 0.6s ease,
              top 0.6s ease;
}

.filter-context__bar.is-stuck::before {
  top: calc((var(--mobile-sticky-top) + 50vh) * -1);
  background-color: var(--color-bg-body-alpha);
  border-bottom-color: var(--color-border);
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .filter-context__bar.is-stuck::before {
    background-color: var(--color-bg-body-alpha-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

@media (min-width: 769px) {
  .filter-context__sentinel {
    top: -100px;
  }

  .filter-context__bar {
    top: var(--desktop-sticky-top);
  }

  .filter-context__bar.is-stuck::before {
    top: 0;
  }

  .filter-context .ui-scope-bar__layout,
  .filter-context .ui-scope-bar__sub-panels {
    --scope-safe-left: var(--scope-center-padding);
    --scope-safe-right: var(--scope-center-padding);
  }

  .filter-context__bar.is-stuck .ui-scope-bar__layout,
  .filter-context__bar.is-stuck .ui-scope-bar__sub-panels {
    --scope-safe-left: var(--scope-avoid-left);
    --scope-safe-right: var(--scope-avoid-right);
  }
}

@media (max-width: 768px) {
  .page-header {
    min-height: auto;
    padding: calc(var(--mobile-sticky-top) + var(--space-lg)) var(--page-gutter) 0;
  }

  .page-header__title,
  .page-header__subtitle {
    position: static;
    padding-right: calc(var(--trigger-size) + var(--space-xs));
    text-align: left;
  }

  .page-header__title {
    margin-bottom: var(--space-xs);
  }

  .page-stage {
    align-items: stretch;
  }

  .page-stage__title,
  .page-stage__body {
    text-align: left;
  }

  .page-stage__body {
    font-size: var(--type-body);
  }

  .filter-context {
    --scope-center-padding: var(--page-gutter);
  }
}