/* =========================================================
   Samunnat Tuladhar portfolio — shared stylesheet
   ========================================================= */
:root { --ink:#302b45; --muted:#706b81; --cream:#fffaf5; --pink:#f6c8d5; --lavender:#dcd4f5; --mint:#cfe9df; --peach:#f9d9bd; --accent:#d8769b; --shadow:0 18px 45px rgba(79,62,91,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Georgia, 'Times New Roman', serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.background-shapes { position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(circle at 70% 20%, #fff 0, transparent 32%), var(--cream); }
.background-shapes span { position:absolute; display:block; border-radius:45% 55% 60% 40%; filter:blur(2px); opacity:.52; animation:drift 18s ease-in-out infinite alternate; }
.background-shapes span:nth-child(1) { width:55vw; height:42vw; max-width:650px; max-height:500px; background:radial-gradient(circle, var(--lavender), transparent 68%); top:-12%; left:-12%; }
.background-shapes span:nth-child(2) { width:48vw; height:50vw; max-width:560px; max-height:620px; background:radial-gradient(circle, var(--pink), transparent 68%); right:-13%; bottom:-18%; animation-delay:-7s; }
.background-shapes span:nth-child(3) { width:30vw; height:28vw; background:radial-gradient(circle, var(--mint), transparent 70%); left:40%; bottom:6%; animation-delay:-12s; }
@keyframes drift { to { transform:translate(4vw, 3vh) rotate(12deg) scale(1.08); } }
.site-header { width:min(1120px, calc(100% - 40px)); margin:auto; padding:25px 0; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { font-size:1.65rem; font-weight:bold; letter-spacing:-.08em; transition:.25s; }.brand span,.sparkle { color:var(--accent); }.brand:hover { transform:scale(1.08); color:var(--accent); }
.site-nav { display:flex; gap:8px; align-items:center; }.site-nav a { padding:10px 16px; color:var(--muted); border-radius:999px; transition:.25s; }.site-nav a:hover,.site-nav a.active { color:var(--ink); background:#fff; box-shadow:0 5px 18px rgba(79,62,91,.08); transform:scale(1.04); }
.menu-toggle { display:none; border:0; background:#fff; border-radius:50%; padding:9px 12px; font-size:1.1rem; color:var(--ink); }
.page-shell { width:min(1120px, calc(100% - 40px)); margin:auto; }.hero { min-height:calc(100vh - 100px); display:grid; grid-template-columns:1.1fr .9fr; gap:7vw; align-items:center; padding:55px 0 100px; }.eyebrow { color:var(--accent); font-size:1rem; letter-spacing:.08em; margin:0 0 20px; }.sparkle { font-size:1.35em; display:inline-block; animation:twinkle 2.3s ease-in-out infinite; }@keyframes twinkle { 50% { transform:rotate(20deg) scale(1.2); } }
h1 { font-size:clamp(2.7rem, 6vw, 5.2rem); line-height:.98; letter-spacing:-.06em; margin:0; font-weight:500; }.hero h1 em,.page-title em { color:var(--accent); font-style:italic; }.intro,.page-lead { color:var(--muted); font-family:Arial,sans-serif; font-size:1.06rem; line-height:1.7; max-width:520px; margin:26px 0 30px; }.button-row { display:flex; gap:13px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; gap:18px; border-radius:999px; padding:14px 21px; font-family:Arial,sans-serif; font-size:.88rem; transition:.25s; }.button:hover,.contact-card:hover { transform:translateY(-3px) scale(1.03); }.button.primary { background:var(--ink); color:white; }.button.primary:hover { background:var(--accent); }.button.secondary { background:#fff; box-shadow:var(--shadow); }.button.secondary:hover { color:var(--accent); }
.portrait-card { position:relative; justify-self:center; width:min(100%,390px); }.portrait-ring { padding:13px; background:linear-gradient(140deg,#fff 15%,var(--pink),var(--lavender)); border-radius:49% 51% 45% 55%; box-shadow:var(--shadow); transform:rotate(4deg); }.portrait-ring img { display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center top; border-radius:46% 54% 48% 52%; transform:rotate(-4deg); filter:saturate(.9); }.floating-note { position:absolute; background:#fff; border-radius:12px; padding:10px 13px; box-shadow:var(--shadow); font-size:.78rem; font-style:italic; animation:float 4s ease-in-out infinite; }.floating-note span { color:var(--accent); }.note-one { top:15%; right:-7%; }.note-two { bottom:12%; left:-9%; animation-delay:-2s; }@keyframes float { 50% { transform:translateY(-8px) rotate(-3deg); } }
.site-footer { text-align:center; color:#9b95a7; font: .75rem Arial,sans-serif; padding:20px; }.site-footer span { color:var(--accent); padding:0 4px; }.content-page { padding:75px 0 110px; }.page-title { font-size:clamp(2.8rem,7vw,5.5rem); }.page-lead { margin-top:22px; }.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:55px; }.project-card { min-height:300px; border-radius:28px; padding:28px; background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(246,200,213,.62)); box-shadow:var(--shadow); position:relative; overflow:hidden; }.project-card:after { content:''; position:absolute; width:180px;height:180px; border-radius:50%; background:var(--lavender); opacity:.45; right:-60px; bottom:-70px; }.project-number { color:var(--accent); font: .8rem Arial,sans-serif; }.project-icon { font-size:3.5rem; color:var(--accent); margin:25px 0 15px; }.project-card h2 { font-size:1.7rem; font-weight:500; margin:0 0 10px; }.project-card p { color:var(--muted); font: .95rem/1.6 Arial,sans-serif; max-width:330px; }.status-pill { display:inline-block; padding:7px 12px; border-radius:20px; color:#557e70; background:var(--mint); font: .72rem Arial,sans-serif; margin-top:8px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:48px; max-width:760px; }.contact-card { min-height:115px; padding:24px; border-radius:22px; display:flex; align-items:center; gap:15px; background:rgba(255,255,255,.78); box-shadow:var(--shadow); transition:.25s; position:relative; }.contact-card.linkedin { background:linear-gradient(135deg,#f0e9fb,#fff); }.contact-card.github { background:linear-gradient(135deg,#eef4ee,#fff); }.contact-card.instagram { background:linear-gradient(135deg,#fff0df,#fff); }.contact-card.email { background:linear-gradient(135deg,#fbe4e8,#fff); }.contact-symbol { width:40px;height:40px; border-radius:13px; display:grid; place-items:center; background:var(--ink); color:#fff; font:bold 1rem Arial,sans-serif; }.contact-card strong,.contact-card small { display:block; }.contact-card strong { font-size:1.1rem; font-weight:500; }.contact-card small { color:var(--muted); font: .76rem Arial,sans-serif; margin-top:5px; }.arrow { margin-left:auto; color:var(--accent); font-size:1.25rem; }
.profile-preview { position:fixed; display:none; z-index:5; width:245px; padding:16px; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:0 16px 45px rgba(55,38,72,.2); pointer-events:none; opacity:0; transform:scale(.92); transition:.2s; }.profile-preview.visible { display:block; opacity:1; transform:scale(1); }.preview-top { display:flex; gap:10px; align-items:center; }.preview-avatar { width:42px;height:42px; border-radius:50%; object-fit:cover; background:var(--lavender); }.preview-name { font:bold .9rem Arial,sans-serif; }.preview-handle { color:var(--muted); font:.7rem Arial,sans-serif; margin-top:3px; }.preview-text { color:var(--muted); font:.76rem/1.4 Arial,sans-serif; margin:13px 0; }.preview-button { display:block; text-align:center; padding:8px; background:var(--ink); color:white; border-radius:9px; font:.72rem Arial,sans-serif; }
@media (max-width:700px) { .site-header { padding:18px 0; }.menu-toggle { display:block; }.site-nav { display:none; position:absolute; top:65px; right:0; flex-direction:column; align-items:stretch; padding:8px; background:#fff; border-radius:16px; box-shadow:var(--shadow); }.site-nav.open { display:flex; }.site-nav a { text-align:center; }.hero { min-height:auto; grid-template-columns:1fr; padding:55px 0 75px; gap:55px; }.hero h1 { font-size:clamp(2.7rem,13vw,4rem); }.portrait-card { width:min(80vw,330px); }.floating-note { font-size:.7rem; }.note-one { right:-10%; }.note-two { left:-12%; }.content-page { padding-top:55px; }.contact-grid { grid-template-columns:1fr; }.profile-preview { display:none!important; } }