/* ─────────────────────────────────────────────────────────────
   Flat pages (work / elsewhere / about). No cube.
   Loaded after styles.css so it can lean on the same tokens.
   ───────────────────────────────────────────────────────────── */

@layer page {
  .page-main {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem clamp(1.5rem, 8vw, 7rem) 6rem;
    max-width: 60rem;
  }

  .page-tag {
    font-family: var(--font-interface);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: 1.1rem;
  }

  .page-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 10.5vw, 7rem);
    letter-spacing: 0.03em;
    line-height: 0.9;
    color: var(--fg);
  }

  .page-rule {
    width: 3.125rem;
    height: var(--hairline);
    background: var(--accent);
    margin-block: 2rem;
  }

  .page-lede {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    line-height: var(--font-body-leading);
    max-width: 34rem;
    color: color-mix(in srgb, var(--fg) 62%, transparent);
  }

  .page-soon {
    margin-block-start: 2.5rem;
    font-family: var(--font-interface);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .page-soon::before {
    content: "";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--accent);
    margin-inline-end: 0.75rem;
    vertical-align: middle;
    animation: soon-pulse 2.4s ease-in-out infinite;
  }

  /* ── Work/contact page routes ──────────────────────────── */

  .page-route {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
  }

  .page-route-prev {
    padding-block-start: max(6.75rem, calc(env(safe-area-inset-top, 0px) + 5.75rem));
  }

  .page-route-next {
    justify-content: flex-end;
    padding-block: clamp(2.25rem, 5vh, 4.5rem)
      max(3.5rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
  }

  /* Work's development decoration panel occupies the lower-right corner. */
  .work-page .page-route-next {
    padding-inline-end: clamp(12rem, 16vw, 18rem);
  }

  .page-route-link {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-block: 0.35rem;
    color: var(--muted);
    font-family: var(--font-interface);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease;
  }

  .page-route-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 0.1rem;
    border-radius: 999px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-route-kicker {
    opacity: 0.7;
  }

  .page-route-name {
    color: var(--fg);
    letter-spacing: 0.08em;
  }

  .page-route-link:is(:hover, :focus-visible) {
    color: var(--accent);
  }

  .page-route-link:is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }

  .page-route-link:focus-visible {
    outline: var(--hairline) solid var(--accent);
    outline-offset: 0.35rem;
  }

  @keyframes soon-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-soon::before {
      animation: none;
      opacity: 1;
    }
  }

  @media (width <= 56.25em) {
    .page-main {
      padding-block-start: 6rem;
      justify-content: flex-end;
      padding-block-end: 5rem;
    }
  }

  @media (width <= 30em) {
    .page-route {
      padding-inline: max(1.25rem, env(safe-area-inset-left, 0px));
    }

    .page-route-link {
      gap: 0.5rem;
      font-size: 0.56rem;
      letter-spacing: 0.16em;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-route-link {
      transition: none;
    }

    .page-route-link::after {
      transition: none;
    }
  }
}