/* Links page — brand hero + glass link rows, no site nav */

body.links-body {
  --nav-float-offset: 0px;
  --links-dock-offset: 0px;
  padding-bottom: var(--links-dock-offset);
  font-family: var(--font-mono);
}

body.links-body footer,
body.links-body .links-site-chip,
body.links-body .links-site-chip.contact-cta,
body.links-body .links-page,
body.links-body .links-section-label,
body.links-body .links-section-title,
body.links-body .links-row,
body.links-body .links-row-label {
  font-family: var(--font-mono);
}

/* —— Hero —— */
.links-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(280px, 48vh, 520px);
  width: 100%;
  overflow: hidden;
  color: var(--main-text);
}

.links-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fade hero photo into the page atmosphere at the bottom */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.85) 58%,
    rgba(0, 0, 0, 0.45) 74%,
    rgba(0, 0, 0, 0.15) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.85) 58%,
    rgba(0, 0, 0, 0.45) 74%,
    rgba(0, 0, 0, 0.15) 88%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.links-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transform: scale(1.02);
  animation: links-hero-drift 18s ease-in-out infinite alternate;
}

.links-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, transparent 24%),
    linear-gradient(180deg, transparent 48%, rgba(1, 3, 2, 0.28) 100%),
    linear-gradient(90deg, rgba(1, 3, 2, 0.4) 0%, transparent 38%, transparent 62%, rgba(1, 3, 2, 0.28) 100%);
}

.links-hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--site-max-width), 100%);
  margin: 0 auto;
  padding:
    clamp(2rem, 5vh, 3rem)
    var(--site-gutter)
    clamp(1.75rem, 4vh, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.links-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 12vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
  animation: links-content-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.links-hero-blurb {
  margin: 0;
  max-width: 42rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  line-height: 1.45;
  color: rgba(242, 244, 243, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  animation: links-content-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

/* Shared untinted glass tokens (hero / dock over photo) */
.links-site-chip,
.links-site-chip.glass-press,
.links-site-chip.contact-cta {
  --accent-r: 220;
  --accent-g: 224;
  --accent-b: 222;
  --accent-deep-r: 16;
  --accent-deep-g: 18;
  --accent-deep-b: 18;
  --accent-glow-r: 255;
  --accent-glow-g: 255;
  --accent-glow-b: 255;
  --accent-bright-r: 255;
  --accent-bright-g: 255;
  --accent-bright-b: 255;
  --glass-bg: linear-gradient(
    180deg,
    rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.16) 0%,
    rgb(var(--accent-r) var(--accent-g) var(--accent-b) / 0.07) 40%,
    rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.10) 70%,
    rgba(0, 0, 0, 0.14) 100%
  );
  text-transform: none;
  letter-spacing: 0.02em;
  flex: none;
}

/* Desktop: in-flow hero CTA (homepage Listen style) */
.links-site-chip--desktop,
.links-site-chip--desktop.glass-press,
.links-site-chip--desktop.contact-cta {
  position: relative;
  width: fit-content;
  margin: 0.35rem 0 0;
  min-height: 44px;
  gap: 0.55rem;
  justify-content: center;
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
  animation: links-content-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.links-site-chip--desktop img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* Mobile dock: hidden on desktop */
.links-site-chip--mobile {
  display: none !important;
}

/* —— Body —— */
.links-page {
  width: min(var(--site-max-width), 100%);
  margin: 0 auto;
  padding: 0 var(--site-gutter) clamp(1.5rem, 3vh, 2.5rem);
  font-family: var(--font-mono);
}

.links-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3.5vh, 2.5rem);
}

@media (min-width: 860px) {
  .links-grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }

  .links-page {
    padding-top: 0.25rem;
  }
}

.links-section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.75);
  margin: 0 0 0.65rem;
}

.links-section-title {
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 3.4vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  margin: 0 0 1.15rem;
  line-height: 1.1;
  color: var(--main-text);
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  isolation: isolate;
}

