/* ==========================================================================
   Stoxar Starter — design tokens
   Every colour, font and radius in the theme resolves from this block.
   Change a value here and it propagates everywhere, including the editor
   (mirror any colour change in theme.json so Gutenberg matches).
   ========================================================================== */
:root{
  /* Brand */
  --stx-brand:#4F46E5;
  --stx-brand-dark:#4338CA;
  --stx-brand-soft:#EEF0FE;

  /* Neutrals */
  --stx-bg:#F4F5F7;
  --stx-surface:#FFFFFF;
  --stx-ink:#0D0F14;
  --stx-body:#4B5162;
  --stx-muted:#8A90A0;
  --stx-line:#E3E5EA;
  --stx-line-soft:#EDEEF2;

  /* Status */
  --stx-green:#16A34A;
  --stx-green-dot:#22C55E;
  --stx-dot-red:#FF5F57;
  --stx-dot-amber:#FEBC2E;
  --stx-dot-green:#28C840;

  /* Type */
  --stx-font-display:"Space Grotesk","Archivo","Inter",system-ui,sans-serif;
  --stx-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --stx-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Shape */
  --stx-radius:10px;
  --stx-radius-sm:6px;
  --stx-radius-pill:999px;
  --stx-container:1180px;
  --stx-gutter:28px;
  --stx-shadow:0 1px 2px rgba(13,15,20,.04),0 8px 24px rgba(13,15,20,.05);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;background:var(--stx-bg);color:var(--stx-body);
  font-family:var(--stx-font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{font-family:var(--stx-font-display);color:var(--stx-ink);margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:700}
p{margin:0}
a{color:var(--stx-brand);text-decoration:none}
a:hover{color:var(--stx-brand-dark)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--stx-brand);outline-offset:3px;border-radius:2px}
.stx-container{max-width:var(--stx-container);margin:0 auto;padding:0 var(--stx-gutter)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Eyebrow — the "// SELECTED WORK" label */
.stx-eyebrow{
  font-family:var(--stx-font-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stx-brand);display:block;margin-bottom:18px;
}
.stx-eyebrow::before{content:"// ";opacity:.65}

/* Buttons */
.stx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--stx-font-mono);font-size:14px;font-weight:500;
  padding:14px 24px;border-radius:var(--stx-radius-sm);border:1px solid var(--stx-brand);
  background:var(--stx-brand);color:#fff;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.stx-btn:hover{background:var(--stx-brand-dark);border-color:var(--stx-brand-dark);color:#fff;transform:translateY(-1px)}
.stx-btn--ghost{background:var(--stx-surface);color:var(--stx-ink);border-color:var(--stx-line)}
.stx-btn--ghost:hover{background:var(--stx-surface);color:var(--stx-brand);border-color:var(--stx-brand)}
.stx-btn--sm{padding:10px 18px;font-size:13px}

/* ==========================================================================
   Header
   ========================================================================== */
.stx-header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--stx-line);
}
.stx-header__in{display:flex;align-items:center;gap:36px;min-height:74px}
.stx-brand{display:flex;align-items:center;gap:12px;color:var(--stx-ink)}
.stx-brand__mark{
  width:38px;height:38px;border-radius:9px;background:var(--stx-brand);color:#fff;
  display:grid;place-items:center;font-family:var(--stx-font-display);font-weight:700;font-size:14px;letter-spacing:.02em;flex:0 0 auto;
}
.stx-brand__mark img{width:100%;height:100%;object-fit:cover;border-radius:9px}
.stx-brand__site{font-family:var(--stx-font-mono);font-size:11.5px;color:var(--stx-muted);line-height:1.2;display:block}
.stx-brand__name{font-family:var(--stx-font-display);font-weight:700;font-size:16.5px;color:var(--stx-ink);line-height:1.25;display:block}

.stx-nav{margin-left:auto}
.stx-nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.stx-nav a{font-size:15px;color:var(--stx-body);padding:6px 0;border-bottom:1.5px solid transparent}
.stx-nav a:hover,.stx-nav .current-menu-item > a{color:var(--stx-ink);border-bottom-color:var(--stx-brand)}
.stx-header .stx-btn{margin-left:4px}

.stx-burger{display:none;width:42px;height:38px;border:1px solid var(--stx-line);border-radius:var(--stx-radius-sm);background:var(--stx-surface);cursor:pointer;padding:0;margin-left:auto}
.stx-burger span{display:block;width:18px;height:1.6px;background:var(--stx-ink);margin:3.5px auto;transition:transform .2s,opacity .2s}
.stx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.stx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.stx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ==========================================================================
   Hero
   ========================================================================== */
