/* Shahzeb Speaks v2: inner pages rebuilt in the front-page component language
   (About, Contact, Portfolio). Loaded after ss-home.css on those templates only.
   Hand-written; tokens come from ss-home.css / ss-v2.css. */

/* ---------- inner-page hero ---------- */
.sx-page .sx-phero{position:relative;overflow:hidden;padding:150px 0 0}
.sx-page .sx-phero .sx-wrap{position:relative;z-index:2}
.sx-page .sx-phero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.sx-page .sx-crumbs{display:flex;gap:10px;font:500 .78rem var(--font-mono,"JetBrains Mono");color:var(--on-ink-muted);margin-bottom:26px}
.sx-page .sx-crumbs a{color:var(--on-ink-muted);text-decoration:none}
.sx-page .sx-crumbs a:hover{color:var(--on-ink)}
.sx-page .sx-crumbs [aria-current]{color:var(--on-ink)}
.sx-page .sx-phero .sx-avail{margin-bottom:22px}
.sx-page .sx-ptitle{font-family:var(--font-display,"Newsreader");font-weight:500;font-size:clamp(3rem,7vw,6.2rem);line-height:.98;letter-spacing:-.02em;color:var(--on-ink);margin:0}
.sx-page .sx-ptitle-md{font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:1.02}
.sx-page .sx-ptitle em{font-style:italic;color:var(--psych-on-ink)}
.sx-page .sx-ptag{font:500 .95rem var(--font-body);color:var(--on-ink);margin:22px 0 0;letter-spacing:.01em}
.sx-page .sx-ptag span{color:var(--psych-on-ink);margin:0 6px}
.sx-page .sx-phero .sx-lead{margin:22px 0 30px}
.sx-page .sx-pstage{height:min(600px,68vh)}
.sx-page .sx-psocial{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:30px 0 0}
.sx-page .sx-psocial a{font:500 .82rem var(--font-mono,"JetBrains Mono");color:var(--on-ink-muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s}
.sx-page .sx-psocial a:hover{color:var(--on-ink);border-color:var(--psych-on-ink)}
.sx-page .sx-pfacts{display:flex;flex-wrap:wrap;gap:20px 48px;margin-top:64px;border-top:1px solid var(--ink-line);padding:24px 0 34px}
.sx-page .sx-pfacts>div{max-width:200px}
.sx-page .sx-pfacts b{display:block;font:600 2.1rem/1.1 var(--font-display,"Newsreader");color:var(--on-ink)}
.sx-page .sx-pfacts span{display:block;color:var(--on-ink-muted);font-size:.86rem;line-height:1.4;margin-top:4px}

/* duotone portrait (contact): calms a warm background into the palette */
.sx-page .sx-duotone img{filter:grayscale(1) contrast(1.06) brightness(.98)}
.sx-page .sx-duotone::before{content:"";position:absolute;inset:0;z-index:1;background:#6A2C7E;mix-blend-mode:color;opacity:.5;pointer-events:none}

/* ---------- about ---------- */
.sx-page .sx-duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sx-page .sx-duo-card{background:var(--raised);padding:40px 38px;position:relative}
.sx-page .sx-duo-card::before{content:"";position:absolute;left:38px;top:0;width:56px;height:3px;background:var(--accent)}
.sx-page .sx-duo-k{display:block;font:600 .76rem var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sx-page .sx-duo-card h3{font-size:clamp(1.5rem,2.2vw,1.9rem);margin:0 0 14px;line-height:1.15}
.sx-page .sx-duo-card p{color:var(--muted);margin:0 0 20px}
.sx-page .sx-duo-card strong{color:var(--text)}
.sx-page .sx-duo-card ul,.sx-page .sx-step ul{list-style:none;padding:0;margin:0}
.sx-page .sx-duo-card li,.sx-page .sx-step li{position:relative;padding:8px 0 8px 22px;border-top:1px solid var(--border);font-size:.94rem}
.sx-page .sx-duo-card li::before,.sx-page .sx-step li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:1.5px;background:var(--accent)}

.sx-page .sx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sx-page .sx-step{border-top:1px solid var(--text);padding-top:20px}
.sx-page .sx-step-n{display:block;font:500 2.6rem/1 var(--font-display,"Newsreader");color:var(--accent);margin-bottom:16px;font-style:italic}
.sx-page .sx-step h3{font-size:1.25rem;margin:0 0 10px}
.sx-page .sx-step p{color:var(--muted);font-size:.94rem;margin:0 0 16px}

.sx-page .sx-pquote{position:relative;overflow:hidden;padding:110px 0;text-align:center}
.sx-page .sx-pquote .sx-wrap{position:relative;z-index:2}
.sx-page .sx-quote{font:500 clamp(1.8rem,3.4vw,2.9rem)/1.2 var(--font-display,"Newsreader");color:var(--on-ink);margin:0 auto 34px;max-width:24ch;text-wrap:balance}
.sx-page .sx-quote em{color:var(--psych-on-ink)}
.sx-page .sx-pquote .sx-quote em:last-child{color:var(--dev-on-ink)}

.sx-page .sx-ent{padding:30px 28px}
.sx-page .sx-ent h3{font-size:1.45rem;margin:16px 0 10px}
.sx-page .sx-ent p{color:var(--muted);font-size:.95rem;margin:0 0 12px}
.sx-page .sx-ent .sx-mono{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:.78rem}
.sx-page .sx-ent-mid{background:var(--ink-band);border-color:var(--ink-band);color:var(--on-ink)}
.sx-page .sx-ent-mid p{color:var(--on-ink-muted)}
.sx-page .sx-ent-mid .sx-mono{border-color:var(--ink-line);color:var(--on-ink-muted)}
.sx-page .sx-ent-mid .sx-f-psych{background:#2A2033;color:var(--psych-on-ink)}
.sx-page .sx-what{margin-top:44px}
.sx-page .sx-what h3{font-size:1.3rem;margin:0 0 10px}
.sx-page .sx-what strong{color:var(--text)}

.sx-page .sx-skills{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border)}
.sx-page .sx-skill{padding:24px 22px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--raised);transition:background .2s}
.sx-page .sx-skill:hover{background:var(--surface)}
.sx-page .sx-skill b{display:flex;align-items:center;gap:10px;font:600 1.15rem var(--font-display,"Newsreader");margin-bottom:6px}
.sx-page .sx-skill b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sx-page .sx-skill span{color:var(--muted);font-size:.9rem;line-height:1.5}

.sx-page .sx-tl{list-style:none;padding:0;margin:0;position:relative}
.sx-page .sx-tl::before{content:"";position:absolute;left:120px;top:8px;bottom:8px;width:1px;background:var(--border)}
.sx-page .sx-tl li{display:grid;grid-template-columns:120px 1fr;gap:48px;padding:0 0 34px;position:relative}
.sx-page .sx-tl li::after{content:"";position:absolute;left:115px;top:10px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--accent)}
.sx-page .sx-tl li.sx-now::after{background:var(--accent);box-shadow:0 0 0 5px var(--accent-tint)}
.sx-page .sx-tl-y{font:500 1.6rem/1.1 var(--font-display,"Newsreader");color:var(--accent);font-style:italic}
.sx-page .sx-tl h3{font-size:1.25rem;margin:2px 0 6px}
.sx-page .sx-tl p{color:var(--muted);margin:0;max-width:62ch}