/* Match contact-cta / bottom pill glass — translucent + blur */
.links-row {
  --mouse-x: 50%;
  --mouse-y: 50%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  text-decoration: none;
  color: rgba(232, 236, 234, 0.96);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  background:
    linear-gradient(
      180deg,
      rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.1) 0%,
      rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.08) 100%
    ),
    var(--glass-bg);
  border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.32);
  box-shadow: var(--glass-shadow);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow var(--glass-press-duration, 0.18s) var(--glass-press-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform var(--glass-press-duration, 0.18s) var(--glass-press-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.links-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    var(--theme-hover-glow) 0%,
    var(--theme-hover-glow-soft) 35%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
}

.links-row > * {
  position: relative;
  z-index: 1;
}

.links-row:hover:not(:active):not(.is-pressed),
.links-row:focus-visible:not(:active):not(.is-pressed) {
  color: #fff;
  background:
    linear-gradient(
      180deg,
      rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.16) 0%,
      rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 100%
    ),
    var(--glass-bg);
  border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.45);
  box-shadow: var(--glass-shadow-lift);
}

.links-row:active,
.links-row.is-pressed {
  box-shadow: var(--glass-shadow-pressed);
}

.links-row:hover::before,
.links-row:focus-visible::before {
  opacity: 1;
}

.links-row.glass-press.is-proximity-hover:not(:hover),
.links-row.is-proximity-hover:not(:hover) {
  box-shadow: var(--glass-shadow);
  background:
    linear-gradient(
      180deg,
      rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.1) 0%,
      rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.08) 100%
    ),
    var(--glass-bg);
  border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.32);
}

.links-row.is-proximity-hover:not(:hover)::before,
.links-row.is-proximity-hover:not(:hover)::after {
  opacity: 0 !important;
}

.links-row-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.links-row-icon.is-invert {
  border-radius: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.links-row-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.links-row-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.links-row:hover .links-row-arrow,
.links-row:focus-visible .links-row-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* —— Reveal motion —— */
.links-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.links-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.links-grid .links-section:nth-child(2).links-reveal {
  transition-delay: 0.08s;
}

@keyframes links-hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(0, -1.2%, 0); }
}

@keyframes links-content-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes links-dock-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .links-hero-media img,
  .links-brand,
  .links-hero-blurb,
  .links-site-chip--desktop,
  .links-site-chip--mobile,
  .links-reveal,
  .links-reveal .links-row,
  .links-row-arrow,
  .links-site-chip-go {
    animation: none !important;
  }

  .links-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .links-reveal .links-row {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  .links-row:hover .links-row-arrow,
  .links-row:focus-visible .links-row-arrow {
    transform: none;
  }
}

