/* Page layouts for Xydra Obsidian 1.2.0. Load after xydra.css. */
:root {
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --header-height: 4.5rem;
  /* Serve the approved tile locally under the existing self-only CSP. */
  --xy-scale-pattern: url("/assets/xydra/scales-tile.svg");
}

html {
  background: var(--xy-bg);
}

.site-header {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--xy-border);
  background: rgba(11, 13, 18, 0.76);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-name {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  flex-shrink: 0;
  transition: transform var(--xy-normal) var(--xy-ease);
}

.site-name img {
  display: block;
  width: 160px;
  height: 36px;
}

.site-name:hover {
  transform: translateY(-1px);
}

.xy-app .status-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.65rem;
  color: var(--xy-muted);
  font: 500 0.69rem/1.5 var(--xy-mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--xy-fast);
}

.status-link span[aria-hidden] {
  color: var(--xy-accent);
}

.xy-app .status-link:hover {
  color: var(--xy-text);
}

.landing {
  display: grid;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 7vw, 7rem);
  place-items: center;
}

.identity {
  position: relative;
  width: min(100%, 74rem);
  padding-block: clamp(2.25rem, 7vw, 6rem);
}

.identity::before,
.identity::after {
  position: absolute;
  left: 0;
  width: min(8rem, 22vw);
  height: 1px;
  content: "";
}

.identity::before {
  top: 0;
  background: linear-gradient(90deg, var(--xy-accent), var(--xy-border));
}

.identity::after {
  bottom: 0;
  background: var(--xy-border);
}

.xy-app .identity h1 {
  margin: 0;
  color: var(--xy-text);
  font-size: clamp(1.65rem, 7.5vw, 7.5rem);
  font-weight: 730;
  letter-spacing: -0.06em;
  line-height: 1.05;
  white-space: nowrap;
}

@media (max-width: 34rem) {
  :root {
    --header-height: 4rem;
  }

  .site-name img {
    width: 136px;
    height: auto;
  }

  .landing {
    padding-inline: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-name:hover {
    transform: none;
  }
}

:root[data-xydra-motion="off"] .site-name:hover {
  transform: none;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--xy-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .identity::before,
  .identity::after {
    background: CanvasText;
  }
}