/*
Theme Name: wp-dev-theme
Theme URI: https://github.com/therealkiranda/wp-dev-theme
Author: Kiran Khadka
Author URI: https://khadkakiran.com.np/
Description: A production-grade editorial personal portfolio theme for Kiran Khadka — full-stack developer. Lightweight, responsive, accessible, SEO-focused, GitHub-updatable and free of page builders.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: wp-dev-theme
Update URI: https://github.com/therealkiranda/wp-dev-theme
*/

:root {
  --ink: #10110f;
  --ink-soft: #1a1c18;
  --cream: #f2eee6;
  --cream-2: #e8e2d8;
  --paper: #faf8f3;
  --bronze: #a87952;
  --bronze-light: #c7a98d;
  --sage: #526257;
  --line: rgba(16,17,15,.15);
  --line-light: rgba(242,238,230,.16);
  --max: 1380px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
button, input, textarea { font:inherit; }
::selection { background:var(--bronze); color:#fff; }

.site-shell { overflow:clip; }
.container { width:min(calc(100% - 64px), var(--max)); margin-inline:auto; }
.narrow { width:min(calc(100% - 64px), 980px); margin-inline:auto; }

/* Header */
.site-header { position:fixed; inset:0 0 auto; z-index:100; color:var(--cream); mix-blend-mode:normal; transition:background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease; }
.site-header.is-scrolled { background:rgba(16,17,15,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-light); }
.header-inner { height:82px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { width:34px; height:34px; border:1px solid currentColor; display:grid; place-items:center; font-family:var(--mono); font-size:11px; position:relative; }
.brand-mark::after { content:''; position:absolute; width:6px; height:6px; background:var(--bronze); right:-3px; bottom:-3px; }
.brand-name { font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.main-nav { display:flex; gap:30px; align-items:center; }
.main-nav a { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.78; position:relative; }
.main-nav a::after { content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--bronze-light); transition:width .3s ease; }
.main-nav a:hover::after { width:100%; }
.nav-cta { border:1px solid rgba(242,238,230,.45); padding:10px 14px; }
.menu-toggle { display:none; background:none; color:inherit; border:0; width:44px; height:44px; }

/* Hero */
.hero { min-height:100svh; background:var(--ink); color:var(--cream); display:flex; align-items:flex-end; position:relative; isolation:isolate; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 42%, rgba(167,121,82,.15), transparent 28%), linear-gradient(90deg, transparent 0 66%, rgba(242,238,230,.025) 66% 66.1%, transparent 66.1%); pointer-events:none; z-index:-1; }
.hero-grid { min-height:100svh; width:min(calc(100% - 64px), var(--max)); margin:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; padding:150px 0 68px; }
.eyebrow { font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--bronze-light); }
.hero-kicker { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.hero-kicker::before { content:''; width:44px; height:1px; background:var(--bronze); }
.hero h1 { margin:0; font-size:clamp(70px, 11.2vw, 178px); line-height:.78; letter-spacing:-.085em; font-weight:800; text-transform:uppercase; max-width:950px; }
.hero h1 span { display:block; }
.hero h1 .outline { color:transparent; -webkit-text-stroke:1px rgba(242,238,230,.58); }
.hero-bottom { margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:820px; }
.hero-intro { font-size:18px; max-width:520px; color:rgba(242,238,230,.74); }
.hero-meta { display:grid; gap:8px; align-content:end; }
.meta-row { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line-light); padding-top:9px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.meta-row span:last-child { color:var(--bronze-light); }
.hero-portrait-wrap { position:relative; width:min(100%, 500px); justify-self:end; margin-bottom:6vh; }
.hero-portrait { position:relative; aspect-ratio:4/5; overflow:hidden; background:#24231f; }
.hero-portrait::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 45%, rgba(16,17,15,.52)); }
.hero-portrait img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05); transform:scale(1.015); }
.hero-portrait-wrap::before { content:''; position:absolute; inset:20px -20px -20px 20px; border:1px solid var(--bronze); z-index:-1; }
.portrait-caption { position:absolute; left:20px; bottom:18px; z-index:2; font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:#fff; }
.scroll-cue { position:absolute; right:32px; bottom:34px; writing-mode:vertical-rl; font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; }

/* General */
.section { padding:150px 0; }
.section-dark { background:var(--ink); color:var(--cream); }
.section-sage { background:var(--sage); color:var(--cream); }
.section-head { display:grid; grid-template-columns:170px 1fr; gap:50px; margin-bottom:82px; }
.section-num { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.58; padding-top:10px; }
.section-title { margin:0; font-size:clamp(48px, 7vw, 100px); line-height:.9; letter-spacing:-.065em; text-transform:uppercase; font-weight:800; }
.section-title em { font-family:var(--serif); text-transform:none; font-weight:400; letter-spacing:-.05em; }
.lede { font-size:clamp(22px, 2.3vw, 32px); line-height:1.25; max-width:880px; margin:0; letter-spacing:-.025em; }
.rule { height:1px; background:var(--line); }
.dark-rule { background:var(--line-light); }

/* Manifesto */
.manifesto { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:end; }
.manifesto-big { font-size:clamp(50px, 7.2vw, 108px); line-height:.9; letter-spacing:-.075em; margin:0; text-transform:uppercase; }
.manifesto-big span { color:var(--bronze); }
.manifesto-copy { max-width:510px; font-size:18px; color:rgba(242,238,230,.7); }
.manifesto-copy p:first-child { margin-top:0; }
.tech-line { margin-top:48px; display:flex; flex-wrap:wrap; gap:9px; }
.tech-line span { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--line-light); padding:9px 11px; }

