/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url(/assets/AktivGrotesk-Light-dc8e4346cd8dcb89dd26f01c728abb2823e1d4eabecf0046db9cb7e86bb50ed4.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url(/assets/AktivGrotesk-Regular-c99e8b33eac411d7439219a0e2593b0821e376edc90a0f1005f1fac137efe0a4.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url(/assets/AktivGrotesk-Medium-46f2fce1917cbfb34701bbea5e484bace0a221f795b6474a6150046bd83c3e8c.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktiv Grotesk';
  src: url(/assets/AktivGrotesk-Bold-206e469918d37f7b052f153dd785d75d322760415ae20dd34fb54df30c594492.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
/* line 8, app/assets/stylesheets/links.scss */
:root {
  --navy: #0b1730;
  --glass-bg: rgba(8, 18, 38, 0.58);
  --glass-border: rgba(255, 255, 255, 0.2);
  --btn-bg: rgba(255, 255, 255, 0.14);
  --btn-bg-hover: rgba(255, 255, 255, 0.3);
  --btn-border: rgba(255, 255, 255, 0.32);
  --dashed-border: rgba(255, 255, 255, 0.4);
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.88);
  --text-muted: rgba(255, 255, 255, 0.78);
  --badge-bg: #f6c453;
  --badge-text: #1a1300;
  --font: 'Aktiv Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* line 24, app/assets/stylesheets/links.scss */
body.links-page {
  margin: 0;
  background: var(--navy);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  /* ---------- Desktop: full-bleed photo, two zones ---------- */
  /* ---------- Mobile: photo banner on top, solid navy below ---------- */
}

/* line 31, app/assets/stylesheets/links.scss */
body.links-page *, body.links-page *::before, body.links-page *::after {
  box-sizing: border-box;
}

/* line 32, app/assets/stylesheets/links.scss */
body.links-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* line 33, app/assets/stylesheets/links.scss */
body.links-page a {
  color: var(--text);
  text-decoration: none;
}

/* line 34, app/assets/stylesheets/links.scss */
body.links-page a:focus-visible {
  outline: 2px solid var(--badge-bg);
  outline-offset: 2px;
}

/* line 37, app/assets/stylesheets/links.scss */
body.links-page .page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  background: url(/assets/links/cyrille-ee81a60bf8be60a3819d6fa50e3ea7b569228643a17ad83aabbf7a64fc270da5.jpg) 30% 35%/cover no-repeat var(--navy);
}

/* line 48, app/assets/stylesheets/links.scss */
body.links-page .banner {
  display: none;
}

/* line 50, app/assets/stylesheets/links.scss */
body.links-page .panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* line 58, app/assets/stylesheets/links.scss */
body.links-page .greet-row {
  display: flex;
  justify-content: flex-end;
}

/* line 59, app/assets/stylesheets/links.scss */
body.links-page .greet {
  max-width: 460px;
  margin-right: 3%;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* line 67, app/assets/stylesheets/links.scss */
body.links-page .greet h1 {
  margin: 0;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* line 68, app/assets/stylesheets/links.scss */
body.links-page .greet p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* line 70, app/assets/stylesheets/links.scss */
body.links-page .links {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* line 80, app/assets/stylesheets/links.scss */
body.links-page .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 10px;
}

/* line 85, app/assets/stylesheets/links.scss */
body.links-page .tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  height: 100%;
  padding: 10px 18px;
  border-radius: 16px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  transition: background-color 0.15s ease;
}

/* line 98, app/assets/stylesheets/links.scss */
body.links-page a.tile:hover {
  background: var(--btn-bg-hover);
}

/* line 99, app/assets/stylesheets/links.scss */
body.links-page .tile-soon {
  background: transparent;
  border: 1px dashed var(--dashed-border);
}

/* line 100, app/assets/stylesheets/links.scss */
body.links-page .tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* line 101, app/assets/stylesheets/links.scss */
body.links-page .tile-title {
  font-size: 17px;
  font-weight: 500;
}

/* line 102, app/assets/stylesheets/links.scss */
body.links-page .tile-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* line 103, app/assets/stylesheets/links.scss */
body.links-page .arrow {
  flex-shrink: 0;
}

/* line 105, app/assets/stylesheets/links.scss */
body.links-page .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 26px;
  padding: 0 12px 0 13px;
  /* +1px left offsets trailing letter-spacing */
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--badge-text);
  background: var(--badge-bg);
  border-radius: 999px;
}

/* line 123, app/assets/stylesheets/links.scss */
body.links-page .socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* line 124, app/assets/stylesheets/links.scss */
body.links-page .icon-btn, body.links-page .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  transition: background-color 0.15s ease;
}

/* line 134, app/assets/stylesheets/links.scss */
body.links-page .icon-btn {
  width: 48px;
}

/* line 135, app/assets/stylesheets/links.scss */
body.links-page .icon-btn img {
  display: block;
}

/* line 136, app/assets/stylesheets/links.scss */
body.links-page .pill {
  gap: 8px;
  padding: 0 20px 0 16px;
  font-size: 15px;
  font-weight: 500;
}

/* line 137, app/assets/stylesheets/links.scss */
body.links-page .icon-btn:hover, body.links-page .pill:hover {
  background: var(--btn-bg-hover);
}

@media (max-width: 600px) {
  /* line 141, app/assets/stylesheets/links.scss */
  body.links-page .page {
    background: var(--navy);
    padding: 0 0 32px;
    gap: 0;
    justify-content: flex-start;
  }
  /* line 147, app/assets/stylesheets/links.scss */
  body.links-page .banner {
    display: block;
    height: 340px;
    background: url(/assets/links/cyrille-ee81a60bf8be60a3819d6fa50e3ea7b569228643a17ad83aabbf7a64fc270da5.jpg) 0% 10% / 180% auto no-repeat;
  }
  /* line 152, app/assets/stylesheets/links.scss */
  body.links-page .greet-row {
    justify-content: flex-start;
  }
  /* line 153, app/assets/stylesheets/links.scss */
  body.links-page .panel {
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* line 160, app/assets/stylesheets/links.scss */
  body.links-page .greet, body.links-page .links {
    margin: 0;
    max-width: none;
    padding: 24px 20px 8px;
  }
  /* line 161, app/assets/stylesheets/links.scss */
  body.links-page .greet h1 {
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* line 165, app/assets/stylesheets/links.scss */
  body.links-page * {
    transition: none !important;
  }
}