.stx-hero{padding:86px 0 74px}
.stx-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.stx-hero__title{font-size:clamp(2.75rem,6vw,4.5rem);letter-spacing:-.035em;margin-bottom:22px}
.stx-hero__lead{
  font-family:var(--stx-font-display);font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.45;color:var(--stx-ink);
  letter-spacing:-.01em;max-width:20em;
}
.stx-hero__lead a,.stx-hero__lead strong{color:var(--stx-brand);font-weight:500;text-decoration:underline;text-decoration-color:rgba(79,70,229,.28);text-underline-offset:4px}
.stx-hero__lead a:hover{text-decoration-color:var(--stx-brand)}
.stx-hero__text{margin-top:26px;max-width:34em;color:var(--stx-body)}
.stx-hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.stx-hero__status{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-top:34px;font-family:var(--stx-font-mono);font-size:13px;color:var(--stx-body)}
.stx-hero__status span{display:inline-flex;align-items:center;gap:9px}
.stx-dot{width:9px;height:9px;border-radius:50%;background:var(--stx-green-dot);box-shadow:0 0 0 3px rgba(34,197,94,.18);flex:0 0 auto}
.stx-hero__status .stx-pin{color:var(--stx-brand)}

/* Terminal card */
.stx-term{background:var(--stx-surface);border:1px solid var(--stx-line);border-radius:12px;box-shadow:var(--stx-shadow);overflow:hidden}
.stx-term__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--stx-line-soft)}
.stx-term__bar i{width:11px;height:11px;border-radius:50%;display:block}
.stx-term__bar i:nth-child(1){background:var(--stx-dot-red)}
.stx-term__bar i:nth-child(2){background:var(--stx-dot-amber)}
.stx-term__bar i:nth-child(3){background:var(--stx-dot-green)}
.stx-term__title{font-family:var(--stx-font-mono);font-size:12.5px;color:var(--stx-muted);margin-left:10px}
.stx-term__body{padding:20px 22px 24px;font-family:var(--stx-font-mono);font-size:13px;line-height:2.05;color:var(--stx-body)}
.stx-term__body .l{opacity:0;transform:translateY(2px);transition:opacity .25s ease,transform .25s ease}
.stx-term__body .l.in{opacity:1;transform:none}
.stx-term__prompt{color:var(--stx-brand)}
.stx-term__cmd{color:var(--stx-ink);font-weight:500}
.stx-term__out{color:var(--stx-body)}
.stx-term__out::before{content:"→ ";color:var(--stx-muted)}
.stx-term__hl{color:var(--stx-brand)}
.stx-term__ok{color:var(--stx-green)}
.stx-term__cursor{display:inline-block;width:7px;height:14px;background:var(--stx-brand);vertical-align:-2px;animation:stxBlink 1s steps(2) infinite}
@keyframes stxBlink{50%{opacity:0}}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stx-stats{background:var(--stx-surface);border-top:1px solid var(--stx-line);border-bottom:1px solid var(--stx-line)}
.stx-stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stx-stat{padding:46px 22px;text-align:center;border-right:1px solid var(--stx-line-soft)}
.stx-stat:last-child{border-right:0}
.stx-stat b{display:block;font-family:var(--stx-font-display);font-weight:700;font-size:clamp(2rem,3.6vw,2.85rem);color:var(--stx-brand);letter-spacing:-.03em;line-height:1}
.stx-stat span{display:block;margin-top:12px;font-family:var(--stx-font-mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--stx-muted)}

/* ==========================================================================
   Sections
   ========================================================================== */
.stx-section{padding:92px 0}
.stx-section--tint{background:var(--stx-surface);border-top:1px solid var(--stx-line);border-bottom:1px solid var(--stx-line)}
.stx-section__head{max-width:36em;margin-bottom:46px}
.stx-section__title{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.stx-section__sub{margin-top:16px;color:var(--stx-body)}

/* Work cards */
.stx-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.stx-card{
  background:var(--stx-surface);border:1px solid var(--stx-line);border-radius:var(--stx-radius);
  padding:26px;display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.stx-card:hover{border-color:var(--stx-brand);transform:translateY(-2px);box-shadow:var(--stx-shadow)}
.stx-card__thumb{margin:-26px -26px 22px;border-bottom:1px solid var(--stx-line-soft);border-radius:var(--stx-radius) var(--stx-radius) 0 0;overflow:hidden;aspect-ratio:16/9;background:var(--stx-brand-soft)}
.stx-card__thumb img{width:100%;height:100%;object-fit:cover}
.stx-card__kicker{font-family:var(--stx-font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stx-muted);margin-bottom:10px}
.stx-card__title{font-size:20px;margin-bottom:10px}
.stx-card__title a{color:var(--stx-ink)}
.stx-card:hover .stx-card__title a{color:var(--stx-brand)}
.stx-card__text{font-size:15.5px;color:var(--stx-body);flex:1}
.stx-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.stx-tag{
  font-family:var(--stx-font-mono);font-size:11.5px;color:var(--stx-brand);
  background:var(--stx-brand-soft);border-radius:var(--stx-radius-pill);padding:5px 11px;
}
.stx-card__link{margin-top:18px;font-family:var(--stx-font-mono);font-size:13px}

/* Experience timeline */
.stx-exp{border-top:1px solid var(--stx-line)}
.stx-exp__item{display:grid;grid-template-columns:190px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--stx-line)}
.stx-exp__when{font-family:var(--stx-font-mono);font-size:13px;color:var(--stx-muted)}
.stx-exp__role{font-family:var(--stx-font-display);font-weight:700;font-size:20px;color:var(--stx-ink)}
.stx-exp__co{color:var(--stx-brand);font-size:15px;margin-top:3px}
.stx-exp__text{margin-top:10px;font-size:15.5px;max-width:62ch}

/* Skills columns */
.stx-skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.stx-skills__col{background:var(--stx-surface);border:1px solid var(--stx-line);border-radius:var(--stx-radius);padding:24px}
.stx-skills__col h3{font-size:16px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--stx-line-soft)}
.stx-skills__col ul{list-style:none;margin:0;padding:0;font-family:var(--stx-font-mono);font-size:13px;color:var(--stx-body)}
.stx-skills__col li{padding:7px 0}
.stx-skills__col li::before{content:"▸ ";color:var(--stx-brand)}

