/*
 * THE ATLAS FRAME CONTRACT
 *
 * This file is the sole owner of the site's paper edge, Atlas header, and
 * Atlas footer. Every generated page loads it through renderAtlasDocument().
 *
 * There are only two layout modes:
 * - viewport: the Homepage composes itself to one viewport when it fits.
 * - document: Tag and Item Pages always use their natural document height.
 *
 * Both modes use the body itself as the same paper surface. Header, Main, and
 * footer are its three universal children. A one-screen Homepage merely makes
 * that ordinary document geometry appear stationary.
 * Page-specific styles may consume these tokens, but must never redefine this
 * geometry. Change the tokens or components here, then verify all three page
 * contracts together.
 */

:root {
  --page-inset: clamp(0.65rem, 1.2vw, 1.1rem);
  --chrome-panel-height: 4.25rem;
  --chrome-padding-inline-start: var(--page-pad);
  --chrome-padding-inline-end: var(--page-pad);
  --footer-viewport-padding-block-end:
    max(calc((var(--chrome-panel-height) - var(--type-label)) / 2), calc(env(safe-area-inset-bottom) + 0.45rem));
  --footer-padding-block-end: var(--footer-viewport-padding-block-end);
  --chrome-control-height: 2.75rem;
  --chrome-content-frame-inset:
    calc((var(--chrome-control-height) - var(--type-label)) / 4);
  --chrome-control-gap: 0.72rem;
  --chrome-rule-length: 2.15rem;
  --chrome-rule-hover: 3.35rem;
  --chrome-motion-duration: 420ms;
  --chrome-surface: var(--bg);
  --header-surface-color: var(--chrome-surface);
  --header-surface-opacity: 1;
  --header-surface-inset-block-start: 0px;
  --header-height: var(--chrome-panel-height);
}

/* The body is the page. Its margin is the real paper edge in both layouts. */
.atlas-document {
  --page-edge-left: max(var(--page-inset), env(safe-area-inset-left));
  --page-edge-right: max(var(--page-inset), env(safe-area-inset-right));
  --chrome-padding-inline-start: 0px;
  --chrome-padding-inline-end: 0px;
  --header-surface-inset-block-start: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  min-height: calc(100dvh - var(--page-inset) * 2);
  margin: var(--page-inset);
  margin-right: var(--page-edge-right);
  margin-left: var(--page-edge-left);
  background: var(--bg);
}

[data-atlas-layout="viewport"] {
  --chrome-surface: var(--scene);
  --home-stage-header-clearance: var(--header-height);
  --home-footer-height: var(--chrome-panel-height);
  --home-footer-surface-height:
    calc(
      2 * var(--chrome-content-frame-inset) +
      var(--type-small)
    );
  --home-title-cap-inset: 0.05em;
  --home-title-e-inset: 0.055em;
  background: var(--scene);
}

[data-atlas-layout="viewport"]::before {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  content: "";
  opacity: 0.15;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(12.5vw - 1px), rgba(19,19,17,.045) calc(12.5vw - 1px) 12.5vw);
}

/* Header: fixed on the Homepage canvas; ordinary flow on interior documents. */
.atlas-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-block: 0;
  padding-inline-start: var(--chrome-padding-inline-start);
  padding-inline-end: var(--chrome-padding-inline-end);
  pointer-events: none;
  background: transparent;
  border: 0;
}

.atlas-header::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: var(--header-surface-opacity);
  background:
    linear-gradient(
      to bottom,
      transparent 0 var(--header-surface-inset-block-start),
      var(--header-surface-color) var(--header-surface-inset-block-start) 100%
    );
}

.atlas-header > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

[data-atlas-layout="document"] .atlas-header {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  height: auto;
  min-height: 0;
  padding: 0;
}

[data-atlas-layout="document"] .atlas-main {
  flex: 1 0 auto;
  padding-top:
    max(
      0px,
      calc(clamp(7rem, 11vw, 9rem) - var(--header-height))
    );
}

/* The home page's own heading. It generates no box, so the wordmark it wraps
   keeps the header's geometry exactly — the document gains an h1 naming the
   site, and the page does not move a pixel. */
