/* ============================================================================
   SITE LAYOUT — Aerastrata
   Page-level composition only. Every component here is built from design
   system tokens; nothing hardcodes a colour, size, duration or easing.
   Components themselves come from design-system/css/components.css.
   ========================================================================= */

/* --------------------------------------------------------------------------
   HERO
   ----------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: var(--space-8);
  align-items: center;
  min-height: calc(100vh - var(--space-9));
}

.hero--sub { min-height: min(72vh, 760px); }
.hero--dev { min-height: min(60vh, 620px); }

/* The docs hero has no second column, so it must not reserve one. */
.hero--docs {
  grid-template-columns: 1fr;
  min-height: min(44vh, 460px);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-block: var(--space-7);
  min-width: 0;
}

.hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: var(--space-6);
}

/* The accent block from the reference: it sits behind the first letters of
   the headline rather than beside them. */
.hero__bar {
  position: absolute;
  left: 0;
  top: -10%;
  bottom: -10%;
  width: var(--hero-bar-w);
  border-radius: var(--radius-xs);
  background: var(--accent);
}

.hero__bar--sub { width: var(--hero-bar-w-sub); }

.hero__eyebrow {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.hero__h1 {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 6.6vw, 124px);
  font-weight: var(--weight-extra);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--white);
}

.hero__h1--sub {
  font-size: clamp(40px, 4vw, 64px);
  line-height: 0.95;
}

/* motion.js wraps each line in .split-line, which is overflow:hidden so the
   line can rise out of a mask. At line-height 0.92 the mask sits inside the
   glyphs and shears the bottom off the headline. Give the mask room and pull
   it back with a negative margin so the layout is unchanged; the incoming
   line still starts fully below the padded box. */
.hero__h1 .split-line {
  overflow: clip;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.hero__intro {
  margin: 0;
  max-width: var(--measure-tight);
  padding-left: var(--space-6);
  border-left: 2px solid var(--fg);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

.hero__intro--plain {
  padding-left: 0;
  border-left: 0;
}

.hero__actions { padding-left: var(--space-6); gap: var(--space-3); }
.hero--sub .hero__actions,
.hero--sub .hero__stats { padding-left: 0; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  gap: var(--space-5);
  max-width: calc(var(--container-prose) - var(--space-1));
  padding-left: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--border);
}

.back {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}
.back:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   ARTWORK PANEL
   A card holding a generated canvas. Nesting rule: the inner radius is the
   outer radius minus the panel's own padding.
   ----------------------------------------------------------------------- */

.art-panel {
  position: relative;
  display: flex;
  align-self: stretch;
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-md), var(--inner-light);
  overflow: clip;
}

.art-panel--hero { min-height: var(--art-panel-hero); }
.art-panel--sub  { min-height: var(--art-panel-sub); }

.art-panel__canvas {
  flex: 1;
  min-width: 0;
  border-radius: calc(var(--radius-2xl) - var(--space-3));
}

.art-panel__overlay {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-3);
}

/* Glass tiles over the artwork. */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  min-width: 0;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-sunken) 62%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--inner-light);
  color: inherit;
}
.tile:hover { background: color-mix(in srgb, var(--surface-2) 72%, transparent); }

.tile__v {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--white);
}

.tile__b {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   TABBED PAGES — sidebar plus content
   ----------------------------------------------------------------------- */

.tabbed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
}

.tabnav {
  flex: 1 1 200px;
  max-width: 260px;
  position: sticky;
  top: var(--sticky-top);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tabnav__links { display: flex; flex-direction: column; gap: var(--space-1); }

.tabnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-subtle);
  transition: background var(--dur-fast) var(--ease-precise),
              color var(--dur-fast) var(--ease-precise);
}

.tabnav__bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-precise);
}

.tabnav__link:hover { color: var(--fg); }

.tabnav__link.is-active {
  background: var(--surface-2);
  color: var(--white);
}
.tabnav__link.is-active .tabnav__bar { background: var(--accent-bright); }

/* The content column. flex-grow far above the sidebar's so it takes the
   remaining space, and min-width: 0 so a wide table or command scrolls inside
   it rather than widening the page. */
.tabbed__body {
  flex: 999 1 520px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   STATUS BOARD
   ----------------------------------------------------------------------- */

.board { display: flex; flex-direction: column; }

.board__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--hairline) solid var(--border);
  color: inherit;
  min-width: 0;
}

.board__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg);
}

.board__row:hover .board__name { color: var(--white); }

.board__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   DOCUMENTATION
   ----------------------------------------------------------------------- */

.doc { min-width: 0; }

.doc pre,
.card pre {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--fg-muted);
  overflow-x: auto;
  min-width: 0;
}

.docs-card { display: block; color: inherit; min-width: 0; }

.docs-card__list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}
.docs-card__list li::before { content: "— "; color: var(--fg-faint); }

.bullets {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  line-height: var(--leading-body);
}

.devcard { display: block; color: inherit; min-width: 0; }

/* --------------------------------------------------------------------------
   SCREENSHOT SLOTS
   Placeholders until the owner supplies images.
   ----------------------------------------------------------------------- */

.shot { padding: var(--space-2); }

.shot__slot {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35);
  color: var(--fg-faint);
  font-size: var(--text-xs);
  text-align: center;
  padding: var(--space-4);
}

.shot figcaption { padding: var(--space-3) var(--space-2) var(--space-1); }

/* --------------------------------------------------------------------------
   FOOTER SOCIALS
   ----------------------------------------------------------------------- */

.social {
  display: grid;
  place-items: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: var(--space-2);
  box-sizing: content-box;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  transition: background var(--dur-fast) var(--ease-precise),
              color var(--dur-fast) var(--ease-precise);
}
.social:hover { background: var(--surface-3); color: var(--fg); }
.social:active { transform: scale(var(--press-scale)); }

/* --------------------------------------------------------------------------
   MISC
   ----------------------------------------------------------------------- */

.filter { width: min(360px, 100%); }

/* The `hidden` attribute is only `display: none` at user-agent weight, so any
   author `display` beats it. .project sets its own display, so a filtered-out
   card stayed visible. This is the standard reset for that. */
[hidden] { display: none !important; }

.btn .i { margin-right: var(--space-2); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The tab sidebar stops being sticky once it wraps above the content. */
@media (max-width: 800px) {
  .tabnav {
    position: static;
    max-width: none;
    flex-basis: 100%;
  }
  .tabnav__links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}