/* Sounay Phothisane — theme enhancement layer (light-only, "The Signal") */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('https://sounay.com/wp-content/mu-plugins/sounay-assets/newsreader-roman.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('https://sounay.com/wp-content/mu-plugins/sounay-assets/newsreader-italic.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('https://sounay.com/wp-content/mu-plugins/sounay-assets/plexmono-medium.woff2') format('woff2');
}

:root{
  --bg:#FCFCFA;
  --surface:#F6F7F5;
  --surface-tint:#EEF2FC;
  --ink:#14161A;
  --ink-soft:#4F535C;
  --ink-faint:#868B94;
  --rule:rgba(20,22,26,.14);
  --rule-soft:rgba(20,22,26,.08);
  --accent:#2647D6;
  --accent-strong:#17309E;
  --accent-soft:rgba(38,71,214,.1);
  --accent-soft-strong:rgba(38,71,214,.18);
  --accent-glow:rgba(38,71,214,.28);
  --on-accent:#FFFFFF;
  --gold:#AD7C2E;
  --gold-soft:rgba(173,124,46,.12);
  --gold-soft-strong:rgba(173,124,46,.22);
  --on-gold:#FFFFFF;
  --shadow:0 24px 55px -30px rgba(20,22,26,.28);
  --shadow-lg:0 30px 70px -30px rgba(20,22,26,.35);
  --font-display:'Newsreader',ui-serif,Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-body:'Newsreader',ui-serif,Georgia,serif;
}

body.sn-site{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.05rem;line-height:1.65;-webkit-font-smoothing:antialiased;}
.sn-site ::selection{background:var(--accent);color:var(--on-accent);}
.sn-site a{color:var(--accent-strong);}
.sn-site h1,.sn-site h2,.sn-site h3,.sn-site h4{font-family:var(--font-display);font-weight:600;text-wrap:balance;letter-spacing:-.01em;margin:0;}
.sn-mono{font-family:var(--font-mono);}
.sn-tnum{font-variant-numeric:tabular-nums;}
.sn-eyebrow{font-family:var(--font-mono)!important;font-weight:500;font-size:.74rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong)!important;}

/* Elementor/Hello Elementor ship their own global Kit typography (Roboto) that
   applies directly to inner elements (button text, icon-list text, editor
   paragraphs) rather than being inherited — so it silently wins over color/
   font-family set on the outer widget wrapper. Reassert our body font as the
   baseline on every one of those inner elements; the more specific component
   rules further down (mono labels, buttons, etc.) override this as needed. */
.sn-site .elementor-widget-text-editor p,
.sn-site .elementor-heading-title,
.sn-site .elementor-button,
.sn-site .elementor-button-text,
.sn-site .elementor-icon-list-text,
.sn-site .elementor-icon-box-title,
.sn-site .elementor-icon-box-description{
  font-family:var(--font-body)!important;
  color:inherit;
}

/* progress bar (injected by JS) */
.sn-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0%;z-index:9999;transition:width .1s linear;}

/* nav (rendered via [sounay_nav] shortcode) */
.sn-nav{position:sticky;top:0;z-index:999;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft);}
.sn-nav-inner{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem);display:flex;align-items:center;justify-content:space-between;height:62px;}
.sn-brand{font-family:var(--font-mono);font-weight:500;font-size:.85rem;letter-spacing:.02em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.55rem;}
.sn-brand .sn-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;}
.sn-nav-links{display:flex;gap:clamp(1rem,2vw,1.9rem);list-style:none;margin:0;padding:0;}
.sn-nav-links a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);position:relative;padding-bottom:4px;}
.sn-nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s ease;}
.sn-nav-links a:hover{color:var(--ink);}
.sn-nav-links a:hover::after{width:100%;}
.sn-nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:4px;width:36px;height:36px;color:var(--ink);cursor:pointer;font-size:1.1rem;}

/* buttons — .sn-btn / .sn-btn-filled land on the OUTER .elementor-widget-button
   wrapper (Elementor always applies custom CSS classes there, not on the inner
   <a class="elementor-button">), so every rule descends into it explicitly.
   Hover is a colour fill-sweep from the cursor's entry point (--bx, set by JS)
   — no movement, no jumping. */
