/* ==========================================================================
   Portugal Music — desktop
   Figma frame 623:195 (1680 × 5763). Content column 1308px.
   ========================================================================== */

.wrap {
  width: min(1308px, calc(100% - 96px));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 87px;
  display: flex;
  align-items: center;
  background: rgba(5, 5, 6, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__wordmark {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -1.7px;
  color: var(--ink);
  text-decoration: none;
}

.nav__disciplines {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.nav__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -.2px;
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover { color: var(--teal); }
.nav__link[aria-current="page"] { color: var(--teal); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding: 44px 0 0; }

.hero__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}
.hero__back:hover { color: var(--ink); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 3px;
  background: var(--teal);
  flex: none;
}

.eyebrow__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: var(--track-mono);
  color: var(--dim);
  margin: 0;
}

.eyebrow--accent .eyebrow__label { color: var(--teal); }

.hero__title {
  margin: 30px 0 0;
  max-width: 1000px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 108px;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ink);
}

/* The stop is the one piece of colour in the headline — it marks the end of a
   sentence that is also the thesis of the page. */
.hero__stop { color: var(--red); }

.hero__lead {
  margin: 40px 0 0;
  max-width: 1080px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
}

.hero__disciplines {
  margin: 30px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: var(--track-mono);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Scope of work
   -------------------------------------------------------------------------- */
.scope { padding-top: 88px; }

.scope__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.scope__card {
  min-height: 196px;
  padding: 24px;
  background: var(--surf);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.scope__num {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: var(--track-mono);
  color: var(--teal);
}

.scope__title {
  margin: 9px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}

.scope__body {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Selected pieces
   -------------------------------------------------------------------------- */
.pieces { padding-top: 60px; }

.pieces__note {
  margin: 30px 0 0;
  max-width: 980px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.pieces__row {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}
.pieces__row--three    { grid-template-columns: repeat(3, 1fr); }
.pieces__row--two      { grid-template-columns: repeat(2, 1fr); }
.pieces__row--single   { grid-template-columns: 1fr; }
.pieces__row--vertical { grid-template-columns: repeat(3, 1fr); }

/* Chapter lead-ins.
   The air sits above the lead-in, never below it: the paragraph belongs to the
   block it introduces, not to the block that just ended. */
.leadin {
  margin-top: 30px;
  padding-top: 60px;
  max-width: 1000px;
}

.leadin__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: var(--track-mono);
  color: var(--teal);
}

.leadin__body {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Media slots
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--slot);
  border: 1px solid var(--line-slot);
  border-radius: 6px;
}

.slot--square   { aspect-ratio: 1 / 1; }
.slot--wide     { aspect-ratio: 648 / 365; }
.slot--feature  { aspect-ratio: 1308 / 677; }
.slot--video    { aspect-ratio: 16 / 9; }
.slot--vertical { aspect-ratio: 428 / 856; }

.slot__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.credit--video { pointer-events: none; }

/* Credit plate. Two lines: the piece, then the discipline. Authorship is
   established once in the lead-ins, so the roles stay technical here. */
.credit {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 10px 13px;
  background: rgba(5, 5, 6, .8);
  border: 1px solid var(--line);
  border-radius: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.credit__piece,
.credit__role {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: var(--track-mono);
}

.credit__piece { color: var(--ink); }
.credit__role  { color: var(--teal); margin-top: 3px; }

/* --------------------------------------------------------------------------
   The two sites
   -------------------------------------------------------------------------- */
.sites { padding-top: 90px; }

.sites__stack {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.site {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 52px 56px;
  background: var(--surf);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
}

.site__copy { flex: 1 1 auto; min-width: 0; }

.site__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: var(--track-mono);
}
.site--main .site__kicker { color: var(--teal); }
.site--show .site__kicker { color: var(--red); }

.site__title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}

.site__body {
  margin: 14px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.site__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.site__cta--solid {
  background: var(--teal);
  color: var(--bg);
  border: 1px solid var(--teal);
}
.site__cta--solid:hover { transform: translateY(-1px); }

.site__cta--outline {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
}
.site__cta--outline:hover {
  background: var(--red);
  color: var(--bg);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { margin-top: 90px; padding-top: 62px; }

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 0 46px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 17.4px;
  color: var(--dim);
}

.footer p { margin: 0; }

/* --------------------------------------------------------------------------
   Narrow-desktop safety net.
   The mobile experience lives in music-mobile.html; this only keeps the
   desktop page usable between the mobile breakpoint and the full 1308 column.
   -------------------------------------------------------------------------- */
@media (max-width: 1160px) {
  .hero__title { font-size: clamp(56px, 9vw, 108px); }
  .scope__grid { grid-template-columns: repeat(2, 1fr); }
  .site { flex-direction: column; align-items: flex-start; gap: 28px; }
}

@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  .nav__disciplines { display: none; }
  .pieces__row--three,
  .pieces__row--vertical { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Motion — soft arrival + scroll reveal
   -------------------------------------------------------------------------- */
html.pm-motion .nav,
html.pm-motion .hero > *,
html.pm-motion .scope > .eyebrow,
html.pm-motion .scope__card,
html.pm-motion .pieces > .eyebrow,
html.pm-motion .pieces__note,
html.pm-motion .slot,
html.pm-motion .leadin > *,
html.pm-motion .sites > .eyebrow,
html.pm-motion .site,
html.pm-motion .footer__inner {
  opacity: 0;
  transform: translateY(16px);
}

html.pm-motion .pm-reveal {
  transition:
    opacity .68s cubic-bezier(.22,.61,.36,1) var(--pm-delay, 0ms),
    transform .68s cubic-bezier(.22,.61,.36,1) var(--pm-delay, 0ms);
  will-change: opacity, transform;
}

html.pm-motion .pm-reveal.pm-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.pm-motion .nav,
  html.pm-motion .hero > *,
  html.pm-motion .scope > .eyebrow,
  html.pm-motion .scope__card,
  html.pm-motion .pieces > .eyebrow,
  html.pm-motion .pieces__note,
  html.pm-motion .slot,
  html.pm-motion .leadin > *,
  html.pm-motion .sites > .eyebrow,
  html.pm-motion .site,
  html.pm-motion .footer__inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}