/* ==========================================================================
   Idle Deviling — link page
   Palette is pulled from the artwork: night-city navy + electric blue.
   ========================================================================== */

:root {
  --bg:          #05070d;
  --bg-raise:    #0d1220;
  --card:        rgba(19, 25, 41, 0.72);
  --card-hover:  rgba(26, 34, 55, 0.9);
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text:        #eef2f9;
  --text-dim:    #9aa6bd;
  --text-faint:  #64708a;

  --accent:      #4da3ff;
  --accent-soft: rgba(77, 163, 255, 0.16);

  --radius:      16px;
  --wrap:        620px;

  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Sticky footer: the page is a column at least as tall as the viewport, and
     the footer takes the leftover space above it, so it sits at the bottom of
     short pages and after the content on long ones. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* Ambient blue glow behind everything -------------------------------------- */

.glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% -10%,  rgba(59, 130, 246, 0.18), transparent 65%),
    radial-gradient(40rem 30rem at 90% 20%,   rgba(37, 99, 235, 0.10),  transparent 70%),
    radial-gradient(45rem 35rem at 5%  85%,   rgba(76, 29, 149, 0.12),  transparent 70%);
}

/* Banner ------------------------------------------------------------------- */

.hero {
  flex: none;
  position: relative;
  z-index: 1;
  height: clamp(170px, 32vw, 300px);
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  /* Fade the photo into the page background instead of a hard edge. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  opacity: 0.85;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 7, 13, 0.25), rgba(5, 7, 13, 0.85));
}

/* Layout ------------------------------------------------------------------- */

.wrap {
  flex: none;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px 0;
  /* Pull the profile block up over the banner. */
  margin-top: clamp(-88px, -13vw, -70px);
}

/* Profile ------------------------------------------------------------------ */

.profile {
  text-align: center;
  animation: rise 0.6s var(--ease) both;
}

.avatar {
  width: clamp(104px, 26vw, 132px);
  height: clamp(104px, 26vw, 132px);
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(77, 163, 255, 0.35),
    0 12px 34px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(77, 163, 255, 0.22);
}

.name {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.28em;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 22px rgba(77, 163, 255, 0.3);
}

/* Frames the headline without competing with it. */
.name__mark {
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1;
  text-shadow: none;
}

.handle {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* Headline line, carrying the 🔞 marks. */
.bio {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
  margin: 16px auto 0;
  max-width: 44ch;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
}

.bio__sub {
  margin: 10px auto 0;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The Japanese lines repeat the English ones, so they sit a step quieter.
   system-ui carries no Japanese glyphs on most desktops, hence the explicit
   fallbacks before the generic sans-serif. */
.bio__sub--jp {
  margin-top: 8px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI",
               "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  font-size: 0.84rem;
  /* One step down from the English via size, not colour: --text-faint drops
     under the 4.5:1 contrast floor for text this small. */
  color: var(--text-dim);
  opacity: 0.85;
}

/* Link cards --------------------------------------------------------------- */

.links { margin-top: 34px; }

.links__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links__item {
  /* Without this the grid track floors at the card's min-content width and the
     page overflows on narrow phones. */
  min-width: 0;
  animation: rise 0.55s var(--ease) both;
  animation-delay: calc(80ms + var(--i, 0) * 55ms);
}

.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  text-decoration: none;
  transition:
    transform 0.22s var(--ease),
    border-color 0.22s var(--ease),
    background-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--brand);
  transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease),
              background-color 0.22s var(--ease);
}

.card__icon svg { width: 21px; height: 21px; }

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

.card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card__sub {
  display: block;
  margin-top: 1px;
  font-size: 0.82rem;
  color: var(--text-faint);
  /* Wrap rather than truncate: long handles stay readable on small screens. */
  overflow-wrap: anywhere;
}

.card__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  opacity: 0.6;
  transition: transform 0.22s var(--ease), color 0.22s var(--ease),
              opacity 0.22s var(--ease);
}

.card__arrow svg { width: 16px; height: 16px; }

/* Featured (Patreon) */

.card--featured {
  /* Same vertical padding as every other card, so this one is emphasised by
     colour and type size rather than by being physically bigger. */
  padding: 14px 18px;
  border-color: color-mix(in srgb, var(--brand) 34%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 12%, transparent),
      transparent 62%),
    var(--card);
  box-shadow: 0 6px 26px -12px color-mix(in srgb, var(--brand) 60%, transparent);
}

/* The main funnel: sized up so it reads as the primary action rather than the
   first item in a list. It carries no subtitle, so the title does the work. */
/* 46px is the tallest the icon can be while the card still matches the 76px of
   the others (46 + 14px padding top and bottom + 1px borders). */
.card--featured .card__icon { width: 46px; height: 46px; }
.card--featured .card__icon svg { width: 24px; height: 24px; }
.card--featured .card__title { font-size: 1.35rem; }
.card--featured .badge { font-size: 0.78rem; padding: 3px 10px; }

.badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  white-space: nowrap;
}

/* Interaction -------------------------------------------------------------- */

.card:hover,
.card:focus-visible {
  transform: translateY(-2px);
  background-color: var(--card-hover);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow:
    0 10px 30px -14px rgba(0, 0, 0, 0.9),
    0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent),
    0 8px 34px -18px color-mix(in srgb, var(--brand) 85%, transparent);
}

.card:hover .card__icon,
.card:focus-visible .card__icon {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--brand) 55%, transparent);
  transform: scale(1.04);
}

.card:hover .card__arrow,
.card:focus-visible .card__arrow {
  color: var(--brand);
  opacity: 1;
  transform: translate(2px, -2px);
}

.card:active { transform: translateY(0); }

.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Footer ------------------------------------------------------------------- */

/* Footer ------------------------------------------------------------------- */

.foot {
  flex: none;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  /* auto top margin absorbs the leftover height, pinning this to the bottom */
  margin: auto auto 0;
  padding: 22px 20px 40px;
  text-align: center;
  border-top: 1px solid var(--line);
  animation: rise 0.6s var(--ease) both;
  animation-delay: 0.5s;
}

.foot__dom {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.foot__copy {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* Two columns for the non-featured links once there is room ---------------- */

/* 620px is where the container reaches full width, so two columns are only ever
   as narrow as they are at 620px. Splitting earlier squeezes the longest handle
   (@idledeviling.bsky.social) hard enough to break it mid-word. */
@media (min-width: 620px) {
  .links__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .links__item--wide { grid-column: 1 / -1; }

  /* The featured card takes a whole row, so the paired cards start on an even
     child index. A last card on an even index is therefore alone on its row —
     stretch it across instead of leaving a gap. */
  .links__item:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* Motion ------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover { transform: none; }
}

/* Fallback for browsers without color-mix() -------------------------------- */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .card__icon { background: rgba(255, 255, 255, 0.06); border-color: var(--line); }
  .card--featured { border-color: var(--line-strong); }
  .badge { background: var(--accent-soft); border-color: var(--line-strong); }
  .card:hover { border-color: var(--line-strong); }
}