.sn-btn .elementor-button,
.sn-btn-filled .elementor-button{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--font-mono)!important;font-size:.76rem!important;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.3rem!important;
  border:1px solid var(--ink)!important;color:var(--ink)!important;border-radius:2px!important;background:transparent!important;
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.sn-btn .elementor-button::before,
.sn-btn-filled .elementor-button::before{
  content:"";position:absolute;inset:0;z-index:0;
  transform:scaleX(0);transform-origin:var(--bx,0%) 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.sn-btn .elementor-button::before{background:var(--ink);}
.sn-btn .elementor-button-text,.sn-btn .elementor-button-content-wrapper,
.sn-btn-filled .elementor-button-text,.sn-btn-filled .elementor-button-content-wrapper{
  position:relative;z-index:1;font-family:inherit!important;
}
.sn-btn:hover .elementor-button{color:var(--bg)!important;border-color:var(--ink)!important;box-shadow:0 16px 34px -18px rgba(20,22,26,.45);}
.sn-btn:hover .elementor-button::before{transform:scaleX(1);}

.sn-btn-filled .elementor-button{background:var(--ink)!important;color:var(--bg)!important;}
.sn-btn-filled .elementor-button::before{background:var(--accent);}
.sn-btn-filled:hover .elementor-button{color:var(--on-accent)!important;border-color:var(--accent)!important;box-shadow:0 16px 38px -14px var(--accent-glow);}
.sn-btn-filled:hover .elementor-button::before{transform:scaleX(1);}

/* hero */
.sn-hero{position:relative;padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden;}
.sn-hero-spot{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.9;
  background:
    radial-gradient(480px circle at var(--mx,70%) var(--my,30%), var(--accent-soft), transparent 60%),
    radial-gradient(720px circle at 8% 92%, var(--gold-soft), transparent 55%);
}
.sn-hero-name h1,.sn-hero-name h2{font-size:clamp(2.6rem,5.2vw + 1rem,4.9rem)!important;line-height:1.03;}
.sn-hero-name .sn-accentword{color:var(--accent);font-style:italic;}
.sn-hero-tag,.sn-hero-tag p{font-size:1.2rem!important;color:var(--ink-soft)!important;max-width:32rem;}
.sn-hero-marquee{margin-top:2.6rem;border-top:1px solid var(--rule-soft);padding-top:1.1rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.sn-hero-marquee ul{display:flex!important;flex-wrap:nowrap!important;gap:2.2rem;width:max-content;animation:sn-marquee 26s linear infinite;list-style:none;margin:0;padding:0;}
.sn-hero-marquee:hover ul{animation-play-state:paused;}
.sn-hero-marquee li{white-space:nowrap;}
.sn-hero-marquee .elementor-icon-list-text{font-family:var(--font-mono)!important;font-size:.72rem!important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)!important;}
.sn-hero-marquee .elementor-icon-list-icon{display:none!important;}
@keyframes sn-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.sn-hero-chart{width:100%;height:auto;overflow:visible;}
.sn-hero-chart path.sn-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .3s;}
.sn-hero.sn-ready .sn-hero-chart path.sn-line{stroke-dashoffset:0;}
.sn-hero-chart path.sn-area{fill:url(#snChartFade);opacity:0;transition:opacity 1s ease 1.2s;}
.sn-hero.sn-ready .sn-hero-chart path.sn-area{opacity:1;}
.sn-hero-chart circle.sn-pt{fill:var(--accent);opacity:0;transition:opacity .4s ease 1.9s;}
.sn-hero.sn-ready .sn-hero-chart circle.sn-pt{opacity:1;}
.sn-hero-chart circle.sn-pulse{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;}
.sn-hero.sn-ready .sn-hero-chart circle.sn-pulse{animation:sn-pulse 2.2s ease-out 2s infinite;}
@keyframes sn-pulse{0%{opacity:.55;r:5;}100%{opacity:0;r:22;}}

.sn-portrait-frame{position:relative;border:1px solid var(--rule);padding:12px;background:var(--surface);box-shadow:var(--shadow-lg);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease;}
.sn-portrait-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;filter:grayscale(.15) contrast(1.04);}
.sn-portrait-caption{display:flex;justify-content:space-between;margin-top:.7rem;font-family:var(--font-mono)!important;font-size:.68rem!important;letter-spacing:.06em;color:var(--ink-faint)!important;text-transform:uppercase;}
.sn-portrait-caption p{font-family:var(--font-mono)!important;font-size:.68rem!important;color:var(--ink-faint)!important;margin:0!important;}

/* stat band */
.sn-stats{background:var(--surface-tint);padding:clamp(2rem,4.5vw,2.75rem) 0!important;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);}
.sn-stat{border-left:2px solid var(--accent);padding-left:1.1rem;min-width:0;}
.sn-stat .sn-num,.sn-stat .sn-num .elementor-heading-title{font-family:var(--font-mono)!important;font-weight:500;font-size:clamp(1.9rem,3vw,2.5rem)!important;color:var(--accent-strong)!important;display:block;line-height:1;}
.sn-stat .sn-label,.sn-stat .sn-label .elementor-heading-title{font-size:.78rem!important;letter-spacing:.03em;color:var(--ink-faint)!important;display:block;margin-top:.5rem;font-family:var(--font-body)!important;}

.sn-section-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.6rem;}
.sn-section-head::after{content:"";flex:1;height:1px;background:var(--rule);}
.sn-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
.sn-reveal.sn-in{opacity:1;transform:none;}

.sn-pull-box{background:var(--surface-tint);border-left:3px solid var(--gold);padding:1.6rem 1.8rem;}
.sn-pull-box p{font-style:italic;font-size:1.15rem!important;color:var(--ink)!important;margin:0!important;}
.sn-pull-attr{display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase;}

/* pillars (icon-box widgets) — alternate blue/gold per column for a little
   more colour rhythm, plus a diagonal shine sweep on hover. */
