/* Hugschool Blog — matches the #hugschool home design (tokens, header, buttons, footer) */
#hugschool{box-sizing:border-box;
  --paper:#FFFFFF;--surface:#FFF6E3;--ink:#1A1A1A;--muted:#5A5550;
  --blue:#F26A1B;--on-blue:#1A1A1A;--sun:#FFC400;--mint:#FFE7A3;--line:#EBDFCB;
  --pad:1.25rem;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  #hugschool:not([data-theme="light"]){--paper:#141414;--surface:#222018;--ink:#FFF8EA;--muted:#C4BBAA;--blue:#FF8A3D;--on-blue:#141414;--mint:#5A4710;--line:#37332A}
  #hugschool:not([data-theme="light"]) .logo img{background:#fff;border-radius:12px;padding:3px 4px}
}
#hugschool[data-theme="dark"]{--paper:#141414;--surface:#222018;--ink:#FFF8EA;--muted:#C4BBAA;--blue:#FF8A3D;--on-blue:#141414;--mint:#5A4710;--line:#37332A}
#hugschool[data-theme="dark"] .logo img{background:#fff;border-radius:12px;padding:3px 4px}

html{overflow-x:clip;scroll-behavior:smooth}
body.hsb-page{margin:0;background:var(--paper,#fff)}
#hugschool *,#hugschool *::before,#hugschool *::after{box-sizing:inherit}
#hugschool{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);
  width:100vw;max-width:100vw;position:relative;left:50%;margin-left:-50vw}
#hugschool h1,#hugschool h2,#hugschool h3{font-family:var(--display);line-height:1.08;margin:0;letter-spacing:-.02em;color:inherit}
#hugschool p{margin:0}
#hugschool a{color:inherit}
#hugschool img{max-width:100%;height:auto}
#hugschool :focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
#hugschool .wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
@media(min-width:1100px){#hugschool{--pad:clamp(2rem,4vw,3.5rem)}}
#hugschool .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header (same as home) ---------- */
#hugschool header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
body.admin-bar #hugschool header.site{top:32px}
@media(max-width:782px){body.admin-bar #hugschool header.site{top:46px}}
#hugschool .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem var(--pad)}
#hugschool .logo{display:flex;align-items:center;gap:.55rem;font:800 1.4rem var(--display);text-decoration:none;letter-spacing:-.03em}
#hugschool .logo img{display:block;height:44px;width:auto}
#hugschool .logo b{font-weight:inherit}
#hugschool .logo span{color:var(--blue)}
#hugschool nav.main{display:flex;gap:1.4rem;align-items:center}
#hugschool nav.main .links{display:flex;gap:1.4rem;align-items:center}
#hugschool nav.main a{text-decoration:none;font-weight:500}
#hugschool nav.main a:hover,#hugschool nav.main a[aria-current]{color:var(--blue)}
#hugschool .lang{display:flex;gap:.25rem;border:1px solid var(--line);border-radius:99px;padding:.2rem}
#hugschool .lang a{padding:.15rem .55rem;border-radius:99px;font-size:.85rem;font-weight:600;text-decoration:none}
#hugschool .lang a[aria-current]{background:var(--ink);color:var(--paper)}
#hugschool .dd{position:relative}
#hugschool .dd-btn{font:inherit;font-weight:500;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#hugschool .dd-btn::after{content:"";display:inline-block;width:.42em;height:.42em;margin:0 0 .18em .5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s}
#hugschool .dd.open .dd-btn::after{transform:rotate(225deg) translate(-2px,-2px)}
#hugschool .dd-btn:hover{color:var(--blue)}
#hugschool .dd-panel{position:absolute;top:100%;left:-1rem;min-width:330px;padding-top:.8rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s;z-index:10}
#hugschool .dd.open .dd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(hover:hover){#hugschool .dd:hover .dd-panel{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
#hugschool .dd-card{display:grid;gap:.2rem;padding:.5rem;background:var(--paper);border:2px solid var(--ink);border-radius:1.2rem;box-shadow:0 16px 30px rgba(0,0,0,.14)}
#hugschool .dd-card a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .9rem;border-radius:.8rem;font-weight:600;color:var(--ink)}
#hugschool .dd-card a:hover{background:var(--surface);color:var(--ink)}
#hugschool .dd-card a span{white-space:nowrap}
#hugschool .dd-card a em{font:700 .85rem var(--display);font-style:normal;padding:.2rem .7rem;border-radius:99px;transform:rotate(3deg);transition:transform .25s}
#hugschool .dd-card a:hover em{transform:rotate(-4deg) scale(1.12)}
#hugschool .dd-card .en em{background:var(--blue);color:var(--on-blue)}
#hugschool .dd-card .es em{background:var(--sun);color:#1A1A1A}
#hugschool .dd-card .ca em{background:var(--mint);color:#1A1A1A}
#hugschool .dd-card .fr em{background:var(--ink);color:var(--paper)}
#hugschool .burger{display:none;place-items:center;width:2.7rem;height:2.7rem;padding:0;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer}
#hugschool .bi,#hugschool .bi::before,#hugschool .bi::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,background .2s,top .25s}
#hugschool .bi{position:relative}
#hugschool .bi::before,#hugschool .bi::after{content:"";position:absolute;left:0}
#hugschool .bi::before{top:-6px}
#hugschool .bi::after{top:6px}
#hugschool header.open .bi{background:transparent}
#hugschool header.open .bi::before{top:0;transform:rotate(45deg)}
#hugschool header.open .bi::after{top:0;transform:rotate(-45deg)}
@media(max-width:900px){
  #hugschool nav.main{gap:.6rem}
  #hugschool .burger{display:grid}
  #hugschool nav.main .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--pad) 1.2rem;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 26px rgba(0,0,0,.1);max-height:calc(100vh - 4.5rem);overflow-y:auto}
  #hugschool header.open nav.main .links{display:flex}
  #hugschool nav.main .links>a,#hugschool .dd-btn{padding:.8rem 0;font-size:1.12rem;border-bottom:1px solid var(--line)}
  #hugschool .dd-btn{display:block;width:100%;text-align:left;pointer-events:none;font-weight:700}
  #hugschool .dd-btn::after{display:none}
  #hugschool .dd-panel{position:static;min-width:0;padding:0;opacity:1;visibility:visible;transform:none;transition:none}
  #hugschool .dd-card{padding:.2rem 0 .2rem .4rem;border:0;box-shadow:none;border-radius:0;background:none}
  #hugschool .dd-card a{padding:.7rem .4rem;font-size:1.08rem}
}
@media(max-width:430px){#hugschool .logo{font-size:1.2rem;gap:.4rem}#hugschool .logo img{height:36px}#hugschool .lang a{padding:.15rem .42rem}#hugschool .bar{gap:.5rem}#hugschool .burger{width:2.4rem;height:2.4rem}#hugschool nav.main{gap:.4rem}}

/* ---------- Buttons (same as home) ---------- */
#hugschool .btn{display:inline-block;padding:.85rem 1.5rem;border-radius:99px;font-weight:600;text-decoration:none;border:2px solid var(--ink);transition:transform .2s}
#hugschool .btn.primary{background:var(--sun);color:#1A1A1A;border-color:var(--sun)}
#hugschool .btn.ghost{background:transparent}
#hugschool .btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#hugschool .btn:hover{transform:translateY(-2px)}

/* ---------- Blog hero ---------- */
#hugschool .bhero{padding:2.2rem 0 3rem}
#hugschool .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.6rem;padding:0;font-size:.92rem;color:var(--muted)}
#hugschool .crumbs li+li::before{content:"›";margin-right:.4rem}
#hugschool .crumbs a{text-decoration:none}
#hugschool .crumbs a:hover{color:var(--blue)}
#hugschool .bhero .wrap>.grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:center}
@media(max-width:820px){#hugschool .bhero .wrap>.grid{grid-template-columns:1fr}#hugschool .bhero .deco{display:none}}
#hugschool .kicker{display:inline-block;margin-bottom:1rem;padding:.3rem .9rem;border-radius:99px;background:var(--blue);color:var(--on-blue);font:700 .95rem var(--display);transform:rotate(-3deg)}
#hugschool .bhero h1{font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:800;max-width:16ch}
#hugschool .bhero .lead{max-width:36rem;color:var(--muted);font-size:1.15rem;margin:1.2rem 0 0}
#hugschool .deco{position:relative;min-height:250px}
#hugschool .bubble{position:absolute;padding:.9rem 1.4rem;border-radius:1.7rem;font:800 clamp(1.4rem,3vw,2.1rem)/1 var(--display);letter-spacing:-.03em;animation:hsbpop .6s cubic-bezier(.2,1.4,.4,1) var(--d,0s) both,hsbfloat var(--f,5s) ease-in-out calc(var(--d,0s) + .6s) infinite alternate}
#hugschool .bubble::after{content:"";position:absolute;bottom:-12px;width:24px;height:24px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%)}
#hugschool .bubble.b1{background:var(--sun);color:#1A1A1A;top:0;right:8%;--d:.1s;--f:4.8s}
#hugschool .bubble.b1::after{right:30px;transform:scaleX(-1)}
#hugschool .bubble.b2{background:var(--mint);color:var(--ink);top:95px;left:0;--d:.35s;--f:5.6s}
#hugschool .bubble.b2::after{left:30px}
#hugschool .bubble.b3{background:var(--ink);color:var(--paper);top:180px;right:0;--d:.6s;--f:4.4s}
#hugschool .bubble.b3::after{right:30px;transform:scaleX(-1)}
@keyframes hsbfloat{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-12px) rotate(2deg)}}
@keyframes hsbpop{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}

/* ---------- Topic filter ---------- */
#hugschool .topics{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.2rem;padding:0;list-style:none}
#hugschool .topics a{display:inline-block;padding:.5rem 1.1rem;border:2px solid var(--ink);border-radius:99px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
#hugschool .topics a:hover{background:var(--surface);transform:translateY(-2px)}
#hugschool .topics a[aria-current]{background:var(--ink);color:var(--paper)}

/* ---------- Posts ---------- */
#hugschool .bposts{padding:0 0 4.5rem}
#hugschool .chip{position:absolute;top:-14px;right:16px;z-index:2;padding:.3rem .85rem;border-radius:99px;font:700 .9rem var(--display);background:var(--sun);color:#1A1A1A;transform:rotate(4deg);text-transform:capitalize}
#hugschool .post{position:relative;display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:1.4rem;transition:transform .3s cubic-bezier(.2,.9,.3,1),box-shadow .3s}
#hugschool .post:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 16px 28px rgba(0,0,0,.16)}
#hugschool .post:hover .chip{animation:hsbwiggle .7s ease both}
#hugschool .post .media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:calc(1.4rem - 2px) calc(1.4rem - 2px) 0 0;background:var(--surface);border-bottom:2px solid var(--ink)}
#hugschool .post .media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
#hugschool .post:hover .media img{transform:scale(1.04)}
#hugschool .post .media.empty{display:grid;place-items:center;font:800 2.4rem var(--display);color:var(--blue)}
#hugschool .post .body{display:flex;flex-direction:column;gap:.7rem;padding:1.4rem 1.5rem 1.6rem;flex:1}
#hugschool .post h2{font-size:1.45rem}
#hugschool .post h2 a{text-decoration:none}
#hugschool .post h2 a::after{content:"";position:absolute;inset:0;border-radius:1.4rem}
#hugschool .post .meta{font-size:.9rem;color:var(--muted);font-weight:500}
#hugschool .post .ex{color:var(--muted);font-size:.98rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#hugschool .post .more{margin-top:auto;padding-top:.4rem;font-weight:600}
#hugschool .post .more::after{content:" \2192";display:inline-block;transition:transform .25s}
#hugschool .post:hover .more::after{transform:translateX(6px)}

/* Featured (newest) post */
#hugschool .post.featured{display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:2.4rem;background:var(--surface)}
#hugschool .post.featured .media{aspect-ratio:auto;min-height:340px;border-radius:calc(1.4rem - 2px) 0 0 calc(1.4rem - 2px);border-bottom:0;border-right:2px solid var(--ink)}
#hugschool .post.featured .body{justify-content:center;padding:2.2rem 2.4rem;gap:.9rem}
#hugschool .post.featured h2{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:800}
#hugschool .post.featured .ex{-webkit-line-clamp:4;font-size:1.05rem}
#hugschool .post.featured .chip{background:var(--blue);color:var(--on-blue);font-size:1rem}
#hugschool .post.featured .more{margin-top:.4rem}
@media(max-width:820px){
  #hugschool .post.featured{grid-template-columns:1fr}
  #hugschool .post.featured .media{min-height:0;aspect-ratio:16/10;border-radius:calc(1.4rem - 2px) calc(1.4rem - 2px) 0 0;border-right:0;border-bottom:2px solid var(--ink)}
  #hugschool .post.featured .body{padding:1.5rem}
}
#hugschool .grid-posts{display:grid;grid-template-columns:1fr;gap:2.2rem 1.4rem;margin:0;padding:0;list-style:none}
@media(min-width:700px){#hugschool .grid-posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){#hugschool .grid-posts{grid-template-columns:repeat(3,1fr)}}
#hugschool .grid-posts>li{display:flex}
#hugschool .grid-posts>li>.post{flex:1}
@keyframes hsbwiggle{0%{transform:rotate(4deg) scale(1)}30%{transform:rotate(-10deg) scale(1.2)}60%{transform:rotate(10deg) scale(1.2)}100%{transform:rotate(4deg) scale(1.1)}}

/* Entrance animation (only when JS is on) */
.js #hugschool .reveal{opacity:0}
#hugschool .reveal.in{opacity:1;animation:hsbrise .7s cubic-bezier(.2,.9,.3,1) calc(var(--i,0)*.08s) backwards}
@keyframes hsbrise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Empty state */
#hugschool .empty-state{padding:3rem;border:2px dashed var(--line);border-radius:1.4rem;text-align:center;color:var(--muted)}

/* ---------- Pagination ---------- */
#hugschool .pager{margin-top:3rem}
#hugschool .pager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;list-style:none;margin:0;padding:0}
#hugschool .pager a,#hugschool .pager span{display:grid;place-items:center;min-width:2.9rem;height:2.9rem;padding:0 1rem;border:2px solid var(--ink);border-radius:99px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s}
#hugschool .pager a:hover{background:var(--sun);color:#1A1A1A;transform:scale(1.06)}
#hugschool .pager .current{background:var(--ink);color:var(--paper)}
#hugschool .pager .dots{border-color:transparent}

/* ---------- CTA band ---------- */
#hugschool .bcta{padding:0 0 4.5rem}
#hugschool .bcta .panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:1.6rem 2rem;align-items:center;padding:2.4rem;border-radius:1.6rem;background:var(--sun);color:#1A1A1A}
#hugschool .bcta h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;max-width:22ch}
#hugschool .bcta p{margin-top:.7rem;max-width:34rem}
#hugschool .bcta .cta{display:flex;flex-wrap:wrap;gap:.8rem}
#hugschool .bcta .btn{border-color:#1A1A1A;color:#1A1A1A}
#hugschool .bcta .btn.dark{background:#1A1A1A;color:#FFF6E3}
@media(max-width:760px){#hugschool .bcta .panel{grid-template-columns:1fr;padding:1.8rem}}

/* ---------- Footer (same as home) ---------- */
#hugschool footer.site{border-top:1px solid var(--line);padding:1.8rem 0;color:var(--muted);font-size:.92rem}
#hugschool footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem}
#hugschool footer.site a{text-decoration:none}
#hugschool footer.site a:hover{color:var(--blue)}
#hugschool .wa{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:30;background:#25D366;color:#06301A;font-weight:600;padding:.8rem 1.2rem;border-radius:99px;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #hugschool .bubble,#hugschool .post:hover .chip,#hugschool .reveal.in{animation:none}
  .js #hugschool .reveal{opacity:1}
  #hugschool .post:hover,#hugschool .btn:hover,#hugschool .topics a:hover{transform:none}
  #hugschool .post:hover .media img{transform:none}
}