/* —— Mobile / tablet —— */
@media (max-width: 1030px) {
  body.links-body {
    --links-dock-offset: calc(76px + max(14px, env(safe-area-inset-bottom, 0px)));
  }

  .links-hero {
    min-height: clamp(240px, 42vh, 380px);
  }

  .links-hero-content {
    padding-top: max(1.75rem, env(safe-area-inset-top, 0px) + 1rem);
    padding-bottom: 1.5rem;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
  }

  .links-hero-blurb {
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.4;
  }

  .links-brand {
    font-size: clamp(2.8rem, 13vw, 5.5rem);
  }

  /* Hide in-flow desktop CTA */
  .links-site-chip--desktop {
    display: none !important;
  }

  /*
   * Viewport-fixed mobile dock — left/right:0 + auto margins center it so
   * glass-press / enter-animation transforms cannot knock it off-center.
   * Width must bake in gutters; a definite width with left+right insets
   * ignores `right` and overflows the viewport.
   */
  .links-site-chip--mobile,
  .links-site-chip--mobile.glass-press,
  .links-site-chip--mobile.contact-cta {
    display: grid !important;
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    width: min(calc(100% - 2 * var(--site-gutter)), 26rem);
    max-width: none;
    margin-inline: auto;
    box-sizing: border-box;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
    align-items: center;
    column-gap: 0.65rem;
    min-height: 58px;
    padding: 0.55rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-shadow-lift);
    font-size: 1rem;
    font-weight: 500;
    animation: links-dock-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }

  .links-site-chip--mobile:hover:not(:active):not(.is-pressed),
  .links-site-chip--mobile:focus-visible:not(:active):not(.is-pressed),
  .links-site-chip--mobile.glass-press:hover:not(:active):not(.is-pressed),
  .links-site-chip--mobile.glass-press.is-proximity-hover:not(:active):not(.is-pressed),
  .links-site-chip--mobile.contact-cta:hover:not(:active):not(.is-pressed) {
    transform: perspective(700px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)) translateY(0) scale(1);
  }

  .links-site-chip--mobile.glass-press:active,
  .links-site-chip--mobile.glass-press.is-pressed {
    transform: perspective(700px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg)) translateY(2px) scale(0.98);
  }

  .links-site-chip-icon,
  .links-site-chip-go {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    overflow: hidden;
    isolation: isolate;
    background:
      linear-gradient(
        180deg,
        rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.1) 0%,
        rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.08) 100%
      ),
      var(--glass-bg);
    border: var(--glass-border);
    border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.32);
    box-shadow: var(--glass-shadow);
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow var(--glass-press-duration, 0.18s) var(--glass-press-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      transform var(--glass-press-duration, 0.18s) var(--glass-press-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .links-site-chip-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  .links-site-chip-label {
    position: relative;
    z-index: 1;
    text-align: center;
    justify-self: center;
    width: 100%;
  }

  .links-site-chip-go::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
      circle at var(--mouse-x) var(--mouse-y),
      var(--theme-hover-glow) 0%,
      var(--theme-hover-glow-soft) 35%,
      transparent 55%
    );
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 0;
  }

  .links-site-chip-go svg {
    position: relative;
    z-index: 1;
    width: 15px;
    height: 15px;
    display: block;
  }

  /* Navigate control — same hover/press language as contact-cta */
  .links-site-chip--mobile:hover .links-site-chip-go,
  .links-site-chip--mobile:focus-visible .links-site-chip-go {
    background:
      linear-gradient(
        180deg,
        rgb(var(--accent-glow-r) var(--accent-glow-g) var(--accent-glow-b) / 0.16) 0%,
        rgb(var(--accent-deep-r) var(--accent-deep-g) var(--accent-deep-b) / 0.12) 100%
      ),
      var(--glass-bg);
    border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.45);
    box-shadow: var(--glass-shadow-lift);
    transform: translateX(2px);
  }

  .links-site-chip--mobile:hover .links-site-chip-go::before,
  .links-site-chip--mobile:focus-visible .links-site-chip-go::before {
    opacity: 1;
  }

  .links-site-chip--mobile:active .links-site-chip-go,
  .links-site-chip--mobile.is-pressed .links-site-chip-go {
    box-shadow: var(--glass-shadow-pressed);
    transform: translateX(1px) translateY(1px) scale(0.96);
  }

  .links-site-chip--mobile:hover .links-site-chip-icon,
  .links-site-chip--mobile:focus-visible .links-site-chip-icon {
    border-color: rgb(var(--accent-bright-r) var(--accent-bright-g) var(--accent-bright-b) / 0.45);
    box-shadow: var(--glass-shadow-lift);
  }

  /* Animate sections + every link row on load (not on scroll) */
  .links-reveal {
    transition-delay: 0s;
  }

  .links-grid .links-section:nth-child(1).links-reveal.is-in {
    transition-delay: 0.08s;
  }

  .links-grid .links-section:nth-child(2).links-reveal.is-in {
    transition-delay: 0.16s;
  }

  .links-reveal .links-row {
    opacity: 0;
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s ease,
      background 0.2s ease,
      border-color 0.2s ease,
      box-shadow var(--glass-press-duration, 0.18s) var(--glass-press-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .links-reveal.is-in .links-row {
    opacity: 1;
  }

  .links-reveal.is-in .links-row:nth-child(1) { transition-delay: 0.12s; }
  .links-reveal.is-in .links-row:nth-child(2) { transition-delay: 0.18s; }
  .links-reveal.is-in .links-row:nth-child(3) { transition-delay: 0.24s; }
  .links-reveal.is-in .links-row:nth-child(4) { transition-delay: 0.3s; }
  .links-reveal.is-in .links-row:nth-child(5) { transition-delay: 0.36s; }

  .links-grid .links-section:nth-child(2).links-reveal.is-in .links-row:nth-child(1) { transition-delay: 0.28s; }
  .links-grid .links-section:nth-child(2).links-reveal.is-in .links-row:nth-child(2) { transition-delay: 0.34s; }
  .links-grid .links-section:nth-child(2).links-reveal.is-in .links-row:nth-child(3) { transition-delay: 0.4s; }
  .links-grid .links-section:nth-child(2).links-reveal.is-in .links-row:nth-child(4) { transition-delay: 0.46s; }
}

@media (max-width: 859px) {
  .links-section-title {
    margin-bottom: 1rem;
  }

  .links-row {
    min-height: 56px;
    padding: 0.8rem 1rem 0.8rem 0.9rem;
  }

  .links-row-icon {
    width: 30px;
    height: 30px;
  }

  .links-row-label {
    font-size: 1.12rem;
  }
}

@media (max-width: 480px) {
  .links-brand {
    font-size: clamp(2.3rem, 11vw, 3.8rem);
  }
}