.sn-pillar.elementor-widget-icon-box{background:var(--surface);border:1px solid var(--rule-soft);padding:1.9rem!important;position:relative;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;}
.sn-pillar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease;}
.sn-pillar::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none;
}
.sn-pillar:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--rule);}
.sn-pillar:hover::before{transform:scaleX(1);}
.sn-pillar:hover::after{left:130%;}
.sn-pillar .elementor-icon-box-icon{color:var(--accent)!important;margin-bottom:.5rem;transition:transform .35s ease;}
.sn-pillar:hover .elementor-icon-box-icon{transform:scale(1.08) rotate(-4deg);}
.sn-pillar .elementor-icon-box-title{font-size:1.1rem!important;color:var(--ink)!important;}
.sn-pillar .elementor-icon-box-description{font-size:.92rem!important;color:var(--ink-soft)!important;}
.sn-pillar-gold::before{background:var(--gold);}
.sn-pillar-gold .elementor-icon-box-icon{color:var(--gold)!important;}

/* experience timeline rows */
.sn-trow{border-bottom:1px solid var(--rule);padding:1.5rem 1rem!important;position:relative;transition:background .25s ease;}
.sn-trow:hover{background:var(--surface-tint);}
.sn-trow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transition:transform .3s ease;}
.sn-trow:hover::before{transform:scaleY(1);}
.sn-trow .sn-when{display:inline-block;}
.sn-trow .sn-when .elementor-heading-title{
  font-family:var(--font-mono)!important;font-size:.7rem!important;font-weight:500;letter-spacing:.03em;
  color:var(--gold)!important;background:var(--gold-soft);
  display:inline-block;padding:.32rem .6rem;border-radius:3px;
}
.sn-trow .sn-status{color:var(--accent-strong);}
.sn-trow .sn-org{color:var(--ink-soft)!important;font-size:.9rem!important;font-style:italic;}

/* education cards */
.sn-card{background:var(--surface);border:1px solid var(--rule-soft);border-top:3px solid var(--accent);padding:1.7rem!important;transition:box-shadow .3s ease,transform .3s ease;}
.sn-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}

/* publications */
.sn-cite{position:relative;padding:1.3rem 0!important;border-bottom:1px solid var(--rule);}
.sn-cite .sn-meta{color:var(--ink-faint);font-size:.85rem;font-family:var(--font-mono);}
.sn-presentations{list-style:none;margin:0;padding:0;}
.sn-presentations li{padding:.9rem 0;border-bottom:1px solid var(--rule);font-size:.92rem;color:var(--ink-soft);}
.sn-presentations li strong{font-family:var(--font-mono);color:var(--ink-faint);font-weight:500;margin-right:.6rem;}

/* skills tag chips (icon-list) */
.sn-tags ul{display:flex!important;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0;}
.sn-tags li{border:1px solid var(--rule);padding:.4rem .7rem;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.sn-tags .elementor-icon-list-text{font-family:var(--font-mono)!important;font-size:.72rem!important;letter-spacing:.02em;color:var(--ink-soft)!important;}
.sn-tags .elementor-icon-list-icon{display:none!important;}
.sn-tags li:hover{background:var(--accent);border-color:var(--accent);}
.sn-tags li:hover .elementor-icon-list-text{color:var(--on-accent)!important;}

/* contact */
.sn-contact-section{background:var(--surface-tint)!important;}
.sn-contact-list li{border-bottom:1px solid var(--rule);padding:.85rem 0!important;}
.sn-contact-list .elementor-icon-list-text{font-family:var(--font-mono)!important;font-size:.92rem!important;color:var(--ink)!important;transition:color .2s ease;}
.sn-contact-list .elementor-icon-list-icon{display:none!important;}
.sn-contact-list li:hover .elementor-icon-list-text{color:var(--accent-strong)!important;}

footer.sn-footer{padding:2.2rem 0;border-top:1px solid var(--rule);}
.sn-footer .sn-social .elementor-icon-list-text{color:var(--ink-soft)!important;font-family:var(--font-mono)!important;font-size:.72rem!important;letter-spacing:.04em;text-transform:uppercase;}
.sn-footer .sn-social .elementor-icon-list-icon{display:none!important;}
.sn-footer .sn-social li:hover .elementor-icon-list-text{color:var(--accent-strong)!important;}
.sn-footer .elementor-widget-text-editor p{font-size:.8rem!important;color:var(--ink-faint)!important;}

@media (max-width:920px){
  .sn-nav-links{display:none;}
  .sn-nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
}
@media (max-width:600px){
  .sn-hero-name h1,.sn-hero-name h2{font-size:2.6rem!important;}
}
@media (prefers-reduced-motion: reduce){
  .sn-hero-chart path.sn-line,.sn-hero-chart path.sn-area,.sn-hero-chart circle.sn-pt{transition:none;stroke-dashoffset:0;opacity:1;}
  .sn-hero-chart circle.sn-pulse{animation:none;}
  .sn-hero-marquee ul{animation:none;}
  .sn-reveal{opacity:1;transform:none;transition:none;}
  .sn-portrait-frame{transform:none!important;}
}