/* NASH hero — nash.work is this screen and, under it, the "Como funciona"
   fold (process.css) since 2026-10-14; the whole landing, the other folds
   and the nav included, moved to site/testando. In the middle, the
   official N, flat and still, and under it a row of pills with what a
   visitor comes looking for: Portfólio and Sobre open their panel under
   the row (hero.js), Como funciona goes down to the fold, Contato opens an
   e-mail to main@nash.work. Each pill wears the "Fala que eu te escuto"
   button that stood on top until 2026-10-14, light on the rim and all
   (specular-stroke.js). */

/* The Artifact wrapper gives body a 14px system font; the kit sets the
   family on html, so body restates it. */
body {
  background: var(--nash-color-bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--nash-type-size-4);
  line-height: var(--nash-type-leading-body);
}

/* The landing's palette (2026-10-13), Apple and Dieter Rams: a neutral
   grey floor with no warm cast, near-black ink and one mid grey for leads
   and tags. The kit tokens are restated on :root, for this page only, so
   every kit piece shares the floor; specular-stroke.js reads the theme. */
:root {
  --nash-color-bg-page: #000000;
  --nash-color-text: #f5f5f7;
  --text: #f5f5f7;
  --text-mid: #86868b;
  --text-weak: #48484a;
}

/* The one colour on the screen: the light on the pills' rim and the label
   of the open one. On trial since 2026-10-14, the Nash Chat blue (the kit's
   --accent-chat) in place of the landing's orange signal (RD-149: #ff6a1f,
   #f2560d in the light theme). The pills are dark in either theme, so one
   value serves the two. */
:root {
  --site-signal: var(--accent-chat);
}

:root[data-tema='claro'] {
  --nash-color-bg-page: #f5f5f7;
  --nash-color-text: #1d1d1f;
  --text: #1d1d1f;
  --text-mid: #6e6e73;
  --text-weak: #a1a1a6;
}

/* ---------- the hero ----------
   One screen, all of it the stage, with the N in its middle, until a pill
   opens its panel: the panel takes a row under the stage and the stage gives
   it the room, down to 20rem (the N, the pills and their gap on a phone);
   past that the hero grows and the page scrolls. The canvas of a pill's
   rim runs 24 past the pill, more than a phone's gutter, so the sides
   clip. */
.site-hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(20rem, 1fr) auto;
  min-height: max(560px, 100svh);
  padding: 0 max(var(--nash-space-3), 5vw);
  overflow-x: clip;
  background: var(--nash-color-bg-page);
}

/* ---------- the stage ----------
   The N and the pills under it, as one group a little above the middle
   (the stage keeps more room below than above). */
.site-hero-stage {
  container-type: size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--nash-space-6);
  min-height: 0;
  padding-bottom: 14svh;
}

/* The N, flat and still: 42% of the stage's height, or 56% of its width
   on a narrow one. It and the pills are named for the view transition that
   moves them when a panel opens (hero.js). */
.site-hero-stage-logo {
  view-transition-name: site-hero-logo;
  flex: none;
  height: min(42cqh, 56cqw);
  color: var(--text-forte);
  fill: currentColor;
}

/* ---------- the pills ----------
   The Reaction library's Specular Button (specular-stroke.js), its "pill"
   preset, the rules the "Fala que eu te escuto" button had, at the size of
   a 44 target. On the light floor the pill is solid ink and the light runs
   on its rim; on the dark floor it is the library's glass. The light is
   the signal; the open pill takes it on the label too. */
.site-hero-pills {
  view-transition-name: site-hero-pills;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nash-space-2);
  max-width: 568px;
}

.site-hero-pill {
  --site-specular-line: var(--site-signal);
  --site-specular-base: #6e6e73;
  --site-pill-tint: #1d1d1f;
  --site-pill-tint-opacity: 1;
  --site-pill-text: #f5f5f7;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  min-height: var(--nash-target-loose, 44px);
  border-radius: 40px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--site-pill-text);
  background: color-mix(in srgb, var(--site-pill-tint) calc(var(--site-pill-tint-opacity) * 100%), transparent);
  box-shadow: 0 10px 24px -14px #00000073;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--nash-motion-duration-micro, 140ms) var(--nash-motion-ease-out),
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root:not([data-tema='claro']) .site-hero-pill {
  --site-specular-base: #525252;
  --site-pill-tint: #ffffff;
  --site-pill-tint-opacity: 0.04;
  --site-pill-text: #f5f5f5;
}

.site-hero-pill[aria-expanded='true'] {
  color: var(--site-signal);
}

.site-hero-pill:active {
  transform: scale(0.97);
}

.site-hero-pill:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text-forte) 55%, transparent);
  outline-offset: 3px;
}

.site-hero-pill-label {
  position: relative;
  z-index: 2;
}

.site-specular-stroke-light {
  position: absolute;
  inset: -24px;
  z-index: 1;
  display: block;
  width: calc(100% + 48px);
  max-width: none;
  height: calc(100% + 48px);
  pointer-events: none;
}

/* ---------- the panels (hero.js) ----------
   What Portfólio and Sobre open, one at a time, under the pills: the work
   and the studio in the kit's Card, the copy of site/testando's folds. With
   a panel open the group sits at the foot of the stage, right over it.
   Without JS (no html.js) both panels are simply there. */
.site-hero-reply {
  view-transition-name: site-hero-reply;
  justify-self: center;
  width: 100%;
  max-width: 568px;
  padding-bottom: var(--nash-space-6);
}

html.js .site-hero-panel:not(.is-open),
html.js .site-hero-reply:not(:has(.is-open)) {
  display: none;
}

.site-hero:has(.site-hero-panel.is-open) .site-hero-stage {
  justify-content: flex-end;
  padding-bottom: var(--nash-space-5);
}

.site-hero-panel {
  display: grid;
  gap: var(--nash-space-3);
}

.site-hero-panel + .site-hero-panel {
  margin-top: var(--nash-space-3);
}

.site-work-card {
  color: inherit;
  text-decoration: none;
}

/* The labels are longer than the kit's 160px column. */
.site-work-spec {
  --nash-signature-card-label: 190px;
  gap: 0;
  margin: var(--nash-space-1) 0 0;
}

.site-work-more {
  justify-self: start;
}

/* Sobre: the three trades of site/testando's "Uma ponta só", name over
   line. */
.site-hero-trades {
  display: grid;
  gap: var(--nash-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--nash-card-ink-mid);
}

.site-hero-trades strong {
  display: block;
  color: var(--nash-card-ink);
  font-weight: 500;
}