.sx-page .sx-mvv article{border-top:1px solid var(--text);padding-top:18px}
.sx-page .sx-mvv p{font:500 1.22rem/1.45 var(--font-display,"Newsreader");margin:12px 0 0}

.sx-page .sx-platforms{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.sx-page .sx-platforms li>*{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--raised);font:500 .95rem var(--font-body);color:var(--text);text-decoration:none;transition:border-color .15s,color .15s}
.sx-page .sx-platforms a:hover{border-color:var(--accent,var(--psych));color:var(--accent,var(--psych))}

/* ---------- contact ---------- */
.sx-page .sx-chan{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink-line);max-width:560px}
.sx-page .sx-chan a{display:grid;grid-template-columns:96px 1fr 18px;gap:14px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--ink-line);color:var(--on-ink);text-decoration:none;transition:padding .25s cubic-bezier(.22,.8,.24,1),background .2s}
.sx-page .sx-chan a:hover{padding-left:12px;background:#ffffff08}
.sx-page .sx-chan-k{font:500 .74rem var(--font-mono,"JetBrains Mono");letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-muted)}
.sx-page .sx-chan b{font:500 1.15rem var(--font-display,"Newsreader");overflow-wrap:anywhere}
.sx-page .sx-chan svg{width:16px;height:16px;color:var(--psych-on-ink);transition:transform .2s}
.sx-page .sx-chan a:hover svg{transform:translateX(3px)}
.sx-page .sx-phero:has(.sx-chan){padding-bottom:72px}

