*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
      }

      :root {
        --bg: #1a1816;
        --bg2: #24211e;
        --bg3: #2e2a26;
        --bg-elev: #353029;
        --line: rgba(255, 248, 238, 0.07);
        --line2: rgba(255, 248, 238, 0.12);
        --ink: #f5f0e8;
        --ink2: #a89f96;
        --ink3: #5c554e;
        --amber: #d4925c;
        --amber2: #e8b07a;
        --amber-glow: rgba(212, 146, 92, 0.15);
        --teal: #6eb8ae;
        --radius: 12px;
        --radius-sm: 8px;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.35);
        --serif: "Lora", Georgia, serif;
        --sans: "Inter", system-ui, sans-serif;
        --mono: "JetBrains Mono", monospace;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }
      @keyframes imgSkeletonShimmer {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }
      img.img-skeleton {
        opacity: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.03) 25%,
          rgba(255, 255, 255, 0.1) 50%,
          rgba(255, 255, 255, 0.03) 75%
        );
        background-size: 220% 100%;
        animation: imgSkeletonShimmer 1.2s linear infinite;
        transition: opacity 0.35s var(--ease);
      }
      img.img-skeleton.is-loaded {
        opacity: 1;
        animation: none;
      }
      @keyframes imgSpin {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
      .img-load-host {
        position: relative;
      }
      .img-load-spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: clamp(18px, 10%, 30px);
        height: clamp(18px, 10%, 30px);
        border-radius: 999px;
        border: 2.5px solid rgba(255, 248, 238, 0.18);
        border-top-color: var(--amber2);
        animation: imgSpin 0.75s linear infinite;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        z-index: 3;
      }
      .img-load-host.is-img-loading .img-load-spinner {
        opacity: 1;
      }

      body {
        background: var(--bg);
        color: var(--ink);
        font-family: var(--sans);
        font-size: 15px;
        line-height: 1.7;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      /* เทกเจอร์พื้นหลังแบบ grain เบาๆ */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9999;
        opacity: 0.035;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      :focus-visible {
        outline: 2px solid var(--amber);
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        html {
          scroll-behavior: auto;
        }
      }

      /* ── CUSTOM CURSOR (desktop) ── */
      @media (hover: hover) and (pointer: fine) {
        body.custom-cursor-active,
        body.custom-cursor-active * {
          cursor: none !important;
        }
        /* fallback: ปิด custom cursor ทั้งระบบชั่วคราวเมื่อ modal ต้องใช้เมาส์จริง */
        body.custom-cursor-disabled,
        body.custom-cursor-disabled * {
          cursor: auto !important;
        }
        /* ปิด custom cursor ชั่วคราวตอนเปิด CV modal เพื่อให้เมาส์ใน iframe ใช้งานได้ปกติ */
        body.cv-modal-open,
        body.cv-modal-open * {
          cursor: auto !important;
        }
        body.cv-modal-open a,
        body.cv-modal-open button,
        body.cv-modal-open .cv-download,
        body.cv-modal-open [data-open-cv] {
          cursor: pointer !important;
        }
      }
      body.cv-modal-open .cursor-wrap {
        opacity: 0 !important;
      }
      body.custom-cursor-disabled .cursor-wrap {
        opacity: 0 !important;
      }
      .cursor-wrap {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10001;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
      }
      body.custom-cursor-active .cursor-wrap {
        opacity: 1;
      }
      body.custom-cursor-hidden .cursor-wrap {
        opacity: 0;
      }

      .cursor-dot,
      .cursor-ring,
      .cursor-icon {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        will-change: transform;
      }
      .cursor-dot {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 12px rgba(212, 146, 92, 0.6);
        z-index: 10003;
        transform: translate3d(var(--mx, -100px), var(--my, -100px), 0);
        transition:
          width 0.25s var(--ease),
          height 0.25s var(--ease),
          margin 0.25s var(--ease),
          opacity 0.25s,
          transform 0.15s var(--ease);
      }
      .cursor-ring {
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        border-radius: 50%;
        border: 1px solid rgba(212, 146, 92, 0.45);
        z-index: 10002;
        transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0);
        transition:
          width 0.35s var(--ease),
          height 0.35s var(--ease),
          margin 0.35s var(--ease),
          border-color 0.25s,
          background 0.25s,
          opacity 0.25s;
      }
      .cursor-icon {
        width: 22px;
        height: 22px;
        margin: -2px 0 0 -2px;
        z-index: 10004;
        color: var(--amber2);
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
        transform: translate3d(var(--mx, -100px), var(--my, -100px), 0);
        transition:
          transform 0.15s var(--ease),
          opacity 0.25s,
          width 0.3s var(--ease),
          height 0.3s var(--ease),
          margin 0.3s var(--ease);
      }
      .cursor-icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      /* hover บนลิงก์ / ปุ่ม */
      body.cursor-hover .cursor-ring {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
        border-color: var(--amber);
        background: rgba(212, 146, 92, 0.08);
      }
      body.cursor-hover .cursor-dot {
        width: 4px;
        height: 4px;
        margin: -2px 0 0 -2px;
        opacity: 0.6;
      }
      body.cursor-hover .cursor-icon {
        width: 28px;
        height: 28px;
        margin: -4px 0 0 -4px;
        color: var(--amber);
      }
      body.cursor-hover .cursor-icon .icon-pointer {
        display: none;
      }
      body.cursor-hover .cursor-icon .icon-hand {
        display: block;
      }

      /* กดคลิก */
      body.cursor-click .cursor-ring {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        background: rgba(212, 146, 92, 0.15);
      }
      body.cursor-click .cursor-dot {
        transform: translate3d(var(--mx), var(--my), 0) scale(0.55);
      }

      /* ลากข้อความ */
      body.cursor-text .cursor-ring {
        width: 4px;
        height: 28px;
        margin: -14px 0 0 -2px;
        border-radius: 2px;
        background: rgba(212, 146, 92, 0.2);
      }
      body.cursor-text .cursor-icon,
      body.cursor-text .cursor-dot {
        opacity: 0;
      }

      .cursor-icon .icon-hand {
        display: none;
      }

      /* เอฟเฟกต์ ripple ตอนคลิก */
      .cursor-ripple {
        position: fixed;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        border-radius: 50%;
        border: 1px solid var(--amber);
        pointer-events: none;
        z-index: 10001;
        animation: cursorRipple 0.6s var(--ease) forwards;
      }
      @keyframes cursorRipple {
        to {
          width: 48px;
          height: 48px;
          margin: -24px 0 0 -24px;
          opacity: 0;
        }
      }

      ::selection {
        background: rgba(200, 132, 74, 0.25);
      }
      ::-webkit-scrollbar {
        width: 4px;
      }
      ::-webkit-scrollbar-track {
        background: var(--bg);
      }
      ::-webkit-scrollbar-thumb {
        background: var(--ink3);
        border-radius: 4px;
      }

      /* ── NAV ── */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 3rem;
        transition:
          background 0.4s,
          border-color 0.4s,
          padding 0.4s;
      }
      nav.s {
        background: rgba(26, 24, 22, 0.88);
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        border-bottom: 1px solid var(--line);
        padding: 1rem 3rem;
        box-shadow: 0 1px 0 rgba(255, 248, 238, 0.03);
      }
      .logo {
        font-family: var(--serif);
        font-size: 1.25rem;
        font-weight: 500;
        color: var(--ink);
        text-decoration: none;
        letter-spacing: -0.02em;
        transition: color 0.2s;
      }
      .logo-mark {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.6rem;
        font-family: var(--mono);
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        color: var(--ink);
        background: linear-gradient(145deg, rgba(212, 146, 92, 0.26), rgba(212, 146, 92, 0.08));
        border: 1px solid rgba(212, 146, 92, 0.42);
        box-shadow: inset 0 0 0 1px rgba(255, 248, 238, 0.06);
      }
      .logo:hover {
        color: var(--amber2);
      }
      .navLinks {
        display: flex;
        gap: 2.5rem;
        list-style: none;
      }
      .navLinks a {
        font-size: 0.72rem;
        color: var(--ink2);
        text-decoration: none;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition: color 0.2s;
        font-family: var(--mono);
      }
      .navLinks a:hover {
        color: var(--ink);
      }
      .navCta {
        font-size: 0.72rem;
        font-family: var(--mono);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--amber);
        text-decoration: none;
        border: 1px solid rgba(200, 132, 74, 0.35);
        padding: 0.5rem 1.2rem;
        border-radius: 3px;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .navCta:hover {
        background: var(--amber);
        color: var(--bg);
        border-color: var(--amber);
      }

      /* เมนูมือถือ */
      .navToggle {
        display: none;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line2);
        border-radius: var(--radius-sm);
        background: var(--bg3);
        cursor: pointer;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition:
          border-color 0.2s,
          background 0.2s;
      }
      .navToggle span {
        display: block;
        width: 18px;
        height: 1.5px;
        background: var(--ink);
        border-radius: 2px;
        transition:
          transform 0.3s var(--ease),
          opacity 0.2s;
      }
      .navToggle.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
      }
      .navToggle.open span:nth-child(2) {
        opacity: 0;
      }
      .navToggle.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
      }
      .navToggle:hover {
        border-color: var(--amber);
      }

      .mobileMenu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(26, 24, 22, 0.97);
        backdrop-filter: blur(24px);
        padding: 6rem 2rem 2rem;
        flex-direction: column;
        gap: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.35s var(--ease),
          visibility 0.35s;
      }
      .mobileMenu.open {
        opacity: 1;
        visibility: visible;
      }
      .mobileMenu a {
        font-family: var(--serif);
        font-size: 1.75rem;
        color: var(--ink2);
        text-decoration: none;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--line);
        opacity: 0;
        transform: translateY(16px);
        transition:
          color 0.2s,
          padding-left 0.3s var(--ease),
          opacity 0.4s var(--ease),
          transform 0.4s var(--ease);
      }
      .mobileMenu.open a {
        opacity: 1;
        transform: translateY(0);
      }
      .mobileMenu a:hover {
        color: var(--amber2);
        padding-left: 0.5rem;
      }
      .mobileMenu .mm-cta {
        margin-top: 1.5rem;
        font-family: var(--mono);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--amber);
        border: 1px solid rgba(212, 146, 92, 0.4);
        padding: 1rem 1.5rem;
        border-radius: var(--radius-sm);
        text-align: center;
      }

      /* ── SCROLL INDICATOR ── */
      #bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        background: var(--amber);
        z-index: 200;
        width: 0;
      }

      /* ── HERO ── */
      .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 3rem 5rem;
        border-bottom: 1px solid var(--line);
        position: relative;
        overflow: hidden;
      }

      /* แสง ambient ใน hero */
      .hero::before {
        content: "";
        position: absolute;
        top: -20%;
        right: -10%;
        width: 70vmin;
        height: 70vmin;
        background: radial-gradient(
          circle,
          var(--amber-glow) 0%,
          transparent 70%
        );
        pointer-events: none;
        animation: heroGlow 8s ease-in-out infinite alternate;
      }
      .hero::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--amber),
          transparent
        );
        opacity: 0.4;
      }
      @keyframes heroGlow {
        from {
          transform: translate(0, 0) scale(1);
          opacity: 0.6;
        }
        to {
          transform: translate(-5%, 5%) scale(1.1);
          opacity: 1;
        }
      }

      .hero-grid-bg {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(var(--line) 1px, transparent 1px),
          linear-gradient(90deg, var(--line) 1px, transparent 1px);
        background-size: 64px 64px;
        mask-image: radial-gradient(
          ellipse 80% 60% at 50% 100%,
          black 20%,
          transparent 70%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 80% 60% at 50% 100%,
          black 20%,
          transparent 70%
        );
        pointer-events: none;
      }

      .hero-foot,
      .hero-numbers {
        position: relative;
        z-index: 1;
      }

      .hero-tag {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        opacity: 0;
        animation: up 0.6s 0.1s ease forwards;
        margin-bottom: 1.5rem;
      }
      .hero-tag--open {
        flex-wrap: wrap;
        padding: 0.5rem 0.85rem 0.5rem 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(212, 146, 92, 0.45);
        background: linear-gradient(
          135deg,
          rgba(212, 146, 92, 0.14) 0%,
          rgba(212, 146, 92, 0.04) 100%
        );
        box-shadow: 0 0 28px rgba(212, 146, 92, 0.18);
        width: fit-content;
      }
      .hero-grid-bg {
        z-index: 0;
      }
      .tag-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 10px rgba(212, 146, 92, 0.85);
        animation: blink 2s ease-in-out infinite;
        flex-shrink: 0;
      }
      .tag-open {
        display: inline-block;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: rgba(212, 146, 92, 0.22);
        border: 1px solid rgba(212, 146, 92, 0.5);
        color: var(--amber);
        font-weight: 600;
        letter-spacing: 0.1em;
      }
      .tag-text {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--ink2);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hero-name {
        font-family: var(--serif);
        font-size: clamp(4rem, 9vw, 9.5rem);
        font-weight: 400;
        line-height: 0.92;
        letter-spacing: -0.03em;
        color: var(--ink);
        margin-bottom: 2rem;
      }
      .hero-name .l1 {
        display: block;
        overflow: hidden;
      }
      .hero-name .l1 span {
        display: block;
        transform: translateY(110%);
        animation: up 0.8s ease forwards;
      }
      .hero-name .l2 {
        display: block;
        overflow: hidden;
      }
      /* name-accent styles อยู่ด้านล่างใน PROFILE section */

      .hero-foot {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap;
        opacity: 0;
        animation: up 0.6s 0.4s ease forwards;
      }
      .hero-left {
        max-width: 520px;
      }
      .hero-desc {
        max-width: 100%;
        font-size: 1rem;
        color: var(--ink2);
        line-height: 1.85;
      }
      .hero-desc strong {
        color: var(--ink);
        font-weight: 500;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.5rem;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.85rem 1.5rem;
        border-radius: var(--radius-sm);
        transition:
          transform 0.25s var(--ease),
          background 0.25s,
          border-color 0.25s,
          box-shadow 0.25s;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--amber) 0%, #b87340 100%);
        color: var(--bg);
        border: 1px solid transparent;
        box-shadow: 0 4px 20px rgba(212, 146, 92, 0.25);
      }
      .btn-primary:hover {
        box-shadow: 0 8px 28px rgba(212, 146, 92, 0.35);
      }
      .btn-ghost {
        background: rgba(255, 248, 238, 0.04);
        color: var(--ink);
        border: 1px solid var(--line2);
      }
      .btn-ghost:hover {
        background: rgba(255, 248, 238, 0.08);
        border-color: var(--amber);
        color: var(--amber2);
      }

      .hero-meta {
        flex-shrink: 0;
        align-self: flex-end;
      }
      .hero-meta-card {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 13.5rem;
        padding: 0.15rem;
        border-radius: var(--radius);
        border: 1px solid var(--line2);
        background: linear-gradient(
          155deg,
          rgba(255, 248, 238, 0.06) 0%,
          rgba(255, 248, 238, 0.02) 100%
        );
        box-shadow: var(--shadow);
        backdrop-filter: blur(10px);
        overflow: hidden;
      }
      .hero-meta-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
      }
      .hero-meta-row--avail {
        background: linear-gradient(
          135deg,
          rgba(212, 146, 92, 0.14) 0%,
          rgba(212, 146, 92, 0.04) 100%
        );
        border-top: 1px solid rgba(212, 146, 92, 0.2);
      }
      .hero-meta-icon {
        flex-shrink: 0;
        width: 2.1rem;
        height: 2.1rem;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255, 248, 238, 0.05);
        border: 1px solid var(--line2);
        color: var(--ink2);
      }
      .hero-meta-icon svg {
        width: 0.95rem;
        height: 0.95rem;
      }
      .hero-meta-icon--live {
        border-color: rgba(212, 146, 92, 0.35);
        background: rgba(212, 146, 92, 0.1);
      }
      .hero-meta-copy {
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
        min-width: 0;
      }
      .hero-meta-label {
        font-family: var(--mono);
        font-size: 0.55rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink3);
      }
      .hero-meta-value {
        font-family: var(--serif);
        font-size: 0.88rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        line-height: 1.25;
      }
      .hero-meta-value--highlight {
        color: var(--amber2);
      }
      .avail-pulse {
        position: relative;
        width: 2.1rem;
        height: 2.1rem;
        display: grid;
        place-items: center;
        flex-shrink: 0;
      }
      .avail-pulse::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(212, 146, 92, 0.25);
        animation: availRing 2s ease-out infinite;
      }
      .avail-dot {
        position: relative;
        z-index: 1;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 12px rgba(212, 146, 92, 1);
        animation: blink 2.5s ease-in-out infinite;
      }
      @keyframes availRing {
        0% {
          transform: scale(0.55);
          opacity: 0.85;
        }
        100% {
          transform: scale(1.35);
          opacity: 0;
        }
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.2;
        }
      }

      .hero-numbers {
        display: flex;
        gap: 3rem;
        padding-top: 3rem;
        border-top: 1px solid var(--line);
        margin-top: 3rem;
        width: 100%;
        opacity: 0;
        animation: up 0.6s 0.55s ease forwards;
      }
      .num-block {
        padding: 1rem 1.25rem;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        transition:
          border-color 0.3s,
          background 0.3s,
          transform 0.3s var(--ease);
      }
      .num-block:hover {
        border-color: var(--line2);
        background: rgba(255, 248, 238, 0.02);
        transform: translateY(-2px);
      }
      .num-big {
        font-family: var(--serif);
        font-size: 2.6rem;
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--ink);
      }
      .num-big span {
        color: var(--amber);
      }
      .num-label {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-top: 4px;
      }

      @keyframes up {
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-12px);
        }
      }
      @keyframes ringSpin {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes pulseRing {
        0%,
        100% {
          opacity: 0.5;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.02);
        }
      }
      @keyframes photoIn {
        from {
          opacity: 0;
          transform: scale(0.88) rotate(-4deg);
        }
        to {
          opacity: 1;
          transform: scale(1) rotate(0deg);
        }
      }
      @keyframes orbDrift1 {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(30px, -40px);
        }
      }
      @keyframes orbDrift2 {
        0%,
        100% {
          transform: translate(0, 0);
        }
        50% {
          transform: translate(-25px, 30px);
        }
      }
      @keyframes shimmer {
        0% {
          background-position: 200% center;
        }
        100% {
          background-position: -200% center;
        }
      }

      /* ── PROFILE PHOTO ── */
      /* เปลี่ยน src ใน HTML เป็น path รูปของคุณ เช่น images/profile.jpg */
      .hero-inner {
        display: grid;
        grid-template-columns: 1fr minmax(240px, 320px);
        gap: 2.5rem 3rem;
        align-items: end;
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        padding-top: 6.5rem;
      }
      .hero-content {
        min-width: 0;
      }

      .hero-orbs {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
      }
      .orb-1 {
        width: 280px;
        height: 280px;
        top: 15%;
        right: 18%;
        background: rgba(212, 146, 92, 0.12);
        animation: orbDrift1 14s ease-in-out infinite;
      }
      .orb-2 {
        width: 200px;
        height: 200px;
        bottom: 25%;
        left: 5%;
        background: rgba(110, 184, 174, 0.08);
        animation: orbDrift2 18s ease-in-out infinite;
      }
      .orb-3 {
        width: 120px;
        height: 120px;
        top: 40%;
        left: 40%;
        background: rgba(232, 176, 122, 0.06);
        animation: orbDrift1 11s ease-in-out infinite reverse;
      }

      .hero-photo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        opacity: 0;
        animation: photoIn 1s 0.25s var(--ease) forwards;
      }
      .profile-frame {
        position: relative;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        perspective: 800px;
      }
      .profile-frame[data-tilt] {
        transition: transform 0.15s var(--ease);
        transform-style: preserve-3d;
      }
      .profile-ring {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: conic-gradient(
          from 0deg,
          var(--amber),
          transparent 40%,
          var(--amber2),
          transparent 70%,
          var(--amber)
        );
        animation: ringSpin 8s linear infinite;
        opacity: 0.7;
      }
      .profile-ring::after {
        content: "";
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: var(--bg);
      }
      .profile-inner {
        position: relative;
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--line2);
        background: var(--bg3);
        box-shadow: var(--shadow-lg);
        animation: float 6s ease-in-out infinite;
        z-index: 1;
      }
      .profile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        opacity: 0;
        transition: opacity 0.5s var(--ease);
      }
      .profile-inner.has-img .profile-img {
        opacity: 1;
      }
      .profile-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        background: linear-gradient(145deg, var(--bg3) 0%, var(--bg2) 100%);
        text-align: center;
        padding: 1.5rem;
        transition: opacity 0.4s;
      }
      .profile-inner.has-img .profile-fallback {
        opacity: 0;
        pointer-events: none;
      }
      .profile-initials {
        font-family: var(--serif);
        font-size: 3.5rem;
        font-weight: 500;
        color: var(--amber2);
        letter-spacing: -0.04em;
        line-height: 1;
      }
      .profile-hint {
        font-family: var(--mono);
        font-size: 0.58rem;
        color: var(--ink3);
        letter-spacing: 0.04em;
        line-height: 1.6;
      }
      .profile-hint code {
        display: inline-block;
        margin-top: 0.25rem;
        padding: 0.15rem 0.4rem;
        background: rgba(255, 248, 238, 0.05);
        border-radius: 4px;
        color: var(--amber);
        font-size: 0.55rem;
      }
      .profile-caption {
        margin-top: 1rem;
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-align: center;
        opacity: 0;
        animation: up 0.6s 0.7s ease forwards;
      }
      .profile-badge {
        position: absolute;
        bottom: 8%;
        right: -8px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(
          135deg,
          rgba(212, 146, 92, 0.28) 0%,
          rgba(18, 16, 14, 0.95) 55%
        );
        border: 1px solid rgba(212, 146, 92, 0.65);
        border-radius: 999px;
        padding: 0.55rem 1rem 0.55rem 0.75rem;
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--amber);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        box-shadow:
          0 0 32px rgba(212, 146, 92, 0.35),
          0 8px 24px rgba(0, 0, 0, 0.45);
        animation: openWorkPulse 2.5s ease-in-out infinite;
      }
      .profile-badge-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--amber);
        box-shadow: 0 0 12px rgba(212, 146, 92, 1);
        animation: blink 2s ease-in-out infinite;
        flex-shrink: 0;
      }
      @keyframes openWorkPulse {
        0%,
        100% {
          box-shadow:
            0 0 24px rgba(212, 146, 92, 0.3),
            0 8px 20px rgba(0, 0, 0, 0.4);
        }
        50% {
          box-shadow:
            0 0 40px rgba(212, 146, 92, 0.55),
            0 10px 28px rgba(0, 0, 0, 0.5);
        }
      }

      /* รูปเล็กใน About */
      .profile-frame--sm {
        max-width: 200px;
        margin-bottom: 2rem;
      }
      .profile-frame--sm .profile-inner {
        animation: none;
      }
      .profile-frame--sm .profile-initials {
        font-size: 2.5rem;
      }
      .profile-frame--sm .profile-ring {
        animation-duration: 12s;
      }

      .about-side {
        display: flex;
        flex-direction: column;
      }

      /* Nav avatar เล็ก */
      .nav-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--line2);
        margin-right: 0.75rem;
        display: none;
      }
      .nav-avatar.has-img {
        display: block;
      }
      .logo-wrap {
        display: flex;
        align-items: center;
        text-decoration: none;
      }

      /* reveal animations เพิ่ม */
      .reveal-left {
        opacity: 0;
        transform: translateX(-28px);
        transition:
          opacity 0.7s var(--ease),
          transform 0.7s var(--ease);
      }
      .reveal-left.on {
        opacity: 1;
        transform: translateX(0);
      }
      .reveal-scale {
        opacity: 0;
        transform: scale(0.92);
        transition:
          opacity 0.65s var(--ease),
          transform 0.65s var(--ease);
      }
      .reveal-scale.on {
        opacity: 1;
        transform: scale(1);
      }
      .s-tag,
      .s-title {
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease);
      }
      .s-tag.on,
      .s-title.on {
        opacity: 1;
        transform: translateY(0);
      }
      .hero-name .l2 .name-accent {
        display: block;
        transform: translateY(110%);
        font-style: italic;
        background: linear-gradient(
          90deg,
          var(--amber2),
          #f5f0e8,
          var(--amber2)
        );
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation:
          up 0.8s 0.12s ease forwards,
          shimmer 8s linear infinite 1.2s;
      }

      /* ── STRIP ── */
      .strip {
        overflow: hidden;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
      }
      .strip-inner {
        display: flex;
        width: max-content;
        animation: roll 35s linear infinite;
        padding: 0.9rem 0;
      }
      .strip-item {
        font-family: var(--serif);
        font-size: 0.9rem;
        font-style: italic;
        color: var(--ink3);
        padding: 0 1.5rem;
        white-space: nowrap;
        transition: color 0.3s;
      }
      .strip-item:hover {
        color: var(--amber2);
      }
      .strip-sep {
        color: var(--amber);
        padding: 0 0.25rem;
        font-style: normal;
      }
      @keyframes roll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      /* ── SECTIONS ── */
      section {
        padding: 6rem 3rem;
      }
      .wrap {
        max-width: 1160px;
        margin: 0 auto;
      }
      .s-tag {
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--amber);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 0.6rem;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .s-tag::before {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background: var(--amber);
      }
      .s-title {
        font-family: var(--serif);
        font-size: clamp(2.2rem, 3.5vw, 3.4rem);
        font-weight: 400;
        letter-spacing: -0.03em;
        line-height: 1;
        color: var(--ink);
      }
      .s-title em {
        font-style: italic;
        color: var(--amber2);
      }
      .s-heading {
        font-family: var(--serif);
        font-size: clamp(2.2rem, 3.5vw, 3.4rem);
        font-weight: 400;
        letter-spacing: -0.03em;
        line-height: 1.1;
        color: var(--ink);
        margin-bottom: 1rem;
      }
      .s-heading em {
        font-style: italic;
        color: var(--amber2);
      }
      .s-sub {
        color: var(--ink2);
        max-width: 52ch;
        font-size: 0.95rem;
        line-height: 1.7;
      }
      .navLinks a.active {
        color: var(--ink);
      }

      /* ── ABOUT ── */
      #about {
        background: var(--bg2);
        border-bottom: 1px solid var(--line);
      }
      .about-grid {
        display: grid;
        grid-template-columns: 1fr 1.7fr;
        gap: 6rem;
        align-items: start;
        margin-top: 4rem;
      }
      .about-aside {
      }
      .about-index {
        font-family: var(--serif);
        font-size: 7rem;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.06em;
        color: transparent;
        -webkit-text-stroke: 1px var(--ink3);
        margin-bottom: 1.5rem;
      }
      .about-roles {
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--ink3);
        letter-spacing: 0.05em;
        line-height: 2.8;
      }
      .about-main {
      }
      .about-intro {
        font-family: var(--serif);
        font-size: clamp(1.5rem, 2.2vw, 2rem);
        font-weight: 400;
        font-style: italic;
        line-height: 1.45;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin-bottom: 1.75rem;
        border-left: 2px solid var(--amber);
        padding-left: 1.5rem;
      }
      .about-body {
        font-size: 0.95rem;
        color: var(--ink2);
        line-height: 1.9;
      }
      .about-body p + p {
        margin-top: 1rem;
      }
      .about-body strong {
        color: var(--ink);
        font-weight: 500;
      }

      .eu-region-label {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-top: 2.25rem;
        margin-bottom: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .eu-region-label::before {
        content: "";
        width: 12px;
        height: 1px;
        background: var(--amber);
      }
      .eu-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
        gap: 0.85rem;
      }
      .eu-card {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 7.5rem;
        padding: 1.25rem 1.35rem;
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        background: linear-gradient(145deg, var(--bg3) 0%, var(--bg2) 100%);
        transition:
          border-color 0.3s,
          transform 0.3s var(--ease),
          box-shadow 0.3s;
        cursor: default;
      }
      /* ธงเป็นพื้นหลัง — ใส่ ISO code ที่ data-flag (lu, be, de, …) */
      .eu-card[data-flag]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: var(--flag-bg);
        background-size: cover;
        background-position: center;
        opacity: 0.7;
        transition:
          opacity 0.35s var(--ease),
          transform 0.35s var(--ease);
      }
      .eu-card[data-flag]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
          155deg,
          rgba(14, 12, 10, 0.72) 0%,
          rgba(14, 12, 10, 0.45) 50%,
          rgba(14, 12, 10, 0.68) 100%
        );
        transition: background 0.35s var(--ease);
      }
      .eu-card[data-flag] > * {
        position: relative;
        z-index: 1;
      }
      .eu-card[data-flag="lu"] {
        --flag-bg: url("https://flagcdn.com/w320/lu.png");
      }
      .eu-card[data-flag="be"] {
        --flag-bg: url("https://flagcdn.com/w320/be.png");
      }
      .eu-card[data-flag="de"] {
        --flag-bg: url("https://flagcdn.com/w320/de.png");
      }
      .eu-card[data-flag="fr"] {
        --flag-bg: url("https://flagcdn.com/w320/fr.png");
      }
      .eu-card[data-flag="nl"] {
        --flag-bg: url("https://flagcdn.com/w320/nl.png");
      }
      .eu-card[data-flag="ch"] {
        --flag-bg: url("https://flagcdn.com/w320/ch.png");
      }
      .eu-card[data-flag="at"] {
        --flag-bg: url("https://flagcdn.com/w320/at.png");
      }
      .eu-card[data-flag="eu"] {
        --flag-bg: url("https://flagcdn.com/w320/eu.png");
      }
      .eu-card:hover {
        border-color: rgba(212, 146, 92, 0.35);
        transform: translateY(-3px);
        box-shadow: var(--shadow);
      }
      .eu-card[data-flag]:hover::before {
        opacity: 0.78;
        transform: scale(1.04);
      }
      .eu-card.feat {
        border-color: rgba(212, 146, 92, 0.28);
      }
      .eu-card.feat[data-flag]::after {
        background: linear-gradient(
          155deg,
          rgba(212, 146, 92, 0.22) 0%,
          rgba(14, 12, 10, 0.5) 45%,
          rgba(14, 12, 10, 0.72) 100%
        );
      }
      .eu-card.feat .eu-tag {
        color: var(--amber2);
        border-color: rgba(212, 146, 92, 0.35);
        background: rgba(212, 146, 92, 0.08);
      }
      .eu-tag--accent {
        color: var(--amber);
        border-color: rgba(212, 146, 92, 0.45);
        background: rgba(212, 146, 92, 0.12);
      }
      .eu-card--more .eu-tag {
        color: var(--ink2);
      }
      .eu-badge {
        display: inline-block;
        margin-top: 0.4rem;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-family: var(--mono);
        font-size: 0.58rem;
        color: var(--amber2);
        letter-spacing: 0.06em;
        background: rgba(212, 146, 92, 0.12);
        border: 1px solid rgba(212, 146, 92, 0.28);
      }
      /* แท็กรูปแบบงาน (ไม่ระบุเมือง) — ใส่ในการ์ดได้ถ้าต้องการ */
      .eu-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        margin-top: 0.45rem;
      }
      .eu-tag {
        font-family: var(--mono);
        font-size: 0.55rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ink3);
        padding: 0.15rem 0.4rem;
        border-radius: 3px;
        border: 1px solid var(--line2);
        background: rgba(255, 248, 238, 0.03);
      }
      .eu-meta {
        font-family: var(--mono);
        font-size: 0.6rem;
        color: var(--ink2);
        letter-spacing: 0.05em;
        margin-top: 0.2rem;
      }
      .eu-region-hint {
        margin-top: 1rem;
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.06em;
        line-height: 1.6;
        max-width: 36rem;
      }
      .eu-card--more {
        border-style: dashed;
        border-color: rgba(212, 146, 92, 0.35);
        background: linear-gradient(
          145deg,
          rgba(212, 146, 92, 0.06) 0%,
          var(--bg3) 100%
        );
      }
      .eu-card--more:hover {
        border-color: rgba(212, 146, 92, 0.55);
      }
      .eu-card--more .eu-name {
        color: var(--amber2);
      }
      .eu-card--more .eu-meta {
        color: var(--ink2);
      }
      .eu-name {
        font-family: var(--serif);
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
      }
      .eu-cities {
        font-family: var(--mono);
        font-size: 0.6rem;
        color: var(--ink);
        letter-spacing: 0.04em;
        line-height: 1.45;
        margin-top: 0.25rem;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
      }
      .eu-card[data-flag] .eu-tag {
        background: rgba(14, 12, 10, 0.55);
        border-color: rgba(255, 248, 238, 0.12);
        color: var(--ink2);
        backdrop-filter: blur(4px);
      }
      .eu-card.feat[data-flag] .eu-tag {
        color: var(--amber2);
        border-color: rgba(212, 146, 92, 0.4);
        background: rgba(14, 12, 10, 0.5);
      }

      /* ── EXPERIENCE ── */
      #experience {
        background: var(--bg);
        border-bottom: 1px solid var(--line);
      }
      .exp-list {
        margin-top: 4rem;
      }
      .exp-row {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 3rem;
        padding: 2.5rem 0;
        border-top: 1px solid var(--line);
        position: relative;
        transition: background 0.25s;
        border-radius: 4px;
        /* reveal */
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease,
          background 0.25s;
      }
      .exp-row.on {
        opacity: 1;
        transform: translateY(0);
      }
      .exp-row:hover {
        background: rgba(255, 248, 238, 0.03);
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: -1rem;
        margin-right: -1rem;
      }
      .exp-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--amber);
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.4s ease;
      }
      .exp-row:hover::before {
        transform: scaleY(1);
      }

      .exp-left {
      }
      .exp-period {
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--amber);
        letter-spacing: 0.06em;
        margin-bottom: 0.5rem;
      }
      .exp-company {
        font-family: var(--serif);
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin-bottom: 0.2rem;
      }
      .exp-loc {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.04em;
      }

      .exp-right {
      }
      .exp-role {
        font-family: var(--serif);
        font-size: 1.35rem;
        font-weight: 400;
        font-style: italic;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin-bottom: 1.1rem;
        line-height: 1.3;
      }
      .exp-points {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .exp-points li {
        font-size: 0.88rem;
        color: var(--ink2);
        padding-left: 1.1rem;
        position: relative;
        line-height: 1.65;
      }
      .exp-points li::before {
        content: "–";
        position: absolute;
        left: 0;
        color: var(--ink3);
        font-size: 0.8rem;
      }

      /* ── SKILLS ── */
      #skills {
        background: var(--bg2);
        border-bottom: 1px solid var(--line);
      }
      .skills-intro {
        margin-top: 1rem;
        max-width: 36rem;
        font-size: 0.95rem;
        color: var(--ink2);
        line-height: 1.75;
      }
      .skills-panel {
        margin-top: 3.5rem;
        padding: 1rem 1.2rem;
        border: 1px solid var(--line2);
        border-radius: calc(var(--radius) + 2px);
        background: var(--bg);
        box-shadow: var(--shadow);
      }
      .skills-tiers {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }
      .skills-tier-label {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 0.35rem;
        padding-top: 0.15rem;
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .skills-tier-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line2);
      }
      .skills-tier--domain .skills-tier-label {
        color: var(--teal);
      }
      .skills-grid {
        display: grid;
        gap: 0.65rem;
      }
      .skills-grid--core {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .skills-grid--core .sk--wide {
        grid-column: 1 / -1;
      }
      .skills-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .sk {
        position: relative;
        padding: 1.5rem 1.55rem;
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        background: var(--bg-elev);
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.55s var(--ease),
          transform 0.55s var(--ease),
          border-color 0.3s,
          box-shadow 0.3s;
      }
      .sk.on {
        opacity: 1;
        transform: translateY(0);
      }
      .sk:hover {
        border-color: rgba(212, 146, 92, 0.35);
        box-shadow: var(--shadow);
        transform: translateY(-2px);
      }
      .sk--accent {
        border-color: rgba(212, 146, 92, 0.25);
        background: linear-gradient(
          160deg,
          rgba(212, 146, 92, 0.1) 0%,
          var(--bg-elev) 48%
        );
      }
      .sk--accent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: var(--radius) var(--radius) 0 0;
        background: linear-gradient(90deg, var(--amber), var(--amber2));
      }
      .sk--fintech {
        border-color: rgba(110, 184, 174, 0.28);
        background: linear-gradient(
          160deg,
          rgba(110, 184, 174, 0.09) 0%,
          var(--bg-elev) 50%
        );
      }
      .sk-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1.1rem;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--line2);
      }
      .sk-head-text {
        font-family: var(--serif);
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--ink);
        letter-spacing: -0.02em;
        line-height: 1.25;
      }
      .sk-num {
        flex-shrink: 0;
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 500;
        color: var(--amber2);
        letter-spacing: 0.06em;
        padding: 0.3rem 0.55rem;
        border-radius: 999px;
        border: 1px solid rgba(212, 146, 92, 0.35);
        background: rgba(212, 146, 92, 0.1);
      }
      .sk-groups {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }
      .sk-subhead {
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--amber2);
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 0.55rem;
      }
      .sk-group .sk-tags {
        margin-top: 0;
      }
      .sk-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem;
      }
      .sk-tag {
        font-family: var(--mono);
        font-size: 0.72rem;
        padding: 0.35rem 0.7rem;
        border-radius: 6px;
        border: 1px solid var(--line2);
        color: var(--ink2);
        letter-spacing: 0.02em;
        background: rgba(0, 0, 0, 0.2);
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
        cursor: default;
      }
      .sk-tag:hover {
        border-color: var(--amber);
        color: var(--ink);
        background: rgba(212, 146, 92, 0.12);
      }
      .sk-tag.hi {
        border-color: rgba(212, 146, 92, 0.45);
        color: var(--amber2);
        background: rgba(212, 146, 92, 0.14);
      }
      .sk-tag.tl {
        border-color: rgba(110, 184, 174, 0.45);
        color: #8fd4ca;
        background: rgba(110, 184, 174, 0.12);
      }

      /* ── PROJECTS ── */
      #projects {
        background: var(--bg);
        border-bottom: 1px solid var(--line);
      }
      .proj-controls {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        margin: 2.5rem 0;
      }
      .pf {
        font-family: var(--mono);
        font-size: 0.62rem;
        padding: 0.38rem 0.9rem;
        border-radius: 3px;
        border: 1px solid var(--line2);
        color: var(--ink3);
        background: transparent;
        cursor: pointer;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        transition:
          border-color 0.2s,
          color 0.2s,
          background 0.2s;
      }
      .pf:hover {
        border-color: var(--line2);
        color: var(--ink);
      }
      .pf.on {
        border-color: var(--amber);
        color: var(--amber);
        background: rgba(212, 146, 92, 0.1);
        box-shadow: 0 0 0 1px rgba(212, 146, 92, 0.15);
      }

      .proj-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 0.5rem;
      }
      .pj {
        background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
        padding: 1.75rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease),
          border-color 0.3s,
          box-shadow 0.3s var(--ease);
        cursor: default;
        position: relative;
        overflow: hidden;
      }
      .pj::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--amber), var(--amber2));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease);
      }
      .pj.on {
        opacity: 1;
        transform: translateY(0);
      }
      .pj:hover {
        border-color: rgba(212, 146, 92, 0.3);
        box-shadow: var(--shadow);
        transform: translateY(-4px);
      }
      .pj:hover::before {
        transform: scaleX(1);
      }
      .pj-icon {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(255, 248, 238, 0.04);
        border-radius: var(--radius-sm);
        border: 1px solid var(--line);
        transition:
          transform 0.3s var(--ease),
          background 0.3s,
          border-color 0.3s;
        overflow: hidden;
        flex-shrink: 0;
      }
      .pj-icon img.pj-logo {
        width: 100%;
        height: 100%;
        max-width: 40px;
        max-height: 40px;
        object-fit: contain;
        display: block;
        padding: 4px;
      }
      .pj-icon.has-logo .pj-fallback {
        display: none;
      }
      .pj-icon:not(.has-logo) .pj-logo {
        display: none;
      }
      .pj-icon:not(.has-logo) .pj-fallback {
        display: block;
      }
      .pj-fallback {
        line-height: 1;
        font-size: 1.35rem;
        display: none;
      }

      .proj-sub {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--ink3);
        letter-spacing: 0.06em;
        margin-top: 0.75rem;
        margin-bottom: 0.25rem;
      }
      .proj-grid-wrap {
        margin-top: 0.5rem;
      }
      .pj:hover .pj-icon {
        transform: scale(1.05);
        background: rgba(212, 146, 92, 0.08);
        border-color: rgba(212, 146, 92, 0.2);
      }
      .pj-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
      }
      .pj-name {
        font-family: var(--serif);
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .pj-badge {
        font-family: var(--mono);
        font-size: 0.58rem;
        color: var(--amber2);
        letter-spacing: 0.05em;
        white-space: nowrap;
        margin-top: 2px;
      }
      .pj-desc {
        font-size: 0.83rem;
        color: var(--ink2);
        line-height: 1.65;
        margin-bottom: 1.1rem;
      }
      .pj-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }
      .pj-tag {
        font-family: var(--mono);
        font-size: 0.58rem;
        padding: 0.15rem 0.45rem;
        border-radius: 3px;
        border: 1px solid var(--line);
        color: var(--ink3);
      }

      /* การ์ดสรุป "10+ more" */
      .pj-more {
        display: flex;
        flex-direction: column;
        
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 220px;
        border-style: dashed;
        background: linear-gradient(
          160deg,
          rgba(212, 146, 92, 0.06) 0%,
          var(--bg2) 100%
        );
        cursor: default;
      }
      .pj-more::before {
        display: none;
      }
      .pj-more:hover {
        transform: translateY(-4px);
        border-color: rgba(212, 146, 92, 0.35);
      }
      .pj-more-big {
        font-family: var(--serif);
        font-size: clamp(3rem, 6vw, 4.5rem);
        font-weight: 500;
        line-height: 1;
        letter-spacing: -0.04em;
        color: var(--amber2);
        margin-bottom: 0.5rem;
      }
      .pj-more-label {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--amber);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
      }
      .pj-more-text {
        font-size: 0.85rem;
        color: var(--ink2);
        line-height: 1.65;
        max-width: 220px;
        margin-bottom: 1rem;
      }
      .pj-more-text strong {
        color: var(--ink);
        font-weight: 500;
      }
      .pj-more-link {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.06em;
        text-decoration: none;
        border-bottom: 1px solid var(--line2);
        padding-bottom: 2px;
        transition:
          color 0.2s,
          border-color 0.2s;
      }
      .pj-more-link:hover {
        color: var(--amber2);
        border-color: var(--amber);
      }

      /* ── EDUCATION ── */
      #education {
        background: var(--bg2);
        border-bottom: 1px solid var(--line);
      }
      .edu-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 3rem;
        margin-bottom: 4rem;
      }
      .edu-card {
        padding: 2rem;
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        background: linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease),
          border-color 0.3s,
          box-shadow 0.3s,
          transform 0.3s var(--ease);
      }
      .edu-card.on {
        opacity: 1;
        transform: translateY(0);
      }
      .edu-card:hover {
        border-color: rgba(212, 146, 92, 0.3);
        box-shadow: var(--shadow);
        transform: translateY(-3px);
      }
      .edu-card.feat {
        border-color: rgba(212, 146, 92, 0.25);
        box-shadow: 0 0 40px rgba(212, 146, 92, 0.06);
      }
      .edu-card.feat::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--amber), var(--amber2));
      }
      .edu-ribbon {
        font-family: var(--mono);
        font-size: 0.6rem;
        color: var(--amber);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }
      .edu-deg {
        font-family: var(--serif);
        font-size: 1.05rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -0.02em;
        margin-bottom: 0.35rem;
        color: var(--ink);
      }
      .edu-school {
        font-family: var(--mono);
        font-size: 0.68rem;
        color: var(--amber2);
        letter-spacing: 0.04em;
        margin-bottom: 0.7rem;
      }
      .edu-detail {
        font-size: 0.83rem;
        color: var(--ink2);
        line-height: 1.65;
      }
      .edu-gpa {
        display: inline-block;
        margin-top: 0.6rem;
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--amber);
        border: 1px solid rgba(200, 132, 74, 0.2);
        padding: 0.2rem 0.6rem;
        border-radius: 3px;
      }

      .lang-block {
        margin-top: 4rem;
        padding-top: 3.5rem;
        border-top: 1px solid var(--line);
      }
      .lang-block-head {
        margin-bottom: 1.25rem;
        max-width: 36rem;
      }
      .lang-eyebrow {
        font-family: var(--mono);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--amber);
        margin-bottom: 0.5rem;
      }
      .lang-heading {
        font-family: var(--serif);
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 400;
        letter-spacing: -0.03em;
        color: var(--ink);
        margin-bottom: 0.65rem;
      }
      .lang-intro {
        font-size: 0.95rem;
        color: var(--ink2);
        line-height: 1.75;
      }
      .lang-panel {
        padding: 1rem 1.2rem;
        border: 1px solid var(--line2);
        border-radius: calc(var(--radius) + 2px);
        background: var(--bg);
        box-shadow: var(--shadow);
      }
      .lang-tiers {
        display: flex;
        flex-direction: column;
        gap: 0.0rem;
      }
      .lang-tier-label {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 0.35rem;
        padding-top: 0.15rem;
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ink);
      }
      .lang-tier-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line2);
      }
      .lang-tier--learn .lang-tier-label {
        color: var(--ink2);
      }
      .lang-grid {
        display: grid;
        gap: 0.65rem;
      }
      .lang-grid--fluent {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .lang-grid--learn {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .lang-card {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        min-height: 10rem;
        padding: 1.35rem 1.4rem 1.3rem;
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        opacity: 0;
        transform: translateY(16px);
        transition:
          opacity 0.55s var(--ease),
          transform 0.55s var(--ease),
          border-color 0.3s,
          box-shadow 0.3s;
      }
      /* ธงเป็นพื้นหลัง — overlay เข้มเพื่อให้ข้อความอ่านง่าย */
      .lang-card[data-flag]::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: var(--flag-bg);
        background-size: cover;
        background-position: center;
        opacity: 0.55;
        transition:
          opacity 0.35s var(--ease),
          transform 0.35s var(--ease);
      }
      .lang-card[data-flag]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
          165deg,
          rgba(14, 12, 10, 0.82) 0%,
          rgba(14, 12, 10, 0.62) 48%,
          rgba(14, 12, 10, 0.85) 100%
        );
      }
      .lang-card:hover[data-flag]::before {
        opacity: 0.68;
        transform: scale(1.03);
      }
      .lang-card[data-flag] > * {
        position: relative;
        z-index: 1;
      }
      .lang-card[data-flag="la"] {
        --flag-bg: url("https://flagcdn.com/w640/la.png");
      }
      .lang-card[data-flag="th"] {
        --flag-bg: url("https://flagcdn.com/w640/th.png");
      }
      .lang-card[data-flag="gb"] {
        --flag-bg: url("https://flagcdn.com/w640/gb.png");
      }
      .lang-card[data-flag="fr"] {
        --flag-bg: url("https://flagcdn.com/w640/fr.png");
      }
      .lang-card[data-flag="de"] {
        --flag-bg: url("https://flagcdn.com/w640/de.png");
      }
      .lang-card.on {
        opacity: 1;
        transform: translateY(0);
      }
      .lang-card:hover {
        border-color: rgba(212, 146, 92, 0.4);
        box-shadow: var(--shadow);
        transform: translateY(-2px);
      }
      .lang-card--native {
        border-color: rgba(212, 146, 92, 0.35);
      }
      .lang-card--native[data-flag]::after {
        background: linear-gradient(
          165deg,
          rgba(212, 146, 92, 0.28) 0%,
          rgba(14, 12, 10, 0.58) 45%,
          rgba(14, 12, 10, 0.82) 100%
        );
      }
      .lang-card--pro[data-flag]::after {
        background: linear-gradient(
          165deg,
          rgba(110, 184, 174, 0.2) 0%,
          rgba(14, 12, 10, 0.58) 48%,
          rgba(14, 12, 10, 0.84) 100%
        );
      }
      .lang-card--learn {
        border-style: dashed;
        border-color: rgba(255, 248, 238, 0.18);
      }
      .lang-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
      }
      .lang-card-meta {
        flex: 1;
        min-width: 0;
      }
      .lang-name {
        font-family: var(--serif);
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        color: var(--ink);
        line-height: 1.2;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
      }
      .lang-script {
        display: block;
        margin-top: 0.2rem;
        font-size: 0.82rem;
        color: rgba(245, 240, 232, 0.88);
        line-height: 1.35;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
      }
      .lang-badge {
        flex-shrink: 0;
        align-self: flex-start;
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        border: 1px solid rgba(255, 248, 238, 0.2);
        background: rgba(14, 12, 10, 0.55);
        color: var(--ink);
        backdrop-filter: blur(8px);
      }
      .lang-badge--native {
        color: var(--amber2);
        border-color: rgba(212, 146, 92, 0.5);
        background: rgba(14, 12, 10, 0.6);
      }
      .lang-badge--pro {
        color: #8fd4ca;
        border-color: rgba(110, 184, 174, 0.5);
        background: rgba(14, 12, 10, 0.6);
      }
      .lang-badge--learn {
        color: var(--ink2);
        border-style: dashed;
        background: rgba(14, 12, 10, 0.55);
      }
      .lang-meter {
        margin-top: auto;
        padding: 0.75rem 0.85rem;
        border-radius: var(--radius-sm);
        background: rgba(14, 12, 10, 0.52);
        border: 1px solid rgba(255, 248, 238, 0.1);
        backdrop-filter: blur(6px);
      }
      .lang-meter-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.55rem;
      }
      .lang-meter-label {
        font-family: var(--mono);
        font-size: 0.65rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.75);
      }
      .lang-meter-pct {
        font-family: var(--mono);
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--ink);
        letter-spacing: 0.02em;
      }
      .lang-card--native .lang-meter-pct {
        color: var(--amber2);
      }
      .lang-card--pro .lang-meter-pct {
        color: #8fd4ca;
      }
      .lang-track {
        height: 10px;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 999px;
        overflow: hidden;
        border: 1px solid var(--line2);
      }
      .lang-fill {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--amber) 0%, var(--amber2) 100%);
        box-shadow: 0 0 14px rgba(212, 146, 92, 0.4);
        transition: width 1.15s var(--ease);
      }
      .lang-card--pro .lang-fill {
        background: linear-gradient(90deg, #4a9e94 0%, var(--teal) 100%);
        box-shadow: 0 0 14px rgba(110, 184, 174, 0.35);
      }
      .lang-card--learn .lang-fill {
        background: linear-gradient(90deg, var(--ink3) 0%, var(--ink2) 100%);
        box-shadow: none;
      }
      .lang-card.on .lang-fill {
        width: var(--w);
      }
      .lang-level-note {
        margin-top: 0.65rem;
        padding: 0.45rem 0.65rem;
        font-size: 0.75rem;
        color: rgba(245, 240, 232, 0.82);
        line-height: 1.45;
        background: rgba(14, 12, 10, 0.45);
        border: 1px solid rgba(255, 248, 238, 0.1);
        border-radius: var(--radius-sm);
      }

      /* ── CONTACT ── */
      #contact {
        background: var(--bg);
        position: relative;
      }
      #contact::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 40%;
        background: radial-gradient(
          ellipse,
          var(--amber-glow) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        margin-top: 4rem;
        align-items: start;
        position: relative;
      }
      .ct-links {
        display: flex;
        flex-direction: column;
        background: var(--bg2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 0 1.25rem;
        box-shadow: var(--shadow);
      }
      .ct-intro {
      }
      .ct-heading {
        font-family: var(--serif);
        font-size: clamp(2.5rem, 4vw, 4rem);
        font-weight: 400;
        font-style: italic;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--ink);
        margin-bottom: 1.5rem;
      }
      .ct-heading em {
        color: var(--amber2);
        font-style: normal;
      }
      .ct-sub {
        font-size: 0.92rem;
        color: var(--ink2);
        line-height: 1.85;
        max-width: 380px;
      }
      .ct-note {
        margin-top: 2rem;
        font-family: var(--mono);
        font-size: 0.65rem;
        color: var(--ink3);
        letter-spacing: 0.05em;
        line-height: 1.8;
      }
      .ct-note a {
        color: var(--amber2);
        text-decoration: none;
      }
      .ct-note a:hover {
        text-decoration: underline;
      }

      .ct-link {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--line);
        text-decoration: none;
        color: var(--ink);
        transition: padding-left 0.3s ease;
        position: relative;
        overflow: hidden;
      }
      .ct-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 0;
        background: var(--amber);
        transition: height 0.3s ease;
      }
      .ct-link:hover {
        padding-left: 1rem;
      }
      .ct-link:hover::before {
        height: 100%;
      }
      .ct-link:hover .ct-icon {
        color: var(--amber2);
      }
      .ct-icon {
        font-size: 1rem;
        width: 20px;
        text-align: center;
        transition: color 0.2s;
        flex-shrink: 0;
      }
      .ct-body {
        flex: 1;
      }
      .ct-label {
        font-family: var(--mono);
        font-size: 0.6rem;
        color: var(--ink3);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 1px;
      }
      .ct-value {
        font-size: 0.9rem;
        color: var(--ink);
      }
      .ct-arrow {
        font-size: 1rem;
        color: var(--ink3);
        transition:
          transform 0.3s ease,
          color 0.2s;
      }
      .ct-link:hover .ct-arrow {
        transform: translate(3px, -3px);
        color: var(--amber);
      }

      /* ── FOOTER ── */
      footer {
        background: var(--bg2);
        border-top: 1px solid var(--line);
        padding: 2rem 3rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .f-l {
        font-family: var(--mono);
        font-size: 0.62rem;
        color: var(--ink3);
        letter-spacing: 0.05em;
      }
      .f-c {
        font-family: var(--serif);
        font-size: 1rem;
        font-weight: 400;
        color: var(--ink2);
        font-style: italic;
      }

      /* ── REVEAL BASE (pre-vis) ── */
      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
          opacity 0.65s ease,
          transform 0.65s ease;
      }
      .reveal.on {
        opacity: 1;
        transform: translateY(0);
      }

      /* ── BACK TO TOP ── */
      #btt {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--bg3);
        border: 1px solid var(--line2);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink2);
        text-decoration: none;
        font-size: 0.85rem;
        z-index: 90;
        opacity: 0;
        transform: translateY(8px);
        transition:
          opacity 0.3s,
          transform 0.3s,
          background 0.2s,
          color 0.2s;
      }
      #btt.show {
        opacity: 1;
        transform: translateY(0);
      }
      #btt:hover {
        background: var(--amber);
        color: var(--bg);
        border-color: var(--amber);
        box-shadow: 0 4px 20px rgba(212, 146, 92, 0.3);
        transform: translateY(-2px);
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 900px) {
        nav,
        nav.s {
          padding: 1rem 2rem;
        }
        .navLinks,
        .navCta {
          display: none;
        }
        .navToggle {
          display: flex;
        }
        .mobileMenu {
          display: flex;
        }
        section {
          padding: 5rem 2rem;
        }
        .hero {
          padding: 0 2rem 4rem;
        }
        .hero-inner {
          grid-template-columns: 1fr;
          padding-top: 5.5rem;
        }
        .hero-photo {
          order: -1;
          margin-bottom: 1rem;
        }
        .profile-frame {
          max-width: 220px;
        }
        .about-grid {
          grid-template-columns: 1fr;
          gap: 2.5rem;
        }
        .profile-frame--sm {
          margin: 0 auto 2rem;
        }
        .exp-row {
          grid-template-columns: 1fr;
          gap: 0.5rem;
        }
        .skills-panel {
          padding: 0.85rem 1rem;
        }
        .skills-grid--core,
        .skills-grid--compact {
          grid-template-columns: 1fr;
        }
        .skills-grid--core .sk--wide {
          grid-column: auto;
        }
        .proj-grid {
          grid-template-columns: 1fr 1fr;
          gap: 0.75rem;
        }
        .edu-cards {
          grid-template-columns: 1fr;
        }
        .lang-grid--fluent {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .lang-grid--fluent .lang-card--native {
          grid-column: 1 / -1;
        }
        .skills-grid--compact {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 3rem;
        }
        footer {
          flex-direction: column;
          gap: 0.5rem;
          text-align: center;
        }
      }
      @media (max-width: 560px) {
        section {
          padding: 4rem 1.5rem;
        }
        .hero {
          padding: 0 1.5rem 3.5rem;
        }
        .hero-tag {
          width: 100%;
          margin-bottom: 1rem;
        }
        .hero-tag--open {
          width: 100%;
          max-width: 100%;
          gap: 0.45rem;
          padding: 0.48rem 0.7rem 0.48rem 0.55rem;
        }
        .tag-open {
          padding: 0.16rem 0.44rem;
          font-size: 0.56rem;
          letter-spacing: 0.08em;
        }
        .tag-text {
          font-size: 0.58rem;
          letter-spacing: 0.045em;
          line-height: 1.45;
          white-space: normal;
          overflow-wrap: anywhere;
        }
        .hero-foot {
          flex-direction: column;
          align-items: flex-start;
        }
        .profile-frame {
          max-width: 200px;
        }
        .hero-meta {
          align-self: flex-start;
          width: 100%;
        }
        .hero-meta-card {
          width: 100%;
          min-width: 0;
        }
        .hero-numbers {
          gap: 1rem;
          flex-wrap: wrap;
        }
        .num-block {
          flex: 1 1 calc(50% - 0.5rem);
          min-width: 120px;
        }
        .proj-grid {
          grid-template-columns: 1fr;
        }
        .skills-grid--compact {
          grid-template-columns: 1fr;
        }
        .eu-row {
          flex-direction: column;
        }
        .lang-panel {
          padding: 0.85rem 1rem;
        }
        .lang-grid--fluent,
        .lang-grid--learn {
          grid-template-columns: 1fr;
        }
        nav,
        nav.s {
          padding: 1rem 1.5rem;
        }
        footer {
          padding: 1.5rem;
        }
      }

      /* ── ACTIVITIES ── */
      #activities {
        padding: 6rem 3rem;
      }
      .act-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
        margin-top: 3rem;
      }
      .act-card {
        background: var(--bg2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
      }
      .act-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
      }
      .act-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 4/3;
        background: var(--bg3);
        overflow: hidden;
      }
      .act-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s var(--ease);
      }
      .act-card:hover .act-img-wrap img {
        transform: scale(1.05);
      }
      .act-img-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--ink3);
        font-size: 0.8rem;
        font-family: var(--mono);
      }
      .act-img-placeholder svg { opacity: 0.4; }
      .act-body { padding: 1.25rem; }
      .act-event-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-family: var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--amber);
        background: var(--amber-glow);
        border: 1px solid rgba(212,146,92,0.2);
        border-radius: 4px;
        padding: 2px 8px;
        margin-bottom: 0.6rem;
      }
      .act-title {
        font-family: var(--serif);
        font-size: 1.05rem;
        color: var(--ink);
        margin-bottom: 0.4rem;
        line-height: 1.4;
      }
      .act-meta {
        font-size: 0.78rem;
        color: var(--ink3);
        font-family: var(--mono);
      }
      /* ── Event Gallery Modal ── */
      .act-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.92);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      .act-modal-overlay.open {
        opacity: 1;
        pointer-events: all;
      }
      .act-modal {
        background: var(--bg2);
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        width: 100%;
        max-width: 800px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 2rem;
        position: relative;
        box-shadow: var(--shadow-lg);
      }
      .act-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: var(--bg3);
        border: 1px solid var(--line2);
        color: var(--ink);
        border-radius: 50%;
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .act-modal-close:hover { background: var(--bg-elev); }
      .act-modal-header { margin-bottom: 1.5rem; }
      .act-modal-title {
        font-family: var(--serif);
        font-size: 1.4rem;
        color: var(--ink);
        margin: 0.4rem 0 0.6rem;
      }
      .act-modal-desc {
        color: var(--ink2);
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 0.4rem;
      }
      .act-modal-meta {
        font-family: var(--mono);
        font-size: 0.75rem;
        color: var(--ink3);
      }
      .act-gallery {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
      }
      .act-gallery-img-wrap {
        flex: 1;
        position: relative;
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: var(--bg3);
        aspect-ratio: 16/9;
      }
      .act-gallery-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: opacity 0.2s;
        background: var(--bg3);
      }
      .act-gallery-counter {
        position: absolute;
        bottom: 0.6rem;
        right: 0.7rem;
        background: rgba(0,0,0,0.6);
        color: #fff;
        font-family: var(--mono);
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 20px;
      }
      .act-gallery-nav {
        background: var(--bg3);
        border: 1px solid var(--line2);
        color: var(--ink);
        border-radius: 50%;
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1rem;
        cursor: pointer;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .act-gallery-nav:hover { background: var(--bg-elev); }
      .act-gallery-nav:disabled { opacity: 0.25; cursor: default; }
      .act-thumbs {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }
      .act-thumb {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.2s;
        flex-shrink: 0;
      }
      .act-thumb.active { border-color: var(--amber); }
      .act-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        background: var(--bg3);
      }
      .act-card { cursor: pointer; }
      .act-card-more {
        display: flex;
        text-decoration: none;
        border-style: dashed;
        border-color: var(--line2);
        background: transparent;
        min-height: 100%;
      }
      .act-card-more:hover {
        border-color: var(--amber);
        background: var(--amber-glow);
      }
      .act-more-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.25rem;
        width: 100%;
        min-height: 280px;
        text-align: center;
      }
      .act-more-icon {
        display: inline-flex;
        width: 1.75rem;
        height: 1.75rem;
        margin-bottom: 0.75rem;
        color: var(--amber);
        transition: transform 0.3s var(--ease);
      }
      .act-more-icon::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
      }
      .act-card-more:hover .act-more-icon {
        transform: translateX(4px);
      }
      .act-more-label {
        font-family: var(--serif);
        font-size: 1.15rem;
        color: var(--ink);
        margin-bottom: 0.35rem;
      }
      .act-more-sub,
      .act-more-hint {
        font-family: var(--mono);
        font-size: 0.72rem;
        color: var(--ink3);
      }
      .act-more-hint {
        margin-top: 0.5rem;
        color: var(--amber);
      }
      .act-empty {
        color: var(--ink3);
        font-family: var(--mono);
        font-size: 0.85rem;
        grid-column: 1 / -1;
      }

      /* Activities — iPad & mobile */
      @media (max-width: 1024px) {
        #activities {
          padding: 5rem 2rem;
        }
        .act-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1.25rem;
          margin-top: 2.5rem;
        }
        .act-modal {
          max-width: min(800px, calc(100vw - 2rem));
          padding: 1.5rem;
        }
      }

      @media (max-width: 768px) {
        #activities {
          padding: 4.5rem 1.5rem;
        }
        .act-grid {
          gap: 1rem;
        }
        .act-modal-overlay {
          padding: 0.75rem;
        }
        .act-modal {
          max-height: min(92vh, 92dvh);
          padding: 1.25rem 1rem 1.5rem;
        }
        .act-modal-header {
          margin-bottom: 1rem;
          padding-right: 2.75rem;
        }
        .act-modal-title {
          font-size: 1.2rem;
          line-height: 1.35;
        }
        .act-modal-desc {
          font-size: 0.85rem;
        }
        .act-gallery {
          gap: 0.5rem;
          margin-bottom: 0.75rem;
        }
        .act-gallery-nav {
          width: 2.25rem;
          height: 2.25rem;
          min-width: 2.25rem;
          font-size: 0.9rem;
        }
        .act-gallery-img-wrap {
          aspect-ratio: 4/3;
          min-width: 0;
        }
        .act-thumbs {
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
          gap: 0.4rem;
          padding-bottom: 0.35rem;
        }
        .act-thumbs::-webkit-scrollbar {
          height: 4px;
        }
        .act-thumb {
          width: 56px;
          height: 56px;
        }
        .act-more-inner {
          min-height: 220px;
          padding: 1.5rem 1rem;
        }
      }

      @media (max-width: 640px) {
        #activities {
          padding: 4rem 1.25rem;
        }
        .act-grid {
          grid-template-columns: 1fr;
          margin-top: 2rem;
        }
        .act-body {
          padding: 1rem;
        }
        .act-title {
          font-size: 1rem;
        }
        .act-card-more .act-more-inner {
          min-height: 200px;
        }
        .act-modal-overlay {
          padding: 0;
          align-items: stretch;
        }
        .act-modal {
          width: 100%;
          max-width: none;
          max-height: 100vh;
          max-height: 100dvh;
          min-height: 100dvh;
          border-radius: 0;
          border-left: none;
          border-right: none;
          padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom));
          padding-top: max(3rem, env(safe-area-inset-top));
        }
        .act-modal-close {
          top: max(0.75rem, env(safe-area-inset-top));
          right: 0.75rem;
          width: 2.5rem;
          height: 2.5rem;
        }
      }

      @media (max-width: 640px) and (hover: none) {
        .act-card:hover {
          transform: none;
          box-shadow: none;
        }
        .act-card:active {
          opacity: 0.92;
        }
      }

      @media (max-width: 380px) {
        .act-gallery-nav {
          width: 2rem;
          height: 2rem;
          min-width: 2rem;
          font-size: 0.8rem;
        }
        .act-thumb {
          width: 48px;
          height: 48px;
        }
        .act-modal-title {
          font-size: 1.05rem;
        }
      }

      /* ── Blog ── */
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.5rem;
        margin-top: 3rem;
      }
      .blog-card {
        background: var(--bg2);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
        display: block;
      }
      .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
      }
      .blog-cover {
        width: 100%;
        aspect-ratio: 16/9;
        background: var(--bg3);
        overflow: hidden;
        position: relative;
      }
      .blog-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s var(--ease);
      }
      .blog-card:hover .blog-cover img { transform: scale(1.05); }
      .blog-cover-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(26,24,22,0.85) 0%, transparent 50%);
        display: flex;
        align-items: flex-end;
        padding: 1rem;
        opacity: 0;
        transition: opacity 0.3s var(--ease);
      }
      .blog-card:hover .blog-cover-overlay { opacity: 1; }
      .blog-cover-hint {
        font-family: var(--mono);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--amber2);
      }
      .blog-cover-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        color: var(--ink3);
        font-size: 0.8rem;
        font-family: var(--mono);
      }
      .blog-cover-placeholder svg { opacity: 0.4; }
      .blog-body { padding: 1.4rem; }
      .blog-tag {
        display: inline-block;
        font-size: 0.7rem;
        font-family: var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--amber);
        background: var(--amber-glow);
        border: 1px solid rgba(212,146,92,0.2);
        border-radius: 4px;
        padding: 2px 8px;
        margin-bottom: 0.7rem;
      }
      .blog-title {
        font-family: var(--serif);
        font-size: 1.1rem;
        color: var(--ink);
        margin-bottom: 0.5rem;
        line-height: 1.4;
      }
      .blog-excerpt {
        color: var(--ink2);
        font-size: 0.85rem;
        line-height: 1.6;
        margin-bottom: 0.9rem;
      }
      .blog-meta {
        font-family: var(--mono);
        font-size: 0.72rem;
        color: var(--ink3);
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .blog-card-more {
        border-style: dashed;
        border-color: var(--line2);
        background: transparent;
        text-decoration: none;
        color: inherit;
      }
      .blog-card-more:hover {
        border-color: var(--amber);
        background: var(--amber-glow);
      }
      .blog-more-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2.5rem 1.4rem;
        min-height: 280px;
        text-align: center;
      }
      .blog-more-icon {
        font-size: 1.75rem;
        color: var(--amber);
        margin-bottom: 0.75rem;
        transition: transform 0.3s var(--ease);
      }
      .blog-card-more:hover .blog-more-icon {
        transform: translateX(4px);
      }
      .blog-more-label {
        font-family: var(--serif);
        font-size: 1.15rem;
        color: var(--ink);
        margin-bottom: 0.35rem;
      }
      .blog-more-sub,
      .blog-more-hint {
        font-family: var(--mono);
        font-size: 0.72rem;
        color: var(--ink3);
      }
      .blog-more-hint {
        margin-top: 0.5rem;
        color: var(--amber);
      }
      .blog-empty {
        color: var(--ink3);
        font-family: var(--mono);
        font-size: 0.85rem;
        grid-column: 1 / -1;
      }
      @media (max-width: 640px) {
        .blog-grid { grid-template-columns: 1fr; }
      }
      /* ── Blog Article Modal ── */
      .blog-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.92);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
      }
      .blog-modal-overlay.open {
        opacity: 1;
        pointer-events: all;
      }
      .blog-modal {
        background:
          radial-gradient(1200px 420px at 5% -15%, rgba(212,146,92,0.13), transparent 60%),
          radial-gradient(900px 360px at 100% 0%, rgba(110,165,255,0.1), transparent 62%),
          var(--bg2);
        border: 1px solid var(--line2);
        border-radius: var(--radius);
        width: 100%;
        max-width: 1080px;
        max-height: 90vh;
        overflow-y: auto;
        padding: 2rem;
        position: relative;
        box-shadow: var(--shadow-lg);
      }
      .blog-modal-header {
        margin-bottom: 1rem;
        padding-bottom: 0.8rem;
        border-bottom: 1px solid rgba(212,146,92,0.22);
      }
      .blog-modal-desc {
        color: var(--ink2);
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 0.4rem;
      }
      .blog-modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: var(--bg3);
        border: 1px solid var(--line2);
        color: var(--ink);
        border-radius: 50%;
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        z-index: 1;
      }
      .blog-modal-close:hover { background: var(--bg-elev); }
      .blog-modal-gallery-wrap { margin-bottom: 1.25rem; }
      .blog-modal-gallery-wrap.hidden { display: none; }
      .blog-modal-title {
        font-family: var(--serif);
        font-size: 1.5rem;
        color: var(--ink);
        margin: 0.4rem 0 0.6rem;
        line-height: 1.3;
      }
      .blog-modal-meta {
        margin-bottom: 1.25rem;
      }
      .blog-modal-body {
        color: var(--ink2);
        font-size: 0.92rem;
        line-height: 1.75;
      }
      .blog-modal-body h2 {
        font-family: var(--serif);
        font-size: 1.15rem;
        color: var(--ink);
        margin: 1.5rem 0 0.6rem;
        padding-left: 0.62rem;
        border-left: 3px solid var(--amber);
      }
      .blog-modal-body h2:first-child { margin-top: 0; }
      .blog-modal-body p { margin-bottom: 1rem; }
      .blog-modal-body ul, .blog-modal-body ol {
        margin: 0 0 1rem 1.25rem;
      }
      .blog-modal-body li { margin-bottom: 0.35rem; }
      .blog-modal-body code {
        font-family: var(--mono);
        font-size: 0.85em;
        background: var(--bg3);
        padding: 0.15em 0.4em;
        border-radius: 4px;
        color: var(--amber2);
      }
      .blog-modal-body pre {
        background: var(--bg3);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 1rem;
        overflow-x: auto;
        margin-bottom: 1rem;
        font-family: var(--mono);
        font-size: 0.8rem;
        line-height: 1.5;
      }
      .blog-modal-body .blog-code-block {
        margin: 1rem 0 1.1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        overflow: hidden;
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
      }
      .blog-modal-body .blog-code-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.55rem 0.8rem;
        font-family: var(--mono);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--amber2);
        border-bottom: 1px solid var(--line);
        background: linear-gradient(90deg, rgba(212,146,92,0.16), rgba(212,146,92,0.05));
      }
      .blog-modal-body .blog-code-block pre {
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }
      .blog-modal-body .blog-code-block code {
        display: block;
        color: #d8e1ff;
      }
      .blog-modal-body .blog-code-block .tok-keyword { color: #ffb454; font-weight: 600; }
      .blog-modal-body .blog-code-block .tok-string { color: #a3e635; }
      .blog-modal-body .blog-code-block .tok-comment { color: #7f8ea3; font-style: italic; }
      .blog-modal-body .blog-code-block .tok-number { color: #7dd3fc; }
      .blog-modal-body .blog-code-block .tok-builtin { color: #c4b5fd; }
      .blog-modal-body .blog-code-block .tok-var { color: #f9a8d4; }
      .blog-modal-body .blog-step {
        margin: 1rem 0 0.65rem;
        padding: 0.62rem 0.82rem;
        border-radius: 8px;
        border: 1px solid rgba(212,146,92,0.3);
        background: linear-gradient(90deg, rgba(212,146,92,0.18), rgba(212,146,92,0.06));
        color: var(--amber2);
        font-family: var(--mono);
        font-size: 0.78rem;
        letter-spacing: 0.03em;
      }
      .blog-modal-body .blog-credit {
        margin-top: 1.2rem;
        padding: 0.7rem 0.85rem;
        border-radius: 8px;
        border: 1px dashed rgba(110,165,255,0.5);
        background: rgba(110,165,255,0.08);
        color: #a5c4ff;
        font-family: var(--mono);
        font-size: 0.78rem;
      }
      .blog-modal-body figure {
        margin: 1.25rem 0;
        border-radius: var(--radius-sm);
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--bg3);
      }
      .blog-modal-body figure img {
        width: 100%;
        display: block;
        aspect-ratio: 16/9;
        object-fit: cover;
      }
      .blog-modal-body figcaption {
        padding: 0.6rem 1rem;
        font-family: var(--mono);
        font-size: 0.72rem;
        color: var(--ink3);
      }
      .blog-modal-loading {
        color: var(--ink3);
        font-family: var(--mono);
        font-size: 0.85rem;
      }