/* Work */
.work-list { border-top:1px solid var(--line-light); }
.work-item { display:grid; grid-template-columns:90px 1fr 260px 170px; gap:30px; align-items:center; padding:32px 0; border-bottom:1px solid var(--line-light); transition:padding .35s ease, background .35s ease; }
.work-item:hover { padding-inline:18px; background:rgba(242,238,230,.035); }
.work-index { font-family:var(--mono); color:var(--bronze-light); font-size:11px; }
.work-name { font-size:clamp(28px, 3vw, 46px); letter-spacing:-.05em; line-height:1; }
.work-stack { font-family:var(--mono); font-size:9px; line-height:1.7; text-transform:uppercase; letter-spacing:.1em; opacity:.62; }
.work-link { justify-self:end; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid var(--bronze); padding-bottom:4px; }
.work-empty { padding:50px 0; border-bottom:1px solid var(--line-light); display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.work-empty p { margin:0; max-width:700px; color:rgba(242,238,230,.66); }

/* Experience */
.experience-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.experience-main { font-size:clamp(54px, 7vw, 106px); line-height:.88; letter-spacing:-.075em; text-transform:uppercase; margin:0; }
.experience-card { border-top:1px solid var(--line-light); padding-top:24px; }
.experience-year { font-family:var(--mono); color:var(--bronze-light); font-size:11px; letter-spacing:.12em; }
.experience-role { font-size:32px; letter-spacing:-.04em; margin:18px 0 6px; }
.experience-company { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; opacity:.65; }
.experience-copy { color:rgba(242,238,230,.66); max-width:590px; }

/* Capabilities */
.cap-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cap { min-height:340px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; transition:transform .35s ease, background .35s ease; }
.cap:hover { transform:translateY(-5px); background:rgba(16,17,15,.035); }
.cap-num { font-family:var(--mono); font-size:10px; opacity:.55; }
.cap h3 { font-size:36px; line-height:1; letter-spacing:-.055em; margin:72px 0 16px; }
.cap p { color:rgba(16,17,15,.65); max-width:360px; margin:0; }
.cap .cap-tags { position:absolute; left:34px; bottom:30px; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:.55; }

/* Blog */
.blog-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1px; background:var(--line-light); }
.post-card { background:var(--ink); min-height:370px; padding:30px; display:flex; flex-direction:column; transition:background .35s ease; }
.post-card:hover { background:#181916; }
.post-date { font-family:var(--mono); font-size:9px; color:var(--bronze-light); letter-spacing:.1em; text-transform:uppercase; }
.post-card h3 { font-size:clamp(25px, 2.6vw, 40px); line-height:1.02; letter-spacing:-.05em; margin:auto 0 16px; }
.post-card p { margin:0; color:rgba(242,238,230,.58); font-size:14px; }
.blog-empty { border:1px solid var(--line-light); padding:48px; color:rgba(242,238,230,.66); }

/* Contact */
.contact { background:var(--bronze); color:#17120e; }
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:end; }
.contact-title { margin:0; font-size:clamp(62px, 10vw, 150px); line-height:.78; letter-spacing:-.085em; text-transform:uppercase; }
.contact-title em { font-family:var(--serif); text-transform:none; font-weight:400; }
.contact-copy { font-size:18px; max-width:500px; }
.contact-email { display:inline-block; font-size:clamp(24px, 3vw, 42px); letter-spacing:-.045em; border-bottom:2px solid currentColor; margin-top:30px; word-break:break-word; }
.contact-meta { margin-top:70px; display:grid; gap:12px; }
.contact-meta a { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

/* Buttons */
.text-link { display:inline-flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.text-link::after { content:'↗'; font-size:15px; transition:transform .25s ease; }
.text-link:hover::after { transform:translate(3px,-3px); }

/* Single / archive */
.page-hero { background:var(--ink); color:var(--cream); padding:190px 0 90px; }
.page-hero h1 { font-size:clamp(54px, 8vw, 120px); line-height:.86; letter-spacing:-.075em; text-transform:uppercase; margin:30px 0 0; max-width:1000px; }
.article { padding:100px 0 140px; }
.article-grid { display:grid; grid-template-columns:190px minmax(0, 820px); gap:70px; }
.article-meta { font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.article-content { font-size:19px; }
.article-content > * { max-width:820px; }
.article-content h2 { font-size:42px; line-height:1; letter-spacing:-.05em; margin-top:70px; }
.article-content h3 { font-size:30px; line-height:1.1; letter-spacing:-.04em; margin-top:50px; }
.article-content img { margin:35px 0; }
.article-content blockquote { border-left:2px solid var(--bronze); margin:40px 0; padding:10px 30px; font-family:var(--serif); font-size:30px; line-height:1.25; }

/* Footer */
.site-footer { background:var(--ink); color:var(--cream); padding:38px 0 28px; border-top:1px solid var(--line-light); }
.footer-grid { display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:end; }
.footer-brand { font-size:25px; font-weight:800; letter-spacing:-.05em; }
.footer-small { font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; opacity:.5; }
.footer-links { display:flex; gap:20px; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }

/* Forms */
label { display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
input, textarea { width:100%; border:1px solid var(--line); background:transparent; padding:14px 15px; color:inherit; outline:0; }
textarea { min-height:160px; resize:vertical; }
input:focus, textarea:focus { border-color:var(--bronze); }

/* Accessibility / motion */
.skip-link { position:absolute; left:10px; top:10px; z-index:1000; background:var(--cream); color:var(--ink); padding:10px 14px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; } .delay-2 { transition-delay:.16s; } .delay-3 { transition-delay:.24s; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important;} .reveal{opacity:1;transform:none;} }

/* Responsive */
@media (max-width:1050px){
  .hero-grid{grid-template-columns:1fr .78fr; gap:35px;}
  .hero h1{font-size:clamp(64px, 11vw, 120px);}
  .work-item{grid-template-columns:60px 1fr 190px 100px;}
  .cap-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .container,.narrow,.hero-grid{width:min(calc(100% - 36px), var(--max));}
  .header-inner{height:70px;}
  .main-nav{display:none; position:fixed; inset:70px 0 0; background:var(--ink); flex-direction:column; align-items:flex-start; padding:45px 28px; gap:25px; border-top:1px solid var(--line-light);}
  .main-nav.is-open{display:flex;}
  .main-nav a{font-size:13px;}
  .menu-toggle{display:block;}
  .hero-grid{grid-template-columns:1fr; padding:125px 0 55px; min-height:auto;}
  .hero{min-height:auto;}
  .hero h1{font-size:clamp(64px, 19vw, 120px);}
  .hero-bottom{grid-template-columns:1fr; gap:24px; margin-top:36px;}
  .hero-portrait-wrap{width:82%; justify-self:start; margin-top:35px; margin-bottom:15px;}
  .scroll-cue{display:none;}
  .section{padding:90px 0;}
  .section-head{grid-template-columns:1fr; gap:18px; margin-bottom:55px;}
  .manifesto,.experience-grid,.contact-grid{grid-template-columns:1fr; gap:45px;}
  .work-item{grid-template-columns:38px 1fr; gap:12px; padding:25px 0;}
  .work-stack{grid-column:2;}
  .work-link{grid-column:2; justify-self:start; margin-top:4px;}
  .work-empty{grid-template-columns:1fr;}
  .cap-grid{grid-template-columns:1fr;}
  .cap{min-height:300px;}
  .blog-grid{grid-template-columns:1fr;}
  .post-card{min-height:300px;}
  .article{padding:70px 0 100px;}
  .article-grid{grid-template-columns:1fr; gap:30px;}
  .footer-grid{grid-template-columns:1fr; gap:18px; align-items:start;}
  .footer-links{flex-wrap:wrap;}
}


/* ===== v2.1 mobile navigation + page system ===== */
html,body{max-width:100%;overflow-x:hidden}
body.menu-open{overflow:hidden;touch-action:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:190}
.nav-backdrop.is-visible{opacity:1;visibility:visible}
.main-nav{position:fixed;z-index:200;top:0;right:0;bottom:0;width:min(88vw,430px);height:100svh;background:#11120f;color:var(--cream);display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.75,.2,1),visibility 0s linear .5s;box-shadow:-24px 0 70px rgba(0,0,0,.25);padding:0 28px;overflow-y:auto;overscroll-behavior:contain}
.main-nav.is-open{transform:translateX(0);visibility:visible;transition:transform .5s cubic-bezier(.2,.75,.2,1),visibility 0s}
.nav-drawer-head{min-height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-light);flex:0 0 auto}
.nav-label,.nav-drawer-foot{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--bronze-light)}
.nav-close{border:1px solid var(--line-light);background:transparent;color:var(--cream);width:42px;height:42px;font-size:28px;line-height:1;cursor:pointer}
.nav-drawer-links{display:flex;flex-direction:column;align-items:stretch;padding:35px 0;flex:1}
.nav-drawer-links a{display:block;font-size:clamp(28px,7vw,46px);line-height:1;padding:17px 0;border-bottom:1px solid rgba(242,238,230,.09);letter-spacing:-.045em;text-transform:uppercase}
.nav-drawer-links a:hover{color:var(--bronze-light);padding-left:8px}
.nav-drawer-foot{border-top:1px solid var(--line-light);padding:22px 0 28px;display:flex;justify-content:space-between;gap:15px;flex:0 0 auto}
.nav-drawer-foot a{color:var(--cream)}
.menu-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:205}
.menu-icon{width:22px;height:16px;position:relative;display:block}
.menu-icon i{position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:transform .3s ease,top .3s ease}
.menu-icon i:first-child{top:4px}.menu-icon i:last-child{top:12px}
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child{top:8px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child{top:8px;transform:rotate(-45deg)}

/* Prevent long editorial words from creating horizontal overflow. */
.hero,.section,.page-hero,.article,.site-footer{overflow:clip}
.hero h1,.section-title,.manifesto-big,.experience-main,.contact-title,.page-hero h1{overflow-wrap:anywhere}
.profile-intro{display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:70px;align-items:start;margin-bottom:130px}
.page-portrait{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.75) contrast(1.05)}
.article-lede{font-size:clamp(26px,3.2vw,46px);line-height:1.12;letter-spacing:-.04em;margin:0 0 35px}
.detail-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:70px;border-top:1px solid var(--line);padding-top:55px}
.detail-grid h2,.timeline-item h2,.expertise-row h2,.resume-block h2,.blog-list-item h2{font-size:clamp(38px,5vw,70px);line-height:.95;letter-spacing:-.06em;margin:0 0 20px}
.timeline-item,.expertise-row,.resume-block,.blog-list-item{display:grid;grid-template-columns:190px minmax(0,1fr);gap:70px;padding:55px 0;border-top:1px solid var(--line)}
.timeline-item p,.expertise-row p,.resume-block p,.blog-list-item p{max-width:760px;color:rgba(16,17,15,.68);font-size:18px}
.timeline-year,.expertise-stack{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--bronze)}
.timeline-company{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.62}
.placeholder-note{margin-top:45px;border:1px dashed rgba(16,17,15,.25);padding:28px;background:rgba(16,17,15,.025)}
.placeholder-note span{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--bronze)}
.placeholder-note p{margin:12px 0 0;color:rgba(16,17,15,.58)}
.resume-tags{display:flex;flex-wrap:wrap;gap:8px}.resume-tags span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);padding:10px 12px}
.contact-page-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:100px;align-items:start}
.contact-card{border-top:1px solid var(--line);padding-top:25px;display:grid;gap:18px}.contact-card .eyebrow{margin-bottom:18px}.contact-card a{font-size:24px;letter-spacing:-.03em}