.sx-page .sx-alert{border-radius:8px;padding:14px 18px;margin:0 0 22px;font-size:.95rem;max-width:560px}
.sx-page .sx-alert b{margin-right:6px}
.sx-page .sx-alert-ok{background:#1E6E4526;border:1px solid #5BC08A66;color:#CFEEDC}
.sx-page .sx-alert-bad{background:#B3261E26;border:1px solid #F07A6E66;color:#F8D3CE}

.sx-page .sx-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.sx-page .sx-contact-side h2{font-size:var(--fs-h2);margin:10px 0 14px}
.sx-page .sx-next{list-style:none;counter-reset:nx;padding:0;margin:30px 0 8px}
.sx-page .sx-next li{counter-increment:nx;display:grid;grid-template-columns:44px 1fr;column-gap:12px;padding:16px 0;border-top:1px solid var(--border)}
.sx-page .sx-next li::before{content:counter(nx,decimal-leading-zero);grid-row:span 2;font:500 1.5rem/1 var(--font-display,"Newsreader");font-style:italic;color:var(--accent)}
.sx-page .sx-next b{font:600 1.05rem var(--font-body)}
.sx-page .sx-next span{color:var(--muted);font-size:.92rem}
.sx-page .sx-form-card{padding:40px}
.sx-page .sx-form-card h3{font-size:1.7rem;margin:0 0 6px}
.sx-page .sx-form{display:grid;gap:18px;margin-top:24px}
.sx-page .sx-form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sx-page .sx-form .sx-inp{background:var(--bg)}
.sx-page .sx-pills{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.sx-page .sx-pills legend{font-weight:500;font-size:.92rem;margin-bottom:8px;padding:0}
.sx-page .sx-pills label{position:relative;cursor:pointer}
.sx-page .sx-pills input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sx-page .sx-pills span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--border-strong);border-radius:999px;font:500 .92rem var(--font-body);color:var(--muted);transition:all .15s}
.sx-page .sx-pills input:checked+span{background:var(--text);border-color:var(--text);color:var(--bg)}
.sx-page .sx-pills input:focus-visible+span{outline:2px solid var(--dev);outline-offset:2px}
.sx-page .sx-btn-full{width:100%;justify-content:center;padding:15px 20px;font-size:1rem}
.sx-page .sx-form-note{color:var(--muted);font-size:.82rem;margin:0;text-align:center}

.sx-page .sx-office{overflow:hidden;padding:0}
.sx-page .sx-office-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:22px 24px}
.sx-page .sx-office-head h3{font-size:1.3rem;margin:0 0 4px}
.sx-page .sx-office-head p{margin:0;font-size:.92rem}
.sx-page .sx-office-head a{color:var(--muted);text-decoration:none}
.sx-page .sx-office-head a:hover{color:var(--text);text-decoration:underline}
.sx-page .sx-map{height:280px;border-top:1px solid var(--border);filter:grayscale(.85) contrast(.95)}
.sx-page .sx-map iframe{width:100%;height:100%;border:0;display:block}

.sx-page .sx-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.sx-page .sx-faq-grid h2{font-size:var(--fs-h2);margin:10px 0 12px}
.sx-page .sx-faq{border-top:1px solid var(--text)}
.sx-page .sx-faq details{border-bottom:1px solid var(--border)}
.sx-page .sx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:500 1.2rem var(--font-display,"Newsreader")}
.sx-page .sx-faq summary::-webkit-details-marker{display:none}
.sx-page .sx-faq summary::after{content:"+";font:400 1.4rem/1 var(--font-body);color:var(--muted);transition:transform .25s}
.sx-page .sx-faq details[open] summary::after{transform:rotate(45deg)}
.sx-page .sx-faq details p{color:var(--muted);margin:0 0 20px;max-width:62ch}

