/* ==========================================================================
   Dom's Sidequest, link in bio

   Mobile-first: designed at 390px, then allowed to breathe. Nearly all traffic
   arrives from someone tapping a profile link on a phone, so the small screen
   is the real design, not the fallback.

   Content is vertically centred rather than pinned to the top with the footer
   pushed down. With only three links the page is short, and centring is what
   stops a band of dead space opening up underneath them.

   Evergreen by construction: no project name, episode count, or current-build
   reference appears anywhere, so the page never goes stale.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 0;
}

/* --- masthead ------------------------------------------------------------ */

.top {
  padding: 0 var(--pad) 26px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}

.wordmark {
  margin: 0;
  padding: 0 var(--pad);
  font-family: var(--font-display);
  font-weight: 400; /* Archivo Black ships one weight; 700 would synthesise */
  /* Fluid so the wordmark never wraps, down to a 320px screen */
  font-size: clamp(50px, 14.6vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.84;
  text-transform: uppercase;
}

/* Second line is outline only. This is the signature move of the direction. */
.wordmark span {
  display: block;
  color: var(--bg);
  -webkit-text-stroke: 2px var(--fg);
}

.tag {
  margin: 24px 0 0;
  padding: 0 var(--pad);
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rule {
  margin: 26px var(--pad) 0;
  height: 2px;
  background: var(--fg);
}

/* --- channel links -------------------------------------------------------- */

.links {
  margin-top: 4px;
}

.link {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Comfortably past the 44px tap-target floor, with room for two lines */
  min-height: 78px;
  padding: 16px var(--pad);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: background 90ms ease;
}

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

.link-text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 6vw, 27px);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.link-text i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13px;
  color: var(--dim);
  /* Long handles must truncate rather than push the arrow off-screen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-go {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
}

/* Full inversion on hover. Colour flips instantly, nothing animates but that. */
@media (hover: hover) {
  .link:hover {
    background: var(--fg);
    color: var(--bg);
  }
  .link:hover .link-text i { color: rgba(0, 0, 0, 0.62); }
}

.link:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: -3px;
}

/* --- footer --------------------------------------------------------------- */

.foot {
  padding: 20px var(--pad) 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- wider screens -------------------------------------------------------- */

@media (min-width: 640px) {
  .wrap { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .link { transition: none; }
}