/* ============================================================
   YesTravel — link-in-bio hub
   Faithful to the link.me / Linktree convention:
   centered narrow column · avatar + badge · name + @handle ·
   bare social icon row · flat full-width cards with centered
   text · Videos carousel · lots of whitespace · clean sans.
   Pure CSS. Only external resource: fonts.bunny.net.
   No cookies, no trackers, no third-party embeds, no emoji icons.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

:root{
  --bg:#f4f0e8;
  --bg-2:#efe9dd;
  --card:#ffffff;
  --ink:#1b1712;
  --ink-2:#5f564a;
  --muted:#988d7c;
  --line:#e7dfd0;
  --line-2:#efe8da;
  --accent:#b3812c;      /* warm gold — used sparingly */
  --accent-deep:#8c6117;
  --dark:#181410;        /* primary button */
  --ok:#1f7a4d;          /* whatsapp green, flat */
  --radius:17px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:'Instrument Sans','Vazirmatn',system-ui,-apple-system,sans-serif;
  --fa:'Vazirmatn',system-ui,sans-serif;
}

body{
  font-family:var(--sans);
  background:
    radial-gradient(120% 80% at 50% -10%,#faf7f1,transparent 60%),
    var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
}

/* ---------- centered column ---------- */
.page{max-width:480px;margin-inline:auto;padding:16px clamp(18px,5vw,22px) 56px;
  display:flex;flex-direction:column;min-height:100vh}

/* ---------- top bar (minimal) ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-block-end:clamp(20px,5vh,40px)}
.chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--line);
  background:rgba(255,255,255,.6);border-radius:999px;font-size:.85rem;font-weight:600;color:var(--ink);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,border-color .25s}
.chip:hover{background:#fff}
.chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang{padding:4px}
.lang a{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--muted);transition:color .2s,background .2s}
.lang a[aria-current="true"]{background:var(--ink);color:var(--bg)}
.lang a:not([aria-current]):hover{color:var(--ink)}

/* ---------- profile header ---------- */
.profile{text-align:center;display:flex;flex-direction:column;align-items:center;margin-block-end:clamp(20px,4vh,30px)}
.avatar{position:relative;width:108px;height:108px;border-radius:50%;overflow:visible;margin-block-end:16px;
  background:conic-gradient(from 215deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);
  box-shadow:0 12px 28px -12px rgba(40,28,10,.5)}
.avatar .pic{position:absolute;inset:4px;border-radius:50%;overflow:hidden;border:3px solid var(--bg);
  background:radial-gradient(130% 130% at 30% 20%,#2c5a60,#16323a 72%);
  display:grid;place-items:center}
.avatar .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar .pic .mono{font-weight:600;font-size:2.5rem;color:#f4f0e8;letter-spacing:.02em}
.avatar .verified{position:absolute;inset-block-end:2px;inset-inline-end:2px;width:28px;height:28px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);display:grid;place-items:center}
.avatar .verified svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.name{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0;display:inline-flex;align-items:center;gap:8px}
.uname{color:var(--muted);font-weight:500;font-size:.95rem;margin:3px 0 0}
.bio{color:var(--ink-2);font-size:.98rem;max-width:32ch;margin:12px auto 0}

/* ---------- social icon row (bare, round) ---------- */
.socials{display:flex;gap:14px;justify-content:center;margin-block-start:18px}
.socials a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;border:0;box-shadow:0 7px 16px -8px rgba(40,28,10,.55)}
.socials svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.socials .fill svg{fill:currentColor;stroke:none}
/* real brand colours for the logos */
.socials a.ig{background:radial-gradient(120% 120% at 28% 108%,#fdd764 6%,#fa7e1e 26%,#d62976 52%,#962fbf 74%,#4f5bd5 100%)}
.socials a.tt{background:#0f0f10}
.socials a.wa{background:#25d366}

/* ---------- link buttons (flat, full width, centered text) ---------- */
.stack{display:flex;flex-direction:column;gap:14px;margin-block-start:6px}
.btn-lnk{position:relative;display:flex;align-items:center;justify-content:center;min-height:62px;
  padding:14px 52px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(40,28,10,.04);
  font-weight:600;font-size:1.02rem;color:var(--ink);text-align:center}
.btn-lnk .thumb{position:absolute;inset-inline-start:9px;inset-block-start:50%;translate:0 -50%;
  width:44px;height:44px;border-radius:12px;overflow:hidden;display:grid;place-items:center;color:#f4f0e8}
.btn-lnk .thumb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn-lnk .kebab{position:absolute;inset-inline-end:14px;inset-block-start:50%;translate:0 -50%;color:var(--muted);display:grid;gap:3px}
.btn-lnk .kebab i{width:4px;height:4px;border-radius:50%;background:currentColor;display:block}

/* primary — the single solid, high-contrast block (no gradient) */
.btn-lnk.primary{background:var(--dark);border-color:var(--dark);color:#fbf7ef;box-shadow:0 12px 24px -14px rgba(24,20,16,.7)}
.btn-lnk.primary .thumb{background:rgba(255,255,255,.12)}
.btn-lnk.primary .kebab{color:rgba(251,247,239,.55)}

/* thumbnail tints */
.tint-wa{background:var(--ok)}
.tint-web{background:linear-gradient(150deg,#2c5a60,#16323a)}
.tint-grp{background:var(--accent-deep)}

/* ---------- content block (Videos etc.) ---------- */
.block{margin-block-start:clamp(30px,6vh,46px)}
.block-h{text-align:center;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;color:var(--ink)}

/* featured 16:9 */
.feature{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;
  background:radial-gradient(120% 120% at 30% 10%,#2c5a60,#142a30 72%);box-shadow:0 16px 34px -22px rgba(40,28,10,.5)}
.feature video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,18,.05),rgba(8,16,18,.5))}
.feature .play{position:absolute;inset:0;display:grid;place-items:center}
.feature .play .pc{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.feature .play .pc svg{width:22px;height:22px;fill:#fff;margin-inline-start:3px}
.feature:hover .play .pc{background:var(--accent)}
.feature .cap{position:absolute;inset-block-end:14px;inset-inline:16px;color:#fff;font-weight:600;font-size:.95rem;text-align:start;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.feature .cap .src{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-block-end:3px}

/* videos carousel (vertical reels) */
.reel-wrap{margin-inline:calc(-1*clamp(18px,5vw,22px));padding-inline:clamp(18px,5vw,22px)}
.reel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-block:2px 8px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.clip{flex:0 0 47%;max-width:180px;scroll-snap-align:start;position:relative;border-radius:14px;overflow:hidden;
  aspect-ratio:9/14;box-shadow:0 8px 20px -14px rgba(40,28,10,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.clip:hover{transform:translateY(-3px);box-shadow:0 16px 28px -16px rgba(40,28,10,.5)}
.clip .thumb{position:absolute;inset:0}
.clip .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip.a .thumb{background:linear-gradient(155deg,#2c5a60,#122327)}
.clip.b .thumb{background:linear-gradient(155deg,#7a3a22,#2a120a)}
.clip.c .thumb{background:linear-gradient(155deg,#8a6a1c,#2e2107)}
.clip.d .thumb{background:linear-gradient(155deg,#334a4a,#141f1f)}
.clip .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,10,14,.72))}
.clip .pl{position:absolute;inset-block-start:10px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center}
.clip .pl svg{width:12px;height:12px;fill:#fff;margin-inline-start:1px}
.clip .cap{position:absolute;inset-block-end:11px;inset-inline:11px;z-index:2}
.clip .cap .src{display:block;font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.clip .cap .ct{display:block;color:#fff;font-weight:600;font-size:.84rem;line-height:1.22;margin-block-start:2px}

/* ---------- footer ---------- */
.foot{margin-block-start:auto;padding-block-start:clamp(34px,7vh,56px);text-align:center}
.foot .contact{display:inline-flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-block-end:14px;font-size:.9rem}
.foot .contact a{color:var(--ink-2);font-weight:500}
.foot .contact a:hover{color:var(--accent-deep)}
.foot .priv{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}
.foot .priv svg{width:14px;height:14px;fill:none;stroke:var(--ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot .copy{display:block;margin-block-start:8px;color:var(--muted);font-size:.78rem}
.foot .wordmark{margin-block-start:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink);opacity:.5;font-size:.9rem}

/* ============================================================
   MOTION — subtle, intentional micro-interactions.
   Hidden + visible BOTH under html.js so .in always out-specifies
   the hidden state (no invisible-content bug). No-JS = shown.
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

@media (min-width:520px){ .clip{flex-basis:160px} }

/* ---------- click-to-load reel player (no third-party until tap) ---------- */
.vbox{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:18px;
  background:rgba(18,14,10,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vbox.open{display:grid}
.vbox .panel{position:relative;width:min(94vw,340px);max-height:90vh;overflow:auto;background:#0d0d0f;border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.vbox .host{min-height:200px;display:flex;align-items:center;justify-content:center}
.vbox .host blockquote{width:100%!important;margin:0!important}
.vbox .x{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.32)}
.vbox .x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.vbox .loading{color:#e9e2d4;text-align:center;padding:48px 20px;font-size:.9rem}
.vbox .loading a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.clip{cursor:pointer}

/* ============================================================
   BACKGROUND — fine dot grid (subtle, drifts very slowly).
   Pure CSS, no canvas, no libraries. Sits behind the content.
   ============================================================ */
/* Static fine dots — no motion (animating a 1px pattern shimmers/moirés and
   forces the chips' backdrop-filter to recompute every frame = lag). */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(40,28,10,.09) 1px,transparent 1.6px);
  background-size:22px 22px}
.page{position:relative;z-index:1}