/* hf.css: header, footer and Skills refinements. Loaded after s.css. */

/* ---------- Header ---------- */
body.home .bar{position:fixed}
body.post .bar,body.bookpage .bar,body.nf .bar{position:sticky;top:0}
.bar{transition:transform .38s var(--ease)}
.bar:before{content:"";position:absolute;inset:0 0 -8px;z-index:-1;pointer-events:none;opacity:0;
 background:var(--grain) 0 0/256px,var(--paper);
 box-shadow:0 1px 0 #15131124,0 16px 26px -20px var(--sh);transition:opacity .28s var(--ease)}
.bar.is-stuck:before{opacity:1}
.bar.is-stuck,.js:not(.motion) .bar.is-stuck,.js:not(.motion) .bar.is-stuck .mark .logo{color:var(--ink)}
.links a[aria-current]:not(.lang):after{transform:scaleX(1)}
.links a[aria-current]{font-weight:800}
.links a:focus-visible,.mark:focus-visible,.menu-b:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:6px}

.menu-b{position:relative;isolation:isolate;align-items:center;gap:10px;padding:0 16px .1em;color:var(--paper)}
.menu-b:before{content:"";position:absolute;inset:4px 0;z-index:-1;background:var(--ink);clip-path:var(--t5)}
.menu-i{display:grid;gap:4px;width:18px}
.menu-i i{display:block;height:2.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.menu-b[aria-expanded=true] .menu-i i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-b[aria-expanded=true] .menu-i i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:760px){
 .menu-b{display:inline-flex}
 .bar.is-hid{transform:translateY(-115%)}
}

.sheet-p nav a[aria-current]{color:var(--od)}
.sheet-p nav a[aria-current]:before{content:"";display:inline-block;width:.42em;height:.42em;margin-inline-end:.35em;background:var(--or);transform:rotate(12deg);border-radius:3px}
.sheet-s{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;padding-top:14px;border-top:1px solid #15131126;font-size:16px;font-weight:700}
.sheet-s a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.sheet-s .ic{width:20px;height:20px;color:var(--od)}

/* ---------- Footer ---------- */
body[class] footer.foot{display:block;padding:clamp(56px,7vw,96px) var(--m) 26px;font-size:15px}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:44px clamp(24px,4vw,64px);max-width:1240px;margin-inline:auto}
body[class] footer.foot p{text-align:start}
.ft-mark{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:900;font-size:21px;color:var(--paper)}
.ft-mark .logo{width:40px;height:40px;color:var(--paper)}
.ft-bio{margin-top:12px;max-width:36ch;line-height:1.95;color:var(--mut-l)}
.ft-motto{display:inline-block;margin-top:20px;padding:.22em .8em .34em;background:var(--or);color:var(--ink);font-weight:900;font-size:17px;line-height:1.4;clip-path:var(--t5)}
.ft-h{margin-bottom:8px;font-size:14px;font-weight:800;line-height:1.6;color:var(--or)}
body[class] footer.foot nav{display:block;gap:0}
.ft-l{list-style:none;display:grid}
body[class] footer.foot .ft-l a,body[class] footer.foot .ft-brand a:not(.ft-mark){display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0;margin:0;color:var(--paper);font-weight:600;overflow-wrap:anywhere}
body[class] footer.foot .ft-l a[aria-current]{color:var(--or)}
@media (hover:hover){body[class] footer.foot .ft-l a:hover{color:var(--or)}}
.ft-l a:focus-visible,.ft-mark:focus-visible,.ft-base a:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:4px}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;max-width:1240px;margin:clamp(36px,5vw,64px) auto 0;padding-top:20px;border-top:1px solid #ffffff1f;color:var(--mut-l);font-size:14px}
body[class] footer.foot .ft-base nav{display:flex;flex-wrap:wrap;gap:4px 22px}
body[class] footer.foot .ft-base a{display:inline-flex;align-items:center;min-height:40px;margin:0;padding:0;color:var(--paper);font-weight:700}
@media (hover:hover){body[class] footer.foot .ft-base a:hover{color:var(--or)}}
@media (max-width:900px){.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ft-brand{grid-column:1/-1}}
@media (max-width:620px){
 .ft-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 body[class] footer.foot{padding-top:56px}
 .ft-base{flex-direction:column;align-items:flex-start}
}

/* ---------- Skills: home section + index + cards ---------- */
.skills{position:relative;padding:clamp(88px,10vw,140px) var(--m);background:var(--grain) 0 0/256px,var(--paper)}
.skills .bl-head{margin-bottom:34px}
.skc-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:26px 22px}
.skc{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:28px 26px 24px;background:var(--pw);border-radius:var(--r);box-shadow:0 18px 36px -24px var(--sh)}
.skc:before{content:"";position:absolute;top:-10px;inset-inline-end:28px;width:68px;height:22px;background:var(--or);opacity:.92;transform:rotate(-4deg);clip-path:var(--t5)}
.skc-tags{display:flex;flex-wrap:wrap;gap:8px}
.skc-tags span{direction:ltr;unicode-bidi:isolate;padding:2px 11px 4px;background:#1513110f;border-radius:99px;font-size:13px;font-weight:800;line-height:1.5}
.skc-t{font-size:clamp(24px,2.2vw,30px);font-weight:900;line-height:1.4}
.skc-d{font-size:16.5px;line-height:1.9;color:#3d352d}
.skc-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:auto;padding-top:10px}
.skc-a .btn{min-height:48px;margin-inline-end:4px}
.skc .more{margin-top:0}
.skills>.more{margin-top:30px}
.skx{padding:0 0 clamp(56px,8vw,110px)}
.skx-wrap{max-width:1040px;margin:0 auto;padding:0 var(--m)}
.skx-hero{padding:clamp(96px,10vw,140px) 0 clamp(32px,4vw,56px)}
.skx-hero .post-t{max-width:22ch}
.skx-hero .post-s{margin-top:26px}
.skx-hero .post-x{max-width:46ch}
.skx-note{margin-top:clamp(34px,5vw,60px);border-inline-start:6px solid var(--or);background:#ffffff80;border-radius:6px var(--r) var(--r) 6px;padding:18px 22px;font-size:16.5px;line-height:1.95;max-width:72ch}
.skx-note b{font-weight:900}
.skx-note code{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere;background:#15131112;border-radius:6px;padding:1px 6px;font-size:.88em}
@media (max-width:620px){.skc-a .btn{width:100%;margin-inline-end:0}}

@media (prefers-reduced-motion:reduce){.bar,.bar:before,.menu-i i{transition:none}}