/* /links — the link-in-bio page: one column, big floating buttons, a real icon on every link. */
.links { width: min(100% - 2 * var(--gutter), 540px); margin: 0 auto; padding: var(--s-6) 0 var(--s-8); display: grid; gap: 12px; }

.links__head { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding-bottom: var(--s-4); }
.links__avatar { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a1608, #0f0804); border: 1px solid var(--line-2);
  box-shadow: 0 0 0 6px rgba(236,223,198,.04), 0 18px 40px -18px rgba(236,223,198,.35); font-size: 2.6rem; animation: lk-float 6s var(--ease-in-out) infinite; }
@keyframes lk-float { 50% { transform: translateY(-4px); } }
.links__head h1 { font-size: var(--fs-3xl); margin: 0; }
.links__head p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.links__social { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.links__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text-2); transition: color var(--t-base), background var(--t-base), border-color var(--t-base), transform var(--t-fast); }
.links__social a:hover { color: var(--on-moon); background: var(--moon); border-color: var(--moon); transform: translateY(-2px); }
.links__social svg { width: 18px; height: 18px; fill: currentColor; }

/* Link button */
.lk { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.9); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base), background var(--t-base); }
.lk:hover { transform: translateY(-2px) scale(1.01); border-color: var(--line-2); background: var(--hover); }
.lk:active { transform: scale(.99); }
.lk__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--surface-2); color: var(--c, var(--moon)); }
.lk__ico svg { width: 22px; height: 22px; fill: currentColor; }
.lk__ico svg.ln, .lk-tool__ico svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lk__txt b { font-weight: 500; }
.lk__txt small { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk__go { color: var(--text-3); transition: transform var(--t-base), color var(--t-base); }
.lk:hover .lk__go { color: var(--moon); transform: translateX(3px); }

/* YouTube — the hero button */
.lk--yt { min-height: 76px; background: linear-gradient(135deg, #f1e6d2, var(--moon)); border-color: var(--moon); color: var(--on-moon); box-shadow: 0 18px 40px -20px rgba(236,223,198,.5); }
.lk--yt:hover { background: linear-gradient(135deg, #f6ecd9, #f1e6d2); border-color: var(--moon); }
.lk--yt .lk__ico { background: #ff0033; color: #fff; width: 52px; height: 52px; border-radius: 16px; }
.lk--yt .lk__ico svg { width: 26px; height: 26px; }
.lk--yt .lk__txt b { font-size: var(--fs-lg); }
.lk--yt .lk__txt small, .lk--yt .lk__go { color: rgba(19,10,4,.62); }

/* Blocks */
.links__block { display: grid; gap: 10px; margin-top: var(--s-4); }
.links__label { display: flex; justify-content: space-between; align-items: baseline; padding-inline: 4px; }
.links__label h2 { margin: 0; font: 500 var(--fs-xs)/1 var(--font-mono); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); }
.links__label a { font-size: var(--fs-xs); color: var(--text-2); }
.links__label a:hover { color: var(--moon); }

/* Two big website tools */
.lk-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-tool { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--moon) 35%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--moon) 5%, var(--surface)), var(--surface)); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base); }
.lk-tool:hover { transform: translateY(-3px); border-color: var(--hover-line); }
.lk-tool__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--moon); color: var(--on-moon); margin-bottom: 6px; }
.lk-tool__ico svg { width: 22px; height: 22px; }
.lk-tool b { font-weight: 500; }
.lk-tool small { font-size: var(--fs-xs); color: var(--text-3); }

/* Newest sessions */
.go-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 96px; }
.go-quick__item { display: grid; gap: 6px; text-align: left; }
.go-quick__thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.go-quick__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.go-quick__item:hover img { transform: scale(1.05); }
.go-quick__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }
.go-quick__meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.go-quick__meta .len { width: 100%; color: var(--text-3); }

