:root{
  --black:#0d0d0c;--black-2:#191917;--black-3:#262622;--line:#34342e;
  --yellow:#ffd60a;--yellow-hover:#ffe14d;
  --on-dark:#f5f3ec;--muted:#b8b5ab;
  --display:'Karantina','Rubik',sans-serif;--body:'Rubik',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;background:var(--black);color:var(--on-dark);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(70% 36% at 50% 0,#ffd60a26,transparent 70%)}
h1,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
picture{display:contents}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:12px}

.links{width:100%;max-width:480px;margin:0 auto;padding-bottom:max(40px,env(safe-area-inset-bottom))}

/* Cover photo that melts into the page */
.cover{position:relative;height:min(76svh,640px);overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 99%);mask-image:linear-gradient(180deg,#000 52%,transparent 99%)}
.cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,12,.4) 0,transparent 22%,transparent 60%,rgba(13,13,12,.5) 88%,var(--black) 100%)}
.kebab{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s cubic-bezier(.3,1.7,.5,1)}
.kebab svg{width:22px;height:22px;fill:currentColor}
.kebab:hover{transform:scale(1.1)}
.kebab-top{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;z-index:2;background:rgba(13,13,12,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Name, tagline, social icons */
.who{position:relative;z-index:1;margin-top:-118px;text-align:center;padding-inline:20px}
.who h1{font-family:var(--display);font-weight:700;font-size:clamp(72px,22vw,104px);line-height:.88;letter-spacing:.005em}
.who h1 span{color:var(--yellow)}
.tag{font-size:22px;font-weight:500;margin-top:14px}
.sub{color:var(--muted);font-size:15px;margin-top:6px}
.socials{display:flex;justify-content:center;gap:12px;margin-top:22px}
.socials a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--yellow);border:1.5px solid var(--line);background:var(--black-2);transition:transform .25s cubic-bezier(.3,1.7,.5,1),background .2s,border-color .2s,color .2s}
.socials a:hover{transform:translateY(-3px) scale(1.06);background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.socials svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.socials svg .dot,.socials svg .fill{fill:currentColor;stroke:none}

/* Link cards */
.cards{display:grid;gap:14px;margin-top:30px;padding-inline:16px}
.card{direction:ltr;display:flex;align-items:center;gap:4px;min-height:84px;border-radius:999px;background:var(--black-2);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .2s,background .2s,box-shadow .25s}
.card:hover{transform:translateY(-3px);border-color:var(--yellow);box-shadow:0 14px 30px -18px #ffd60a99}
.card:active{transform:scale(.985)}
.card-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:84px;padding:10px 4px 10px 12px;border-radius:999px}
.thumb{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--black-3);box-shadow:0 0 0 2px #ffffff14}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .5s var(--ease)}
.card:hover .thumb img{transform:scale(1.1)}
.txt{display:flex;flex-direction:column;flex:1;min-width:0;text-align:center;direction:rtl}
.txt b{font-size:17.5px;font-weight:600;line-height:1.25}
.txt small{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.3}
.card .kebab{flex:none;margin-right:8px;color:var(--muted)}
.card .kebab:hover{background:#ffffff14;color:var(--on-dark)}
/* The first card is the main call to action */
.card.primary{background:var(--yellow);border-color:var(--yellow);color:var(--black);min-height:92px}
.card.primary .card-main{min-height:92px}
.card.primary .thumb{width:70px;height:70px;background:var(--black);box-shadow:0 0 0 2px #0d0d0c26}
.card.primary .txt small{color:#3d3a1f}
.card.primary .txt b{font-size:20px}
.card.primary .kebab{color:#3d3a1f}
.card.primary .kebab:hover{background:#0d0d0c1f;color:var(--black)}
.card.primary:hover{background:var(--yellow-hover);box-shadow:0 16px 36px -14px #ffd60acc}

/* Footer */
footer{margin-top:44px;text-align:center;color:var(--muted);font-size:14px;padding-inline:20px}
.home{font-family:var(--display);font-size:34px;font-weight:700;color:var(--on-dark);display:inline-flex;gap:8px;line-height:1}
.home span:last-child{color:var(--yellow)}
footer p{margin-top:10px}
footer a:hover{color:var(--yellow)}
.copy{opacity:.8}

.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));translate:-50% 20px;background:var(--on-dark);color:var(--black);padding:12px 20px;border-radius:999px;font-weight:500;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s,translate .3s var(--ease);z-index:10}
.toast.show{opacity:1;translate:-50% 0}

/* Entrance */
@media(prefers-reduced-motion:no-preference){
  .cover img{animation:cover-in 1.2s var(--ease) both}
  .who h1,.tag,.sub,.socials{animation:rise .8s var(--ease) both}
  .who h1{animation-delay:.1s}.tag{animation-delay:.2s}.sub{animation-delay:.28s}.socials{animation-delay:.36s}
  .card{animation:rise .7s var(--ease) both;animation-delay:calc(.45s + var(--i) * .08s)}
  footer{animation:rise .7s .95s var(--ease) both}
}
@keyframes cover-in{from{opacity:0;transform:scale(1.06)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* On wide screens the page stays a phone-sized column */
@media(min-width:600px){
  body{padding-block:24px}
  .links{border-radius:36px;overflow:hidden;background:var(--black);box-shadow:0 0 0 1px #ffffff10,0 40px 90px -40px #000}
  .cover{height:600px}
}
@media(max-width:360px){
  .txt b{font-size:16.5px}.card.primary .txt b{font-size:18px}
  .thumb{width:56px;height:56px}.card.primary .thumb{width:62px;height:62px}
}

/* Icon set: one stroke weight, rounded ends, one yellow accent per icon */
.thumb{display:flex;align-items:center;justify-content:center;background:var(--black-3);box-shadow:inset 0 0 0 1.5px #ffd60a40}
.ico{width:60%;height:60%;fill:none;stroke:var(--yellow);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.ico .acc{fill:var(--yellow);stroke:none}
.card:hover .ico{transform:scale(1.12) rotate(-4deg)}
.card.primary .thumb{background:var(--black);box-shadow:none}
.brand{width:56%;height:56%;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.card:hover .brand{transform:scale(1.12)}
.thumb:has(.brand){background:#fff}
.thumb:has(.brand-tt){background:#000}
.brand-tt{width:60%;height:60%}
.socials a .brand{width:28px;height:28px}
.socials a:hover .brand{transform:none}