/* Posts */
.stx-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.stx-post__date{font-family:var(--stx-font-mono);font-size:12px;color:var(--stx-muted);margin-bottom:10px}

/* Contact */
.stx-contact{text-align:center;padding:104px 0}
.stx-contact__title{font-size:clamp(2rem,4vw,3rem);max-width:16ch;margin:0 auto}
.stx-contact__text{max-width:46ch;margin:20px auto 0}
.stx-contact__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.stx-contact__meta{margin-top:30px;font-family:var(--stx-font-mono);font-size:13px;color:var(--stx-muted)}
.stx-contact__meta a{color:var(--stx-brand)}

/* ==========================================================================
   Content pages, posts, comments
   ========================================================================== */
.stx-page{padding:70px 0 90px}
.stx-entry{background:var(--stx-surface);border:1px solid var(--stx-line);border-radius:var(--stx-radius);padding:44px}
.stx-entry__title{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:14px}
.stx-entry__meta{font-family:var(--stx-font-mono);font-size:12.5px;color:var(--stx-muted);margin-bottom:30px}
.stx-entry__content > * + *{margin-top:20px}
.stx-entry__content h2{font-size:26px;margin-top:36px}
.stx-entry__content h3{font-size:20px;margin-top:28px}
.stx-entry__content ul,.stx-entry__content ol{padding-left:22px}
.stx-entry__content li{margin:6px 0}
.stx-entry__content blockquote{border-left:2px solid var(--stx-brand);padding-left:20px;color:var(--stx-ink);font-style:normal}
.stx-entry__content code{font-family:var(--stx-font-mono);font-size:13.5px;background:var(--stx-brand-soft);color:var(--stx-brand-dark);padding:2px 6px;border-radius:4px}
.stx-entry__content pre{background:var(--stx-ink);color:#E6E8EF;padding:20px;border-radius:var(--stx-radius-sm);overflow:auto;font-family:var(--stx-font-mono);font-size:13.5px;line-height:1.8}
.stx-entry__content pre code{background:none;color:inherit;padding:0}
.stx-entry__content img{border-radius:var(--stx-radius-sm)}

.stx-pagination{display:flex;gap:10px;margin-top:36px;font-family:var(--stx-font-mono);font-size:13px;flex-wrap:wrap}
.stx-pagination .page-numbers{padding:8px 14px;border:1px solid var(--stx-line);border-radius:var(--stx-radius-sm);background:var(--stx-surface);color:var(--stx-body)}
.stx-pagination .page-numbers.current,.stx-pagination .page-numbers:hover{background:var(--stx-brand);border-color:var(--stx-brand);color:#fff}

/* ==========================================================================
   Footer
   ========================================================================== */
.stx-footer{border-top:1px solid var(--stx-line);background:var(--stx-surface);padding:34px 0 44px}
.stx-footer__in{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-family:var(--stx-font-mono);font-size:13px;color:var(--stx-muted)}
.stx-footer__in nav{display:flex;gap:18px;flex-wrap:wrap}
.stx-footer__in .stx-copy{margin-left:auto}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px){
  .stx-hero__grid{grid-template-columns:1fr;gap:44px}
  .stx-stats__grid{grid-template-columns:1fr 1fr}
  .stx-stat:nth-child(2){border-right:0}
  .stx-stat:nth-child(1),.stx-stat:nth-child(2){border-bottom:1px solid var(--stx-line-soft)}
  .stx-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--stx-surface);
    border-bottom:1px solid var(--stx-line);padding:10px 0 18px;display:none;
  }
  .stx-nav.is-open{display:block}
  .stx-nav ul{flex-direction:column;gap:0;padding:0 var(--stx-gutter)}
  .stx-nav li{border-bottom:1px solid var(--stx-line-soft)}
  .stx-nav a{display:block;padding:14px 0;border-bottom:0}
  .stx-burger{display:block}
  .stx-header .stx-btn{display:none}
  .stx-header__in{position:relative}
}
@media (max-width:700px){
  body{font-size:16px}
  :root{--stx-gutter:20px}
  .stx-hero{padding:62px 0 54px}
  .stx-section{padding:64px 0}
  .stx-exp__item{grid-template-columns:1fr;gap:8px}
  .stx-entry{padding:26px}
  .stx-contact{padding:74px 0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .stx-term__body .l{opacity:1;transform:none}
}