:root{
      /* ——— Blush + Plum (light-first) ——— */
      --cream:#FFFBFA;
      --blush:#F7D9E3;
      --lilac:#E3D9F7;
      --plum:#6B2B5E;
      --plum-soft:#9C5A8C;
      --ink:#2A2230;

      --bg:var(--cream);
      --surface:#FFFFFF;
      --surface-2:#FCF4F8;        /* soft pink-tinted surface */
      --text:var(--ink);
      --muted:#7A6C78;            /* warm mauve-gray, AA on cream */
      --brand:var(--plum);
      --brand-2:#C77DA6;          /* rosey mid-tone */
      --line:rgba(107,43,94,.12);

      /* code-motif tokens (girly syntax) */
      --code-bg:#FFF6FB;
      --tok-key:#B5468C;          /* magenta-plum */
      --tok-str:#3FA796;          /* soft teal — keeps it "tech" */
      --tok-type:#7C5CD6;         /* lilac-violet */
      --tok-dash:#9C5A8C;

      --max:1120px;
      --radius:22px;
      --radius-sm:16px;
      --shadow: 0 18px 44px rgba(107,43,94,.10), 0 4px 12px rgba(107,43,94,.06);
      --shadow-sm: 0 8px 22px rgba(107,43,94,.08);
      --glow: 0 0 0 1px rgba(255,255,255,.6) inset;
    }

    :root[data-theme="dark"]{
      --bg:#171019;
      --surface:#211626;
      --surface-2:#2A1B30;
      --text:#F4E9F0;
      --muted:#C3A9BC;
      --brand:#F2A8CF;
      --brand-2:#D98CC0;
      --line:rgba(247,217,227,.14);
      --code-bg:#1C1220;
      --tok-key:#F2A8CF;
      --tok-str:#7AD9C7;
      --tok-type:#C6A8FF;
      --tok-dash:#C3A9BC;
      --shadow: 0 18px 44px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
      --shadow-sm: 0 8px 22px rgba(0,0,0,.35);
      --glow: 0 0 0 1px rgba(255,255,255,.05) inset;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0; color:var(--text);
      font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      line-height:1.65;
      background:var(--bg);
      /* soft blush + lilac gradient mesh */
      background-image:
        radial-gradient(60% 50% at 12% 0%, rgba(247,217,227,.55) 0, rgba(247,217,227,0) 60%),
        radial-gradient(55% 45% at 95% 8%, rgba(227,217,247,.5) 0, rgba(227,217,247,0) 55%),
        radial-gradient(50% 40% at 50% 100%, rgba(247,217,227,.35) 0, rgba(247,217,227,0) 60%);
      background-attachment:fixed;
      -webkit-font-smoothing:antialiased;
    }
    :root[data-theme="dark"] body{
      background-image:
        radial-gradient(60% 50% at 12% 0%, rgba(150,60,120,.28) 0, rgba(150,60,120,0) 60%),
        radial-gradient(55% 45% at 95% 8%, rgba(110,80,180,.26) 0, rgba(110,80,180,0) 55%),
        radial-gradient(50% 40% at 50% 100%, rgba(150,60,120,.18) 0, rgba(150,60,120,0) 60%);
    }
    /* fine grain texture overlay */
    body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
    :root[data-theme="dark"] body::before{opacity:.06}
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(100%, var(--max)); margin-inline:auto; padding: clamp(16px, 4vw, 36px)}

    /* ——— Header ——— */
    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter:saturate(160%) blur(12px);
      -webkit-backdrop-filter:saturate(160%) blur(12px);
      background:linear-gradient(180deg, rgba(255,251,250,.82), rgba(255,251,250,.5));
      border-bottom:1px solid var(--line);
    }
    :root[data-theme="dark"] header{background:linear-gradient(180deg, rgba(23,16,25,.85), rgba(23,16,25,.5));}
    .nav{display:flex; align-items:center; gap:14px}
    .brand{font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:600; letter-spacing:.2px; font-size:.98rem; color:var(--brand)}
    .brand .pink{color:var(--brand-2)}
    .menu{display:flex; gap:26px; margin-left:auto}
    .nav a.navlink{position:relative; font-weight:500; color:var(--muted); padding:4px 2px}
    .nav a.navlink::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:right .25s ease}
    .nav a.navlink:hover{color:var(--text)}
    .nav a.navlink:hover::after{right:0}
    .icon-btn{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
    .icon-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm)}
    .hamburger{display:none}
    .mobile-menu{display:none; flex-direction:column; padding:6px 0 12px; border-bottom:1px solid var(--line); background:var(--surface)}
    .mobile-menu a{padding:11px 24px; color:var(--text); font-weight:500}
    .mobile-menu a:hover{background:var(--surface-2)}

    /* ——— Buttons ——— */
    .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:16px; font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, background .18s ease}
    .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
    .btn.primary{border-color:rgba(107,43,94,.16); color:var(--plum); background:linear-gradient(135deg, var(--blush), var(--lilac))}
    .btn.primary i{color:var(--plum)}
    :root[data-theme="dark"] .btn.primary{color:#1b1018; border-color:transparent; background:linear-gradient(135deg,#f2a8cf,#d98cc0)}
    :root[data-theme="dark"] .btn.primary i{color:#1b1018}
    .btn.primary:hover{filter:brightness(1.02); box-shadow:var(--shadow)}

    /* ——— Hero (asymmetric full-bleed) ——— */
    .hero{position:relative; overflow:hidden; isolation:isolate}
    .hero-inner{width:min(100%, var(--max)); margin-inline:auto; padding:clamp(40px,7vh,92px) clamp(16px,4vw,36px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:clamp(28px,4vw,56px); align-items:center}

    /* drifting gradient blobs behind hero */
    .hero-glow{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
    .hero-glow span{position:absolute; border-radius:50%; filter:blur(64px); opacity:.6; will-change:transform}
    .hero-glow .g1{width:46vw; height:46vw; left:-10vw; top:-14vw; background:radial-gradient(circle, var(--blush), transparent 70%); animation:drift1 19s ease-in-out infinite alternate}
    .hero-glow .g2{width:42vw; height:42vw; right:-8vw; top:-6vw; background:radial-gradient(circle, var(--lilac), transparent 70%); animation:drift2 23s ease-in-out infinite alternate}
    .hero-glow .g3{width:36vw; height:36vw; left:28vw; bottom:-22vw; background:radial-gradient(circle, #FCE3EE, transparent 70%); animation:drift3 27s ease-in-out infinite alternate}
    @keyframes drift1{to{transform:translate(8vw,6vw) scale(1.12)}}
    @keyframes drift2{to{transform:translate(-6vw,5vw) scale(1.08)}}
    @keyframes drift3{to{transform:translate(5vw,-7vw) scale(1.15)}}
    :root[data-theme="dark"] .hero-glow span{opacity:.42}
    :root[data-theme="dark"] .hero-glow .g1{background:radial-gradient(circle,#7a2d5e,transparent 70%)}
    :root[data-theme="dark"] .hero-glow .g2{background:radial-gradient(circle,#4a2d7a,transparent 70%)}
    :root[data-theme="dark"] .hero-glow .g3{background:radial-gradient(circle,#5a2050,transparent 70%)}

    .eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:"JetBrains Mono", monospace; font-size:.78rem; color:var(--brand); background:var(--surface-2); border:1px solid var(--line); padding:6px 12px; border-radius:999px; margin-bottom:22px}
    .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 4px rgba(199,125,166,.18)}

    .hero-name{font-family:"Fraunces", serif; font-weight:600; font-size:clamp(54px, 9vw, 112px); line-height:.9; letter-spacing:-2.5px; margin:0; color:var(--text)}
    .hero-name .ln2{display:block; background:linear-gradient(120deg,var(--plum),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic}
    .hero-tagline{margin:14px 0 0; font-weight:500; font-size:clamp(15px,2vw,19px); color:var(--plum); letter-spacing:-.1px}
    .hero-tagline .sep{color:var(--brand-2); margin:0 6px}
    .hero-role{margin-top:12px; font-family:"JetBrains Mono", monospace; font-size:clamp(14px,1.7vw,18px); color:var(--plum-soft); display:flex; align-items:center; gap:9px; min-height:1.7em}
    .hero-role .pfx{color:var(--brand-2)}
    .hero-role .word{color:var(--brand); font-weight:600; transition:opacity .28s ease, transform .28s ease}
    .hero-role .word.swap{opacity:0; transform:translateY(-7px)}
    .hero-role .rcaret{width:9px; height:1.05em; background:var(--brand); display:inline-block; border-radius:2px; animation:blink 1.1s steps(1,end) infinite}
    .hero-lead{color:var(--muted); font-size:clamp(15.5px, 2vw, 17.5px); max-width:46ch; margin:22px 0 0}

    /* soft girly terminal prompt */
    .prompt{margin-top:22px; font-family:"JetBrains Mono", monospace; font-size:.86rem; color:var(--text); background:var(--code-bg); border:1px solid var(--line); border-radius:14px; padding:11px 15px; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:2px; max-width:100%}
    .prompt .usr{color:var(--brand-2)}
    .prompt .pth{color:var(--tok-type)}
    .prompt .str{color:var(--tok-str)}
    .prompt .caret{display:inline-block; width:8px; height:1.05em; background:var(--brand); margin-left:4px; border-radius:2px; animation:blink 1.1s steps(1,end) infinite}
    @keyframes blink{50%{opacity:0}}

    .cta{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
    .role-strip{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px}
    .role-pill{font-size:.76rem; font-weight:500; color:var(--brand); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px}

    .badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
    .badge{font-family:"JetBrains Mono", monospace; font-size:.72rem; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--surface); display:inline-flex; gap:6px; align-items:center; color:var(--muted); transition:transform .15s ease, box-shadow .15s ease}
    .badge:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm); color:var(--text)}
    .badge i{color:var(--brand-2)}

    /* hero photo — bleeds off right edge, richer glass frame + tilt */
    .hero-photo{position:relative; justify-self:end; width:100%; max-width:460px;
      margin-right:calc(-1 * clamp(0px, 1.4vw, 20px));
      transform:perspective(1100px) rotateY(-6deg) rotateX(2deg); transition:transform .5s cubic-bezier(.22,1,.36,1)}
    .hero-photo:hover{transform:perspective(1100px) rotateY(-3deg) rotateX(1deg)}
    .hero-photo .frame{position:relative; border-radius:28px; overflow:hidden; border:7px solid var(--surface);
      box-shadow:0 44px 88px rgba(107,43,94,.24), 0 0 0 1px var(--line)}
    .hero-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 26%}
    .hero-photo .frame::after{content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(155deg, rgba(255,255,255,.28), transparent 42%)}
    .hero-photo .sticker{position:absolute; left:-16px; bottom:24px; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:9px 13px; font-size:.78rem; font-weight:600; box-shadow:var(--shadow); display:flex; align-items:center; gap:8px; transform:perspective(1100px) rotateY(7deg)}
    .hero-photo .sticker i{color:var(--brand-2)}

    /* ——— Quote band (replaces dark parallax) ——— */
    .band{position:relative; overflow:hidden; margin-block:14px; border-radius:0}
    .band .inner{max-width:var(--max); margin-inline:auto; padding:clamp(28px,4vw,46px) clamp(16px,4vw,36px); text-align:center; position:relative; z-index:1}
    .band::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, var(--blush), var(--lilac) 55%, #F3E6F2); opacity:.9}
    :root[data-theme="dark"] .band::before{background:linear-gradient(120deg, #3a1d34, #2a1e44 55%, #321a3a); opacity:.85}
    .band h2{font-family:"Fraunces", serif; font-style:italic; font-weight:500; font-size:clamp(24px,4.4vw,40px); line-height:1.18; margin:0; color:var(--ink)}
    :root[data-theme="dark"] .band h2{color:#F4E9F0}
    .band p{margin:12px auto 0; max-width:60ch; color:var(--plum)}
    :root[data-theme="dark"] .band p{color:#D9BBD0}

    /* ——— Sections ——— */
    section{padding-block:clamp(54px, 8vw, 96px)}
    .sec-eyebrow{font-family:"JetBrains Mono", monospace; font-size:.78rem; letter-spacing:.04em; color:var(--brand-2); text-transform:lowercase; margin:0 0 8px}
    .section-title{font-family:"Fraunces", serif; font-weight:600; font-size:clamp(26px, 3.6vw, 38px); line-height:1.1; letter-spacing:-.4px; margin:0 0 10px}
    .section-sub{color:var(--muted); margin:0 0 30px; max-width:60ch}

    .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }

    /* About */
    .about{display:grid; grid-template-columns:1.15fr 1fr; gap:26px; align-items:start}
    .bio{padding:30px}
    .bio p{margin:0 0 16px}
    .bio p:last-of-type{margin-bottom:0}
    .bio em{color:var(--brand); font-style:normal; font-weight:600}
    .meta{display:flex; gap:9px; flex-wrap:wrap; margin-top:22px}
    .chip{border:1px solid var(--line); padding:7px 13px; border-radius:999px; color:var(--muted); font-size:.82rem; background:var(--surface-2)}

    /* credentials.yaml (girly code card) */
    .code-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--code-bg)}
    .code-head{display:flex; align-items:center; gap:7px; padding:12px 15px; background:linear-gradient(90deg, var(--blush), var(--lilac)); border-bottom:1px solid var(--line)}
    :root[data-theme="dark"] .code-head{background:linear-gradient(90deg,#3a1d34,#2a1e44)}
    .code-head .d{width:11px; height:11px; border-radius:50%}
    .d-pink{background:#FF8FB1} .d-peach{background:#FFC774} .d-mint{background:#7AD9B0}
    .code-title{margin-left:8px; font-family:"JetBrains Mono", monospace; font-size:.8rem; color:var(--plum); display:flex; align-items:center; gap:7px}
    :root[data-theme="dark"] .code-title{color:#F4E9F0}
    .code-body{padding:16px 18px}
    .code-body pre{margin:0; font-family:"JetBrains Mono", monospace; font-size:.82rem; line-height:1.75; white-space:pre-wrap; color:var(--text)}
    .tok-dash{color:var(--tok-dash)} .tok-key{color:var(--tok-key); font-weight:600} .tok-str{color:var(--tok-str)} .tok-type{color:var(--tok-type)}

    /* Skills */
    .skills-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px}
    .skill-card{padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
    .skill-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
    .skill-ico{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:1.05rem; color:var(--plum); background:linear-gradient(135deg, var(--blush), var(--lilac)); margin-bottom:14px}
    .skill-card h3{margin:0 0 6px; font-family:"Fraunces", serif; font-weight:600; font-size:1.12rem}
    .skill-card p{margin:0; color:var(--muted); font-size:.92rem}

    /* Projects — 3D tilt + glare */
    .projects{display:grid; gap:20px}
    .project{position:relative; display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); transform-style:preserve-3d; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; will-change:transform}
    .project:hover{box-shadow:0 30px 64px rgba(107,43,94,.20)}
    .project::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit; transition:opacity .3s ease; background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.4), transparent 60%); z-index:3}
    .project:hover::after{opacity:.65}
    .project .media{position:relative; min-height:240px; background:linear-gradient(135deg, var(--blush), var(--lilac)); overflow:hidden}
    .project .media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
    .project .media.illustrative{display:grid; place-items:center; color:var(--plum)}
    .project .media.illustrative i{font-size:2.6rem; opacity:.85}
    .project .content{padding:28px}
    .project h3{margin:0 0 8px; font-family:"Fraunces", serif; font-weight:600; font-size:1.34rem; line-height:1.15}
    .project p{color:var(--muted); margin:0}
    .award{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; color:var(--plum); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; margin-bottom:12px}
    .award i{color:#E0a32e}
    .taglist{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
    .tag{font-family:"JetBrains Mono", monospace; font-size:.72rem; padding:5px 10px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface-2); transition:color .15s ease, border-color .15s ease}
    .tag:hover{color:var(--brand); border-color:var(--brand-2)}
    .proj-links{display:flex; gap:14px; margin-top:16px}
    .proj-link{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--plum); border-bottom:1px solid transparent; transition:border-color .15s ease}
    .proj-link:hover{border-color:var(--brand-2)}
    .proj-link i{color:var(--brand-2)}
    .note{margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm); border:1px dashed var(--line); background:var(--surface-2); color:var(--muted); font-size:.88rem; display:flex; align-items:center; gap:10px}
    .note i{color:var(--brand-2)}

    /* Contact */
    .contact-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:24px}
    .contact-card{display:flex; gap:14px; align-items:center; padding:18px 20px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
    .contact-card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
    .contact-ico{width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:1.05rem; color:var(--plum); background:linear-gradient(135deg, var(--blush), var(--lilac))}
    .contact-card .label{margin:0; font-weight:600; font-size:.95rem}
    .contact-card .val{margin:0; color:var(--muted); font-size:.85rem; word-break:break-word}
    .contact-card a.val:hover{color:var(--brand)}

    .form-wrap{padding:26px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow)}
    .form-wrap h3{margin:0 0 4px; font-family:"Fraunces", serif; font-weight:600; font-size:1.3rem}
    .form-wrap .section-sub{margin-bottom:18px}
    .contact-form{display:flex; flex-direction:column; gap:12px}
    .form-row{display:flex; gap:12px}
    .contact-form label{font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:-6px}
    .field{display:flex; flex-direction:column; gap:8px; flex:1}
    .contact-form input, .contact-form textarea{font-family:inherit; font-size:.92rem; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:12px 14px; color:var(--text); transition:border-color .15s ease, box-shadow .15s ease}
    .contact-form input::placeholder, .contact-form textarea::placeholder{color:var(--muted); opacity:.75}
    .contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(199,125,166,.18)}
    .form-status{font-size:.88rem; color:var(--brand); margin:0}

    /* GitHub */
    .github-panel{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding:24px 26px}
    .gh-text{margin:0; color:var(--muted)}
    .gh-handle{margin:6px 0 0; font-family:"JetBrains Mono", monospace; color:var(--plum); font-size:.9rem}

    /* ——— Footer ——— */
    footer{padding:40px 0 56px; text-align:center; color:var(--muted)}
    .footer-social{margin-top:14px; display:flex; gap:16px; justify-content:center}
    .footer-social a{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--text); transition:transform .15s ease, color .15s ease, box-shadow .15s ease}
    .footer-social a:hover{transform:translateY(-2px); color:var(--brand); box-shadow:var(--shadow-sm)}

    /* ——— Motion / reveal ——— */
    .fade-section{opacity:0; transform:translateY(34px); filter:blur(3px); transition:opacity .8s ease, transform .8s ease, filter .8s ease}
    .fade-section.visible{opacity:1; transform:none; filter:none}

    a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; scroll-behavior:auto !important}
      .fade-section{opacity:1; transform:none; filter:none; transition:none}
      .hero-glow span{animation:none !important}
      .hero-photo{transform:none !important}
    }

    /* ——— Responsive ——— */
    @media (max-width: 920px){
      .hero-inner{grid-template-columns:1fr; gap:34px}
      .hero-photo{margin-right:0; justify-self:center; max-width:360px; transform:none}
      .hero-photo .sticker{transform:none}
      .hero-name{font-size:clamp(46px,13vw,76px); letter-spacing:-1.5px}
      .about{grid-template-columns:1fr}
      .project{grid-template-columns:1fr}
      .project .media{min-height:200px}
      .project::after{display:none}
    }
    @media (max-width: 680px){
      .menu{display:none}
      .hamburger{display:inline-grid}
      .form-row{flex-direction:column}
    }

/* ——— More projects button (homepage) ——— */
.more-wrap{display:flex; justify-content:center; margin-top:30px}

/* ——— Dedicated projects page ——— */
.page-intro{padding-top:clamp(26px,5vh,56px)}
.back-link{display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono", monospace; font-size:.82rem; color:var(--brand); margin-bottom:14px; transition:color .15s ease}
.back-link:hover{color:var(--brand-2)}
.back-link i{font-size:.78rem}

/* ——— Résumé preview page ——— */
.resume-frame{position:relative; max-width:860px; margin:0 auto; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface)}
.resume-frame::before{content:""; display:block; height:8px; background:linear-gradient(90deg, var(--blush), var(--lilac))}
.resume-frame iframe{display:block; width:100%; height:78vh; min-height:520px; border:0; background:var(--surface-2)}
.resume-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.resume-fallback{text-align:center; color:var(--muted); font-size:.85rem; margin-top:14px}