@media (max-width:760px){
  .container,.narrow,.hero-grid{width:min(calc(100% - 32px),var(--max))}
  .header-inner{height:68px}
  .brand-name{display:none}
  .brand-mark{width:38px;height:38px;font-size:12px}
  .main-nav{width:min(92vw,430px);padding-left:22px;padding-right:22px}
  .nav-drawer-head{min-height:68px}
  .nav-drawer-links{padding:22px 0}
  .nav-drawer-links a{font-size:32px;padding:14px 0}
  .hero-grid{grid-template-columns:1fr;gap:0;padding:105px 0 55px;min-height:auto}
  .hero h1{font-size:clamp(60px,18.5vw,110px);line-height:.8;max-width:100%;word-break:normal}
  .hero-kicker{font-size:9px;letter-spacing:.12em;gap:8px;white-space:nowrap}
  .hero-kicker::before{width:28px}
  .hero-bottom{grid-template-columns:1fr;gap:25px;margin-top:34px}
  .hero-intro{font-size:16px;line-height:1.45}
  .hero-meta{gap:0}.meta-row{padding:11px 0;font-size:9px}
  .hero-portrait-wrap{width:calc(100% - 18px);max-width:390px;justify-self:start;margin-top:46px;margin-bottom:8px}
  .hero-portrait-wrap::before{inset:14px -12px -12px 12px}
  .portrait-caption{left:13px;bottom:13px;font-size:8px}
  .section{padding:88px 0}.section-head{grid-template-columns:1fr;gap:15px;margin-bottom:50px}
  .section-num{font-size:9px}.section-title{font-size:clamp(44px,14vw,72px)}
  .manifesto,.experience-grid,.contact-grid,.contact-page-grid,.profile-intro,.detail-grid,.timeline-item,.expertise-row,.resume-block,.blog-list-item{grid-template-columns:1fr;gap:28px}
  .manifesto-big,.experience-main{font-size:clamp(48px,15vw,80px)}
  .profile-intro{margin-bottom:85px}.profile-intro>div:first-child{max-width:300px}.article-lede{font-size:27px}
  .detail-grid{padding-top:35px}.detail-grid h2,.timeline-item h2,.expertise-row h2,.resume-block h2,.blog-list-item h2{font-size:42px}
  .timeline-item,.expertise-row,.resume-block,.blog-list-item{padding:38px 0}
  .work-item{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:23px 0}
  .work-name{font-size:30px;overflow-wrap:anywhere}.work-stack{grid-column:2;overflow-wrap:anywhere}.work-link{grid-column:2}
  .work-empty{grid-template-columns:1fr;gap:25px;padding:35px 0}.cap-grid{grid-template-columns:1fr}.cap{min-height:280px;padding:28px}.cap h3{font-size:34px;margin:60px 0 16px}.cap .cap-tags{left:28px;bottom:24px;right:20px;line-height:1.6}
  .blog-grid{grid-template-columns:1fr}.post-card{min-height:280px}
  .contact-title{font-size:clamp(56px,17vw,92px)}.contact-meta{margin-top:50px}.contact-email{font-size:24px}
  .page-hero{padding:135px 0 70px}.page-hero h1{font-size:clamp(54px,16vw,90px)}
  .article{padding:72px 0 100px}.article-content{font-size:17px}.article-content h2{font-size:36px}
  .footer-grid{grid-template-columns:1fr;gap:18px;align-items:start}.footer-links{flex-wrap:wrap}
}
@media (max-width:380px){.container,.narrow,.hero-grid{width:calc(100% - 26px)}.hero h1{font-size:17vw}.nav-drawer-links a{font-size:28px}}

/* Production mobile hardening: expertise tags remain in normal document flow. */
.cap { display:flex; flex-direction:column; min-width:0; }
.cap p { margin-bottom:24px; }
.cap .cap-tags { position:static; margin-top:auto; padding-top:20px; width:100%; overflow-wrap:anywhere; word-break:normal; }
@media (max-width:760px){
  .cap { min-height:0; }
  .cap h3 { margin-bottom:16px; }
  .cap .cap-tags { margin-top:12px; padding-top:18px; line-height:1.7; }
  .hero h1 { max-width:100%; }
}