/* Happy Folks Club website. Dark but lifted: the whole page changes colour as you scroll, like the sky through a day. */
:root{--bg:#14213D;--ink:#FFF8EA;--soft:rgba(255,248,234,.76);--line:rgba(255,248,234,.18);--sun:#F6C94B;--coral:#F28B6B;--mint:#7FE0C2;--lilac:#C3B4FF;--hh:76px;--r:26px;--disp:'Fraunces',Georgia,'Times New Roman',serif;--body:'League Spartan','Trebuchet MS',system-ui,sans-serif}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
.top{view-transition-name:hdr}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 1.0625rem/1.65 var(--body);transition:background-color .9s ease;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;line-height:1;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em;max-width:62ch}
.w{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--sun);color:#14213D;padding:10px 14px;border-radius:10px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding:calc(10px + env(safe-area-inset-top)) 14px 0;pointer-events:none}
.bar{pointer-events:auto;max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 18px;border-radius:99px;background:rgba(18,28,50,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.brand img{height:34px;width:auto}
.menu{display:flex;gap:2px;margin-left:auto}.menu a{text-decoration:none;font-weight:600;font-size:.95rem;padding:9px 13px;border-radius:99px;transition:background .25s,color .25s}.menu a:hover{background:rgba(255,255,255,.12)}.menu .login{color:var(--sun)}
.acts{display:flex;align-items:center;gap:8px}
.snd,.burger{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.snd[aria-pressed=false] .w{display:none}.snd[aria-pressed=false]{opacity:.6}
.join{background:var(--sun);color:#14213D;font-weight:700;text-decoration:none;padding:11px 18px;border-radius:99px;white-space:nowrap;transition:transform .25s}.join:hover{transform:translateY(-2px)}
.burger{display:none;position:relative}.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s,top .35s}.burger i:first-child{top:16px}.burger i:last-child{top:24px}
.burger[aria-expanded=true] i:first-child{top:20px;transform:rotate(45deg)}.burger[aria-expanded=true] i:last-child{top:20px;transform:rotate(-45deg)}
@media(max-width:980px){.burger{display:grid}.menu{position:fixed;inset:0;margin:0;flex-direction:column;justify-content:center;gap:4px;padding:90px 28px 40px;background:var(--bg);opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s,transform .35s,visibility .35s;pointer-events:none}
.menu.on{opacity:1;visibility:visible;transform:none;pointer-events:auto}.menu a{font-family:var(--disp);font-size:2.4rem;font-weight:600;padding:6px 8px;border-radius:12px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}.menu.on a{opacity:1;transform:none}.menu.on a:nth-child(2){transition-delay:.05s}.menu.on a:nth-child(3){transition-delay:.1s}.menu.on a:nth-child(4){transition-delay:.15s}.menu.on a:nth-child(5){transition-delay:.2s}.menu.on a:nth-child(6){transition-delay:.25s}.menu.on a:nth-child(7){transition-delay:.3s}
.brand,.acts{position:relative;z-index:2}.acts{margin-left:auto}.join{padding:10px 14px;font-size:.92rem}}
@media(max-width:380px){.join{display:none}}
/* buttons */
.btn{display:inline-block;font:700 1rem var(--body);text-decoration:none;padding:15px 26px;border-radius:99px;background:var(--sun);color:#14213D;border:2px solid var(--sun);cursor:pointer;transition:transform .25s,background .25s,color .25s}.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--ink)}
.row{display:flex;gap:12px;flex-wrap:wrap}
/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding:calc(var(--hh) + 36px) 0 56px}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(3.4rem,10.5vw,9.4rem);line-height:.9;letter-spacing:-.035em}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.06em}.hero h1 span b{display:block;font-weight:inherit;transform:translateY(105%);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 span:nth-child(2) b{animation-delay:.12s}.hero h1 span:nth-child(3) b{animation-delay:.24s}
@keyframes up{to{transform:none}}
.hero .sub{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--soft);margin:28px 0 28px;max-width:34ch;opacity:0;animation:fade .9s .7s forwards}.hero .row{opacity:0;animation:fade .9s .9s forwards}
@keyframes fade{to{opacity:1}}
.sun{justify-self:center;width:min(100%,460px);aspect-ratio:1;border-radius:50%;background:var(--sun);color:#14213D;display:grid;place-items:center;position:relative;overflow:hidden;transform:translateY(34%);opacity:0;animation:rise 1.4s .15s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{transform:none;opacity:1}}
.sun .roll{font-family:var(--disp);font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(7rem,21vw,15rem);line-height:1;height:1em;overflow:hidden;letter-spacing:-.05em}
.sun .roll div{display:block;transition:transform .9s cubic-bezier(.65,0,.25,1)}.sun .roll span{display:block;height:1em;text-align:center}
.sun small{position:absolute;bottom:11%;left:0;right:0;text-align:center;font-weight:700;font-size:.95rem;letter-spacing:.02em}
@media(max-width:860px){.sun .roll{font-size:5.4rem}.sun small{font-size:.8rem;bottom:13%}.hero .w{grid-template-columns:1fr}.sun{order:-1;width:min(52vw,250px);margin-top:4px}.hero{min-height:auto;padding-top:calc(var(--hh) + 18px)}}
/* generic section */
.sec{padding:clamp(72px,12vw,150px) 0}
.sec h2{font-size:clamp(2.4rem,6.4vw,5.4rem);max-width:15ch}
.lead{font-size:clamp(1.15rem,2.4vw,1.5rem);color:var(--soft);max-width:44ch;margin-top:22px}
.photo{margin:0}.photo img{width:100%;border-radius:var(--r);background:rgba(255,255,255,.06)}.photo figcaption{font-size:.9rem;color:var(--soft);margin-top:10px}
.idea .w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:start}
.idea h2{max-width:11ch}
@media(max-width:860px){.idea .w{grid-template-columns:1fr}}
/* programmes: cards stack as you scroll */
.stack{padding-bottom:6vh}
.prog{position:sticky;top:calc(var(--hh) + var(--i)*16px);margin:0 0 7vh;background:var(--c);border-radius:34px;padding:clamp(18px,3vw,38px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(18px,4vw,52px);align-items:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 -18px 40px -24px rgba(0,0,0,.5);min-height:min(66vh,560px)}
.prog .ph{background:rgba(255,255,255,.1);border-radius:22px;padding:10px;align-self:stretch;display:grid;align-items:center}
.prog .ph img{width:100%;max-height:60vh;object-fit:contain;border-radius:14px}
.prog h3{font-size:clamp(2.2rem,5vw,4rem)}.prog p{margin:16px 0 22px;color:var(--soft)}
.prog:nth-child(even){grid-template-columns:.95fr 1.05fr}.prog:nth-child(even) .ph{order:2}
@media(max-width:860px){.prog,.prog:nth-child(even){position:relative;top:auto;grid-template-columns:1fr;min-height:0;border-radius:26px}.prog:nth-child(even) .ph{order:0}}
/* moments */
.moments{columns:3 280px;column-gap:16px;margin-top:44px}.moments figure{break-inside:avoid;margin:0 0 16px}.moments img{width:100%;border-radius:20px;background:rgba(255,255,255,.07)}
/* students */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.pill{border-radius:30px;padding:clamp(24px,4vw,44px);background:rgba(255,255,255,.08);border:1px solid var(--line)}.pill h3{font-size:clamp(2rem,4.2vw,3.2rem)}.pill p{color:var(--soft);margin:14px 0 22px}.pill.hot{background:var(--coral);color:#2B1410;border-color:var(--coral)}.pill.hot p{color:#4A2118}.pill.hot .btn{background:#2B1410;border-color:#2B1410;color:#FFF8EA}
@media(max-width:860px){.two{grid-template-columns:1fr}}
/* perks */
.perks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,5vw,70px);margin-top:44px}.perk{padding:20px 0;border-top:1px solid var(--line)}.perk b{font-family:var(--disp);font-weight:600;font-size:1.5rem;display:block;margin-bottom:4px}.perk span{color:var(--soft)}
@media(max-width:760px){.perks{grid-template-columns:1fr}}
/* study buddy band */
.band{background:var(--sun);color:#14213D;border-radius:34px;padding:clamp(26px,5vw,56px);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}.band h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:14ch}.band p{color:#3A3316;margin-top:14px}.band .btn{background:#14213D;border-color:#14213D;color:#FFF8EA}
@media(max-width:860px){.band{grid-template-columns:1fr}}
/* final */
.final{text-align:center;padding:clamp(90px,16vw,200px) 0}.final h2{margin-inline:auto;max-width:12ch}.final .row{justify-content:center;margin-top:30px}.final .lead{margin-inline:auto}
.page-hero{padding:calc(var(--hh) + 70px) 0 30px}.page-hero h1{font-size:clamp(3rem,9vw,7.4rem);line-height:.92;letter-spacing:-.035em;max-width:13ch}
/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 28px;background:rgba(0,0,0,.18)}.fbig{display:grid;grid-template-columns:1fr 2fr;gap:40px}.fbig img{height:46px;margin-bottom:14px}.fbig p{color:var(--soft);font-size:.98rem}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.fcols b{display:block;font-family:var(--disp);font-weight:600;font-size:1.15rem;margin-bottom:8px}.fcols a{display:block;text-decoration:none;color:var(--soft);padding:4px 0}.fcols a:hover{color:var(--sun)}
.copy{margin:34px 0 0;color:var(--soft);font-size:.9rem;max-width:none}
@media(max-width:860px){.fbig{grid-template-columns:1fr}.fcols{grid-template-columns:1fr 1fr}}
/* reveal: only after JS says it is ready, and a timer shows everything anyway */
.rv-on .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.rv-on .rv.in{opacity:1;transform:none}
/* forms */
.fm{max-width:760px;margin:0 auto;padding:calc(var(--hh) + 56px) 20px 80px}.fm h1{font-size:clamp(2.4rem,7vw,4.4rem);margin-bottom:18px}.fm .q{margin:0 0 26px;padding:18px 0;border-top:1px solid var(--line)}.fm .q.bad{outline:2px solid var(--coral);outline-offset:8px;border-radius:12px}
.fm .l{display:block;font-weight:700;margin-bottom:8px}.fm .req{color:var(--coral)}
.fm input[type=text],.fm input[type=email],.fm input[type=tel],.fm input[type=date],.fm input[type=time],.fm input[type=number],.fm textarea,.fm select{width:100%;font:500 1.05rem var(--body);color:var(--ink);background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.fm select option{color:#14213D}.fm .opt{display:flex;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer}.fm .opt input{margin-top:5px;accent-color:var(--sun);width:20px;height:20px;flex:none}
.sv{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);background:var(--sun);color:#14213D;font-weight:700;padding:8px 18px;border-radius:99px;opacity:0;transition:.3s;pointer-events:none;z-index:60}.sv.on{opacity:1;transform:translate(-50%,0)}
.thx{text-align:center;padding:60px 0}.thx p{margin-inline:auto}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}html{scroll-behavior:auto}.sun,.hero h1 span b{transform:none;opacity:1}.hero .sub,.hero .row{opacity:1}.prog{position:relative;top:auto}}