.links__mail { padding: var(--s-4); border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.links__mail p { margin: 0 0 4px; font-size: var(--fs-sm); color: var(--text-2); padding-inline: 4px; }
.links__note { margin: 2px 0 0; font-size: 11px; color: var(--text-3); padding-inline: 4px; }
.links__home { text-align: center; margin: var(--s-5) 0 0; }
.links__home a { color: var(--moon); border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .links__avatar { animation: none; } }
@media (max-width: 420px) { .links__social { gap: 5px; } .links__social a { width: 36px; height: 36px; } .links__social svg { width: 16px; height: 16px; } }

/* v2: centred buttons and labels */
.lk { display: grid; grid-template-columns: 44px 1fr 44px; text-align: center; padding: 10px; }
.lk--yt { grid-template-columns: 52px 1fr 52px; }
.lk__txt { justify-items: center; }
.lk__go { justify-self: center; }
.links__label { justify-content: center; position: relative; padding: 0; }
.links__label h2 { display: flex; align-items: center; gap: 12px; }
.links__label h2::before, .links__label h2::after { content: ""; width: 28px; height: 1px; background: var(--line-2); }
.links__label a { position: absolute; right: 4px; }
.links__block { margin-top: var(--s-5); }
.links__mail p, .links__note { text-align: center; }
.go-quick__meta { justify-content: center; text-align: center; }
.go-quick__meta .len { text-align: center; }
.lk-tool { justify-items: center; text-align: center; }

/* Follow along: brand tiles */
.lk-socs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lk-soc { display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); text-align: center;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base), background var(--t-base); }
.lk-soc:hover { transform: translateY(-3px); border-color: var(--hover-line); background: var(--hover); }
.lk-soc__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--c) 14%, var(--surface-2)); color: var(--c); margin-bottom: 4px; }
.lk-soc__ico svg { width: 22px; height: 22px; fill: currentColor; }
.lk-soc b { font-weight: 500; }
.lk-soc small { font-size: var(--fs-xs); color: var(--text-3); }
.lk__txt { min-width: 0; overflow: hidden; } .lk__txt small { max-width: 100%; }

/* placeholders with the same height as the real tiles (thumb + two meta lines) */
.skel-tile { display: grid; gap: 6px; }
.skel--line { height: 10px; border-radius: 4px; }
.skel--short { width: 55%; }
.go-quick__meta { min-height: 28px; }

/* ================= v3 — soft and round ================= */
.links { width: min(100% - 2 * var(--gutter), 480px); gap: 14px; padding: var(--s-7) 0 var(--s-9); }
.links__head { gap: var(--s-3); padding-bottom: var(--s-5); }
.links__avatar { width: 104px; height: 104px; font-size: 3rem; box-shadow: 0 0 0 1px var(--line-2), 0 0 0 10px rgba(236,223,198,.035), 0 0 60px -6px rgba(236,223,198,.28); }
.links__head p { max-width: 30ch; }
.links__social { gap: 10px; margin-top: var(--s-3); }
.links__social a { background: rgba(255,250,240,.03); }

/* buttons become soft pills */
.lk { border-radius: 999px; min-height: 66px; padding: 8px 18px 8px 8px; grid-template-columns: 50px 1fr 50px; background: var(--surface); border-color: rgba(240,228,210,.1);
  box-shadow: 0 1px 0 rgba(255,250,240,.04) inset, 0 14px 34px -22px rgba(0,0,0,.95); }