.wordmark-heading {
  display: contents;
  margin: 0;
  font: inherit;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.home-header {
  --header-surface-opacity: 0;
  color: var(--scene-ink);
  background: transparent;
  mix-blend-mode: normal;
}

.atlas-header.home-header {
  align-items: flex-start;
  height: auto;
  padding-block-start: env(safe-area-inset-top);
  padding-block-end: 0;
  padding-inline: 0;
}

.home-header .wordmark {
  position: absolute;
  top: 0;
  left: 0;
  color: currentColor;
}

.home-header .context-title > span {
  position: relative;
  top: calc(-1 * var(--home-title-cap-inset));
  left: calc(-1 * var(--home-title-e-inset));
}

.home-header .wordmark::before {
  display: none;
}

.home-header .header-bounds {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  pointer-events: none;
}

.home-header .header-content-frame {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: auto;
  margin-block-start: var(--chrome-content-frame-inset);
  margin-inline: var(--chrome-content-frame-inset);
  padding-block-end: var(--chrome-content-frame-inset);
  pointer-events: none;
}

.home-header .header-content-frame > * {
  align-self: flex-start;
  pointer-events: auto;
}

.home-header .header-content-frame > .locate-trigger {
  --chrome-control-gap: 0.72rem;
  --chrome-rule-length: 2.15rem;
  --chrome-rule-hover: 3.35rem;
  align-items: center;
  min-height: 0;
  margin-left: auto;
  font-size: 10px;
}

.document-header .header-bounds {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  pointer-events: none;
}

.document-header .header-content-frame {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  margin-block-start: var(--chrome-content-frame-inset);
  margin-inline: var(--chrome-content-frame-inset);
  padding-block-end: var(--chrome-content-frame-inset);
  pointer-events: none;
}

.document-header .header-content-frame > * {
  align-self: flex-start;
  pointer-events: auto;
}

.document-header .atlas-return {
  min-height: 0;
  margin-left: auto;
}

/* Locator and return link are the same rail primitive. */
.chrome-control {
  display: inline-flex;
  align-items: center;
  gap: var(--chrome-control-gap);
  min-height: var(--chrome-control-height);
  padding: 0;
  color: currentColor;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.locate-trigger {
  cursor: pointer;
  border: 0;
  background: transparent;
}

.chrome-control i {
  position: relative;
  display: block;
  width: var(--chrome-rule-length);
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
}

.chrome-control i::after {
  position: absolute;
  top: 50%;
  left: -0.13rem;
  width: 0.27rem;
  height: 0.27rem;
  content: "";
  border: 1px solid currentColor;
  background: var(--chrome-surface);
  transform: translateY(-50%);
}

.chrome-control i {
  transition: width var(--chrome-motion-duration) var(--ease-out);
}

.chrome-control i::after {
  transition:
    background 220ms ease,
    transform var(--chrome-motion-duration) var(--ease-out);
}

.chrome-control:hover i,
.chrome-control:focus-visible i {
  width: var(--chrome-rule-hover);
}

.chrome-control:hover i::after,
.chrome-control:focus-visible i::after {
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* Footer: natural-flow chrome by default; the Homepage mirrors its header. */
.atlas-footer {
  position: relative;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  border: 0;
}

[data-atlas-layout="viewport"] > .atlas-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 55;
  display: flex;
  align-items: flex-end;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  color: var(--scene-ink);
  background: transparent;
}

.footer-bounds {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  pointer-events: none;
}

.footer-content-frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  margin-inline: var(--chrome-content-frame-inset);
  margin-block-end: var(--chrome-content-frame-inset);
  padding-block-start: var(--chrome-content-frame-inset);
  pointer-events: none;
}

.footer-content-frame > * {
  align-self: flex-end;
  pointer-events: auto;
}

[data-atlas-layout="viewport"] > .atlas-footer > .footer-bounds {
  margin-block-end: env(safe-area-inset-bottom);
}

[data-atlas-layout="viewport"] .footer-content-frame {
  margin-block-end: var(--chrome-content-frame-inset);
}

.footer-wordmark {
  display: flex;
  align-self: end;
  align-items: flex-end;
  gap: 0.22rem;
  font-family: var(--display);
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.footer-year {
  align-self: end;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  opacity: 0.72;
}

@media (max-width: 820px) {
  :root {
    --chrome-panel-height: 3.25rem;
    --chrome-control-height: 2.6rem;
    --chrome-content-frame-inset:
      calc((var(--chrome-control-height) - var(--type-caption)) / 4);
    --chrome-control-gap: 0.55rem;
    --chrome-rule-length: 1.25rem;
    --chrome-rule-hover: 1.75rem;
    --footer-viewport-padding-block-end:
      max(
        calc(env(safe-area-inset-bottom) + (var(--chrome-panel-height) - var(--type-caption)) / 2),
        calc(env(safe-area-inset-bottom) + 0.45rem)
      );
    --header-height: calc(var(--chrome-panel-height) + env(safe-area-inset-top));
  }

  [data-atlas-layout="viewport"] {
    --home-stage-header-clearance: calc(5.75rem + env(safe-area-inset-top));
    --home-footer-height: calc(var(--chrome-panel-height) + env(safe-area-inset-bottom));
    /* Font metrics align the visible title edge, not its element box. */
    --home-header-edge-space: var(--page-pad);
    --home-title-line: 0.82;
  }

  [data-atlas-layout="viewport"]::before {
    display: none;
  }

  .atlas-header {
    --header-surface-color: var(--chrome-surface);
    height: var(--header-height);
    padding-top: env(safe-area-inset-top);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .wordmark {
    font-size: 0.9375rem;
  }

  .chrome-control {
    gap: var(--chrome-control-gap);
    min-height: var(--chrome-control-height);
    font-size: var(--type-caption);
  }

  .chrome-control i {
    width: var(--chrome-rule-length);
  }

  [data-atlas-layout="document"] .atlas-main {
    padding-top: clamp(2.5rem, 8vw, 4rem);
  }

  .home-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .home-header .wordmark {
    width: auto;
    min-height: 0;
    margin-top: 0;
    margin-left: 0;
    font-size: clamp(2rem, 9vw, 2.65rem);
    font-weight: 600;
    line-height: var(--home-title-line);
    letter-spacing: -0.035em;
    white-space: normal;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transform-origin: top left;
  }

  .home-header .wordmark span + span {
    margin-top: -0.03em;
    margin-left: 0;
  }

  .atlas-footer {
    min-height: 0;
  }

  .footer-wordmark {
    font-size: 0.76rem;
  }

  .footer-year {
    justify-self: end;
    font-size: var(--type-caption);
  }
}