/* Homepage chrome: same footer stylesheet and Three.js mark, local page routing. */
@font-face{font-family:Founders;src:url('/skill-study/assets/founders-grotesk-bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--display:Cabinet,sans-serif;--body:Space,sans-serif}
.navigation{position:relative;z-index:20;display:flex;align-items:start;justify-content:space-between;gap:16px;margin:0;font:400 18px/1.1 var(--body)}
.navigation nav{display:flex;gap:5px}
.navigation a,.navigation button{background:var(--frost);color:var(--oxblood);border:1px solid var(--oxblood);text-decoration:none;padding:6px 6px;line-height:1.1;min-height:36px;white-space:nowrap}
.navigation .brand-chip{display:flex;align-items:center;gap:6px;font-family:Founders,sans-serif;font-weight:700;letter-spacing:0}
.brand-chip small{font-size:12px;font-weight:500}.brand-chip img{width:21px;height:21px}
.navigation .dark-chip{background:var(--oxblood);color:var(--frost)}
.navigation a:hover,.navigation button:hover{background:var(--sulphur);color:var(--oxblood)}
.navigation [aria-current=page]{background:var(--sulphur);text-decoration:none}
#menu{display:none}#mobile-menu{position:absolute;right:0;top:42px;flex-direction:column;background:var(--frost);border:1px solid var(--oxblood);padding:8px;min-width:180px}
#main{padding-top:16px;padding-bottom:64px}
#join{overflow:hidden}#join .container{width:min(1240px,100% - 60px);margin-inline:auto}
#join .editorial-heading{display:none}#join .word-roll{display:inline-grid;position:relative;vertical-align:baseline;line-height:inherit;overflow:hidden}
#join .roll-word{grid-area:1/1;visibility:hidden;transform:translateY(110%);transition:transform 600ms cubic-bezier(.16,1,.3,1);white-space:nowrap}
#join .roll-word.is-current{visibility:visible;transform:translateY(0)}
#join .footer-utility nav button{border:0;padding:0;min-height:44px;font:inherit;background:none;color:inherit;text-decoration:underline;text-underline-offset:4px}
body.focus-mode #join.footer-home{background:var(--frost);color:var(--oxblood)}
body.focus-mode #join :is(.character-sky,.footer-object,.interactive-heading){display:none}
body.focus-mode #join .editorial-heading{display:inline}
body.focus-mode #join :is(.footer-logotype,.footer-logotype span,.footer-links h3,#join-status,.footer-email-row input){color:var(--oxblood)}
body.focus-mode #join .footer-email-row input::placeholder{color:var(--oxblood)}
body.focus-mode #join :is(.footer-invitation,.footer-email-row,.footer-utility){border-color:var(--line)}
body.focus-mode #join .footer-main{grid-template-columns:1fr}
body.focus-mode #join .footer-brand-and-links{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
body.focus-mode #join .footer-links{margin-top:0}
body.focus-mode #join :is(a,button,input):focus-visible{outline-color:var(--oxblood)}
@media(max-width:900px){.navigation .middle-nav{display:none}#menu{display:block}}
@media(max-width:700px){.navigation{margin-top:0;font-size:14px;gap:8px}.navigation a,.navigation button{padding:10px 6px;min-height:44px}.brand-chip img{width:18px;height:18px}.navigation .brand-chip{gap:4px;font-size:16px}.brand-chip small{display:block;font-size:12px}.navigation nav{gap:3px}#mobile-menu{top:50px}#join .container{width:calc(100% - 40px)}body.focus-mode #join .footer-brand-and-links{grid-template-columns:1fr;gap:28px}}
@media(prefers-reduced-motion:reduce){#join .roll-word{transition:none}}

/* Compact chrome keeps the same hierarchy on small screens. */
.navigation a,.navigation button{display:flex;align-items:center;justify-content:center;min-height:44px}
#mobile-menu{top:50px}
#mobile-menu a{justify-content:flex-start;padding:12px;border:0}
.skip{z-index:30}
@media(max-width:360px){.navigation .brand-chip>span{display:none}.navigation .brand-chip{min-width:44px}.navigation{gap:6px}.navigation a,.navigation button{padding-inline:8px}}
#join .footer-utility nav{position:relative}
#join .cookie-study{position:static}
#join .cookie-study summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
#join .cookie-study summary:focus-visible{outline:2px solid var(--sulphur);outline-offset:4px}
#join .cookie-study p{position:absolute;bottom:100%;left:0;width:min(290px,75vw);padding:18px;background:var(--frost);color:var(--oxblood);border:1px solid var(--oxblood);font:14px/1.5 var(--body);z-index:3}

/* Same type metrics for the static prefix and the changing word. */
#join #footer-title .interactive-heading{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:.22em;line-height:1.12}
#join .closing-prefix{display:block;line-height:inherit}
body.focus-mode #join #footer-title .interactive-heading{display:none}

/* The page starts directly below the navigation; spacing belongs inside its hero. */
body #main{padding-top:0}
body #main>:is(.resource-hero,.news-hero,.verdict-hero,.newsletter-hero):first-child{margin-top:0}
body #main>.newsletter-hero:first-child{padding-top:24px}
.footer-link-invitation>p{font-size:15px;line-height:1.5;margin:0 0 18px}
#join .footer-newsletter-link{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid currentColor;padding:12px 0;font:500 clamp(25px,2.6vw,36px)/1.15 var(--display);text-decoration:none;color:inherit}
#join .footer-newsletter-link:hover{color:var(--sulphur)}
body.focus-mode #join .footer-newsletter-link:hover{color:var(--oxblood)}
.newsletter-resource-context{border-left:3px solid var(--oxblood);padding:12px 16px;margin-top:26px;font-size:15px;line-height:1.5;background:var(--blue)}
.newsletter-resource-context a{display:inline-block;margin-top:8px}