/* ---------- portfolio ---------- */
.sx-page .sx-collage{position:relative;height:min(520px,60vh)}
.sx-page .sx-collage .sx-frame{position:absolute;width:78%;box-shadow:0 30px 70px -30px #000;border-color:#ffffff1a;background:#1B1A22}
.sx-page .sx-collage .sx-frame .sx-bar{background:#1F1D27;border-color:#ffffff14}
.sx-page .sx-collage .sx-frame .sx-bar span{color:var(--on-ink-muted)}
.sx-page .sx-collage .sx-col-1{right:0;top:0;z-index:3}
.sx-page .sx-collage .sx-col-2{left:0;top:30%;z-index:2;opacity:.9}
.sx-page .sx-collage .sx-col-3{right:6%;bottom:0;z-index:1;opacity:.75}
.sx-js .sx-collage .sx-frame{opacity:0;translate:0 24px;transition:opacity .9s cubic-bezier(.22,.8,.24,1),translate .9s cubic-bezier(.22,.8,.24,1)}
.sx-js .sx-home.sx-loaded .sx-collage .sx-col-1{opacity:1;translate:0 0;transition-delay:.25s}
.sx-js .sx-home.sx-loaded .sx-collage .sx-col-2{opacity:.9;translate:0 0;transition-delay:.45s}
.sx-js .sx-home.sx-loaded .sx-collage .sx-col-3{opacity:.75;translate:0 0;transition-delay:.65s}
.sx-page .sx-frame .sx-cap small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.sx-page .sx-feature{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sx-page .sx-feature-main{grid-row:span 2}
.sx-page .sx-feature-main .sx-shot{aspect-ratio:auto;height:calc(100% - 96px);min-height:320px}
.sx-page .sx-filters{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px}
.sx-page .sx-filters .sx-chip{cursor:pointer;min-height:40px;font-size:.88rem}
.sx-page .sx-filters .sx-chip span{font:500 .72rem var(--font-mono,"JetBrains Mono");color:var(--muted);margin-left:2px}
.sx-page .sx-filters .sx-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.sx-page .sx-filters .sx-chip[aria-pressed="true"] span{color:var(--bg);opacity:.7}
.sx-page .sx-projects .sx-frame[hidden]{display:none}
.sx-page .sx-more-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:34px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sx-page .sx-steps,.sx-page .sx-skills{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .sx-page .sx-phero{padding-top:120px}
  .sx-page .sx-phero-grid,.sx-page .sx-duo,.sx-page .sx-contact-grid,.sx-page .sx-faq-grid,.sx-page .sx-feature{grid-template-columns:1fr}
  .sx-page .sx-pstage{height:460px}
  .sx-page .sx-collage{height:340px}
  .sx-page .sx-feature-main{grid-row:auto}
  .sx-page .sx-feature-main .sx-shot{height:auto;aspect-ratio:16/9;min-height:0}
  .sx-page .sx-pfacts{margin-top:40px}
  .sx-page .sx-contact-grid,.sx-page .sx-faq-grid{gap:36px}
}
@media (max-width:600px){
  .sx-page .sx-steps,.sx-page .sx-skills,.sx-page .sx-form-row{grid-template-columns:1fr}
  .sx-page .sx-duo-card,.sx-page .sx-form-card{padding:28px 22px}
  .sx-page .sx-duo-card::before{left:22px}
  .sx-page .sx-tl::before{left:7px}
  .sx-page .sx-tl li{grid-template-columns:1fr;gap:4px;padding-left:32px}
  .sx-page .sx-tl li::after{left:2px}
  .sx-page .sx-chan a{grid-template-columns:1fr 18px}
  .sx-page .sx-chan-k{grid-column:1/-1}
  .sx-page .sx-pfacts{gap:18px 28px}
  .sx-page .sx-pfacts b{font-size:1.7rem}
}
@media (prefers-reduced-motion:reduce){
  .sx-js .sx-collage .sx-frame{opacity:1!important;translate:none!important}
}