/* Consistent controls and responsive navigation. */
.site-header{border-bottom-width:2px}
.nav-shell{min-height:86px;gap:20px}
.site-header .brand{font-size:14px;line-height:1.12;gap:10px;letter-spacing:-.35px}
.site-header .brand-mascot{width:72px;height:58px;margin-left:-4px}
.site-header #navigation{display:flex;align-items:center;gap:4px;margin-left:auto}
.site-header .nav-section{display:inline-flex;justify-content:center;align-items:center;min-width:80px;min-height:46px;padding:12px 20px;border-radius:7px;font-size:16px;font-weight:700;line-height:1.25;white-space:nowrap;text-decoration:none;transition:background-color .15s,color .15s}
.site-header .nav-section:hover{background:#075bff0c;color:var(--blue);text-decoration:none}
.site-header .nav-section:active{background:#075bff15}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-header .social-nav{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;min-height:44px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;transition:background-color .15s,color .15s}
.site-header .social-nav:hover{background:var(--ink);color:#fff}
.site-header .buy-button{height:44px;min-height:44px;padding:0 19px;font-size:14px;gap:12px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.button{min-height:48px;padding:12px 20px;font-size:14px;line-height:1.35;gap:12px;border-radius:8px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background-color .15s}
.button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.site-header .buy-button:hover{box-shadow:3px 3px 0 var(--ink)}
.site-header .buy-button:active{box-shadow:1px 1px 0 var(--ink)}
.button>span:not(.x-mark){font-size:18px;line-height:1}
.x-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;line-height:1}
.x-mark svg{display:block;width:100%;height:100%;fill:currentColor}
.social-nav .x-mark{width:19px;height:19px}
.hero-actions{gap:12px;margin-top:28px}
.hero .hero-actions{flex-direction:row;align-items:center}
.hero .hero-actions .button,.portal .hero-actions .button{min-height:52px;padding:14px 22px;font-size:14px;gap:12px}
.hero .hero-actions .button{width:168px;min-width:168px}
.hero-copy,.hero-visual{min-width:0}
.hero h1{font-size:clamp(48px,6.25vw,80px);letter-spacing:-.045em}
.hero-description{font-size:15px;line-height:1.75}
.hero-footnote{gap:10px 12px;margin-top:22px;font-size:11px;line-height:1.65}
.chain-badge{font-size:10px;padding:6px 10px}
.upvote{min-height:44px;padding:10px 14px;font-size:12px;gap:7px}
.thread-toggle{min-height:44px;padding:10px 0;font-size:12px;line-height:1.4}
.post-bottom{gap:10px 16px;align-items:center}
.post-note{font-size:10px;line-height:1.8}
.post-meta{font-size:10px;line-height:1.6}
.flair{font-size:10px}
.wizard-comment strong,.wizard-comment>span{font-size:11px}
.wizard-comment a{font-size:12px}
.text-link{min-height:36px;font-size:13px;gap:9px}
.copy-ca{min-height:44px;font-size:12px}
.site-footer .brand{font-size:12px;line-height:1.15}
.footer-x{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:1.5px solid #11111333;border-radius:8px;padding:11px;transition:background-color .15s,color .15s}
.footer-x>svg{display:block;width:19px;height:19px;fill:currentColor}
.footer-x:hover{background:var(--ink);color:#fff}
.footer-center .mono{font-size:10px}
.footer-center p{font-size:11px;line-height:1.65}
.dialog-close{width:44px;height:44px;top:7px;right:9px}
dialog .button{min-height:48px;font-size:13px;padding:12px 17px;gap:10px}
dialog p{line-height:1.75}
@media(max-width:1050px){
  .nav-shell{gap:16px}
  .site-header .brand{font-size:12px;gap:8px}
  .site-header .brand-mascot{width:64px;height:52px}
  .site-header .nav-section{padding-inline:18px}
  .nav-actions{gap:10px}
  .site-header .buy-button{padding-inline:16px;font-size:13px;gap:10px}
}
@media(max-width:700px){
  :root{scroll-padding-top:134px}
  .nav-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;min-height:0;padding-block:8px;padding-inline:24px}
  .site-header .brand{grid-column:1;grid-row:1;gap:8px;font-size:12px}
  .site-header .brand-mascot{width:56px;height:46px;margin-left:-3px}
  .nav-actions{grid-column:2;grid-row:1;gap:10px}
  .site-header #navigation{grid-column:1/-1;grid-row:2;margin:0;width:100%;gap:4px;border-top:1px solid #11111316;padding-top:4px}
  .site-header .nav-section{flex:1;min-height:46px;padding:12px 18px}
  .site-header .social-nav{width:44px;height:44px}
  .site-header .buy-button{min-height:44px;padding:10px 15px;font-size:13px;gap:9px}
  .hero .hero-actions .button,.portal .hero-actions .button{min-height:50px;padding:13px 18px;font-size:14px;gap:10px}
  .hero .hero-actions .button{min-width:152px}
  .hero-description{font-size:14px}
  .section-label{font-size:10px;line-height:1.65}
  .hero-footnote{font-size:11px;gap:9px 12px}
  .post-meta,.flair{font-size:10px}
  .site-footer{gap:20px}
}
@media(max-width:560px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(56px,14.2vw,78px);letter-spacing:-.045em}
  .hero .hero-actions{gap:12px}
  .hero .hero-actions .button{min-width:148px}
  .portal .hero-actions{align-items:stretch}
  .portal .hero-actions .button{min-height:50px;padding-inline:17px;font-size:13px}
  .hero-footnote{margin-top:22px;row-gap:10px}
  .lore-post{padding:22px}
  .post-note{font-size:10px}
  .footer-center .mono{font-size:10px}
  .footer-center p{font-size:11px}
}
@media(max-width:400px){
  .nav-shell{padding-inline:18px;column-gap:10px}
  .site-header .brand{font-size:10px;gap:6px}
  .site-header .brand-mascot{width:46px;height:42px;margin-left:-2px}
  .nav-actions{gap:8px}
  .site-header .buy-button{padding-inline:13px;font-size:13px;gap:8px}
  .hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:12px}
  .hero .hero-actions .button{min-width:0;width:100%;padding:13px 10px;font-size:13px;gap:8px}
  .portal .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
  .portal .hero-actions .button{font-size:13px}
  .lore-post{padding:18px}
  dialog .button{font-size:12px;padding-inline:13px}
}
@media(max-width:360px){.site-header .brand>span{display:none}.site-header .brand-mascot{width:50px;height:44px}.hero h1{font-size:clamp(46px,15.2vw,54px)}}
@media(prefers-reduced-motion:reduce){.button,.site-header .nav-section,.social-nav,.footer-x{transition:none}}