.lk:hover { transform: translateY(-2px); background: var(--hover); }
.lk__ico { width: 50px; height: 50px; border-radius: 50%; }
.lk--yt { min-height: 78px; grid-template-columns: 58px 1fr 58px; background: linear-gradient(135deg, #f4ead8, var(--moon)); }
.lk--yt .lk__ico { width: 58px; height: 58px; border-radius: 50%; }
.lk__go { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,250,240,.05); }
.lk--yt .lk__go { background: rgba(19,10,4,.08); }

/* sections breathe */
.links__block { margin-top: var(--s-7); gap: 12px; }
.links__label { margin-bottom: 4px; }

/* website tools: round cards */
.lk-tools { gap: 12px; }
.lk-tool { border-radius: 28px; padding: 20px 16px; gap: 6px; }
.lk-tool__ico { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 6px; }

/* follow tiles: round icons, soft cards */
.lk-socs { gap: 12px; }
.lk-soc { border-radius: 28px; padding: 20px 12px 18px; background: var(--surface); }
.lk-soc__ico { width: 52px; height: 52px; border-radius: 50%; }

/* newest sessions: rounder thumbs */
.go-quick { gap: 10px; }
.go-quick__thumb, .skel--tile { border-radius: 18px; }

/* letters card */
.links__mail { border-radius: 32px; padding: var(--s-5); background: var(--surface); }
.links__mail .field { border-radius: 999px; }
.links__home { margin-top: var(--s-7); }
.links__home a { display: inline-flex; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.links__home a:hover { border-color: var(--moon); }

.links__more { justify-self: center; font-size: var(--fs-xs); color: var(--text-2); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); margin-top: 4px; }
.links__more:hover { color: var(--moon); border-color: var(--moon); }
@media (max-width: 420px) { .links__social { gap: 6px; } .links__social a { width: 36px; height: 36px; } }

/* ================= v4 ================= */
/* intro: one clear line + a quiet second line, same height as before */
.links__tag { display: grid; gap: 4px; font-size: var(--fs-md) !important; color: var(--text) !important; letter-spacing: .01em; }
.links__tag span { font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

/* YouTube keeps its cream look on hover — same lift as the others */
.lk--yt:hover { background: linear-gradient(135deg, #f8f0e2, #efe3cc); border-color: var(--moon); }
.lk--yt:hover .lk__txt b, .lk--yt .lk__txt b { color: var(--on-moon); }

/* brand-coloured icons in Follow along */
.lk-soc__ico { color: #fff; }
.lk-soc[href*="5a5sf"] .lk-soc__ico { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.lk-soc[href*="insta"] .lk-soc__ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.lk-soc[href*="threads"] .lk-soc__ico { background: #fff; color: #000; }
.lk-soc[href*="pinterest"] .lk-soc__ico { background: #e60023; }
.lk-soc:hover .lk-soc__ico { transform: scale(1.06); }
.lk-soc__ico { transition: transform .8s var(--ease-out); }

/* On luneialabs.com: visual tool cards */
.lk-tool { justify-items: center; text-align: center; padding: 22px 14px 20px; }
.lk-tool b { font-family: inherit; font-weight: 500; font-size: 1rem; letter-spacing: normal; }
.lk-tool small { line-height: 1.45; }
.lk-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; }
.lk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lk-ring circle { fill: none; stroke: var(--line-2); stroke-width: 2.5; }
.lk-ring .p { stroke: var(--moon); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 84; transition: stroke-dashoffset 2.4s var(--ease-out); }
.lk-ring i { font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--text-2); }
.lk-tool--timer:hover .lk-ring .p, .lk-tool--timer.is-in .lk-ring .p { stroke-dashoffset: 20; }
.lk-bars { display: flex; align-items: center; gap: 3px; width: 100%; max-width: 130px; height: 64px; margin-bottom: 8px; }
.lk-bars i { height: 10px; border-radius: 4px; background: var(--moon); opacity: .85; }
.lk-bars u { height: 10px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 4px); }
.lk-tool--finder:hover .lk-bars i, .lk-tool--finder.is-in .lk-bars i { animation: pathbar 3.2s var(--ease-in-out) 2; }
.lk-tool--finder:hover .lk-bars i:nth-of-type(2) { animation-delay: .3s; } .lk-tool--finder:hover .lk-bars i:nth-of-type(3) { animation-delay: .6s; }
@keyframes pathbar { 50% { opacity: .35; } }

/* newest post as a picture card */
.lk-post { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: center; padding: 8px; border-radius: 28px; border: 1px solid rgba(240,228,210,.1);
  background: var(--surface); transition: transform var(--t-base) var(--ease-out), border-color var(--t-base); }
.lk-post:hover { transform: translateY(-2px); border-color: var(--line-2); }
.lk-post__img { display: block; aspect-ratio: 4/3; border-radius: 22px; overflow: hidden; background: var(--surface-2); }
.lk-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.lk-post:hover .lk-post__img img { transform: scale(1.05); }
.lk-post__txt { display: grid; gap: 4px; padding-right: 10px; min-width: 0; }
.lk-post__txt small { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lk-post__txt b { font-family: inherit; font-weight: 500; font-size: 1rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lk-post__txt em { font-style: normal; font-size: var(--fs-xs); color: var(--moon); }

.links__block--shop { margin-top: var(--s-6); }
@media (prefers-reduced-motion: reduce) { .lk-ring .p { transition: none; } .lk-tool--finder .lk-bars i { animation: none !important; } }
.lk-stat { color: var(--moon); font-weight: 500; }

/* real logo tile */
.links__avatar { border-radius: 28px !important; background: none !important; overflow: hidden; }
.links__avatar img { width: 100%; height: 100%; display: block; }

/* ================= v5 — shorter page, new order ================= */
.links { gap: 10px; padding: var(--s-5) 0 var(--s-7); }
.links__head { padding-bottom: var(--s-3); gap: var(--s-2); }
.links__avatar { width: 88px; height: 88px; }
.links__block { margin-top: var(--s-4); gap: 8px; }
.links__block--socs, .links__block--shop, .links__block--kofi { margin-top: 0; }
.links__label { margin-bottom: 0; }
.lk { min-height: 60px; }
.lk--yt { min-height: 70px; }

/* social: 2×2, icon beside the text */
.lk-socs { gap: 8px; }
.lk-soc { grid-template-columns: 40px 1fr; justify-items: start; align-items: center; column-gap: 10px; padding: 10px 12px 10px 10px; border-radius: 999px; text-align: left; }
.lk-soc__ico { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
.lk-soc b { align-self: end; font-size: var(--fs-sm); }
.lk-soc small { align-self: start; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* website tools: tighter */
.lk-tool { padding: 14px 12px 14px; gap: 3px; border-radius: 24px; }
.lk-ring, .lk-bars { height: 52px; width: 52px; margin-bottom: 4px; }
.lk-bars { width: 100%; }

/* blog: one highlighted card + two quiet rows */
.lk-blog { display: grid; gap: 6px; }
.lk-post { grid-template-columns: 96px 1fr; gap: 12px; padding: 6px; border-radius: 24px; border-color: color-mix(in srgb, var(--moon) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--moon) 9%, var(--surface)), var(--surface)); }
.lk-post__img { border-radius: 18px; }
.lk-post__txt small { color: var(--moon); }
.lk-mini { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: 10px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,250,240,.02);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base), background var(--t-base); }
.lk-mini:hover { transform: translateY(-1px); border-color: var(--line-2); background: rgba(255,250,240,.045); }
.lk-mini__img { display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--surface-2); }
.lk-mini__img img { width: 100%; height: 100%; object-fit: cover; }
.lk-mini__txt b { font-weight: 400; font-size: var(--fs-sm); line-height: 1.3; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lk-mini__go { color: var(--text-3); text-align: center; transition: color var(--t-base), transform var(--t-base); }
.lk-mini:hover .lk-mini__go { color: var(--moon); transform: translateX(2px); }
.lk-mini:hover .lk-mini__txt b { color: var(--text); }

/* product buttons: title on one line */
.lk--picks .lk__txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.links__mail { padding: var(--s-4); border-radius: 28px; }
.links__home { margin-top: var(--s-4); }

/* ================= v6 — logo, email pills, background, spacing ================= */
/* logo: round brown disc, +5% */
.links__avatar { width: 92px; height: 92px; border-radius: 50% !important; }

/* email: two pills of the same height, side by side (also on phones) */
.links__mail .field { display: flex; flex-direction: row; gap: 8px; padding: 0; border: 0; background: none; border-radius: 0; }
.links__mail .field input { flex: 1 1 0; min-width: 0; width: 0; height: 52px; min-height: 0; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); }
.links__mail .field .btn { flex: none; width: auto; height: 52px; min-width: 128px; padding: 0 22px; border-radius: 999px; justify-content: center; }

/* section spacing from "Try it on…" down: +20% (only between sections, not between buttons) */
section[aria-labelledby="lk-site"], .links__block--shop, .links__mail, .links__block--kofi { margin-top: calc(var(--s-4) * 1.25); }


/* Pomodoro Finder's previous ambient layer is not used on /links/ */
/* the parallax layers must never widen the page on phones */
.links-page { overflow-x: clip; }
/* nine platform icons: 5 + 4 instead of 8 + 1 */

/* ================= v7 — calmer logo, even rhythm ================= */
.links__avatar { box-shadow: 0 0 0 1px var(--line-2), 0 0 26px -10px rgba(236,223,198,.10); }
.links__head { gap: var(--s-3); }
/* from "Study together" down: items 10px apart, sections 32px apart */
.links__block, .lk-blog, .lk-tools { gap: 10px; }
section[aria-labelledby="lk-com"], section[aria-labelledby="lk-site"], .links__block--shop, .links__mail, .links__block--kofi { margin-top: 22px; }
.links__home { margin-top: 22px; }
.lk-mini { grid-template-columns: 44px 1fr 24px; min-height: 56px; padding: 6px 14px 6px 6px; }
.lk-mini__img { width: 44px; height: 44px; }

/* ================= v8 — two browns: boxes, header and footer share the dark one ================= */
.lk:hover, .lk-mini:hover, .lk-soc:hover { background: var(--hover); }

/* Ivan 2026-10-14: nothing on this page is a solid light block. Watch on YouTube uses the same soft
   tint as the Timer and Finder tiles (readable on hover), and the blog card matches the quiet rows below it. */
body .lk--yt { background: linear-gradient(160deg, color-mix(in srgb, var(--moon) 5%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--moon) 35%, transparent); color: var(--text); box-shadow: none; }
body .lk--yt:hover { background: var(--hover); border-color: var(--hover-line); }
body .lk--yt .lk__txt b, body .lk--yt:hover .lk__txt b { color: var(--text); }
body .lk--yt .lk__txt small, body .lk--yt .lk__go { color: var(--text-3); }
body .lk--yt:hover .lk__go { color: var(--moon); }
body .lk--yt .lk__go { background: none; }
body .lk-post { border-color: var(--line); background: rgba(255, 250, 240, .02); }
body .lk-post:hover { border-color: var(--line-2); background: rgba(255, 250, 240, .045); }
body .lk-post__txt small { color: var(--text-3); }