/* Mobile layouts use natural document flow and respect enlarged text. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:800px){
  html{scroll-padding-top:20px}
  .header{position:relative;top:auto;backdrop-filter:none}
  .nav{min-height:64px;height:auto;padding-block:10px;gap:12px}
  .brand{flex-shrink:0}.brand-mark{font-size:38px;letter-spacing:-4px}
  .brand-mark>span{font-size:29px}
  .nav-end{margin-left:auto;gap:12px;flex-shrink:0}
  .nav-join{display:none}
  .saved-trigger{min-width:44px;min-height:44px;justify-content:center;padding:4px;font-size:23px}
  .menu{min-width:44px;min-height:44px;padding:4px 10px;font-size:23px;line-height:1}
  .navlinks{top:100%;left:0;right:0;padding:12px 18px 18px;gap:2px;box-shadow:0 10px 18px #25282112;max-height:calc(100dvh - 84px);overflow:auto}
  .navlinks a{font-size:14px;min-height:44px;padding:11px 12px}
  .navlinks .mobile-community{display:block;background:var(--text);color:var(--bg);border-radius:5px;margin-top:6px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hero h1{font-size:clamp(44px,11.5vw,72px);line-height:1.12;letter-spacing:-.04em;max-width:100%}
  .hero .heading-star{display:none}
  .hero-lead{font-size:19px;line-height:1.6;letter-spacing:-.02em}
  .hero-desc{font-size:14px;line-height:1.75;max-width:560px}
  .hero .actions{gap:18px 22px;align-items:center}
  .hero .btn{min-height:48px;font-size:13px;padding:13px 18px}
  .hero .text-link{font-size:13px;min-height:44px}
  .hero-note{margin-top:24px;gap:0;flex-wrap:wrap}
  .hero-note>span:last-child{font-size:12px;line-height:1.6}
  .hero-note>span:last-child{min-width:0}
  .ticket strong,.hero h1,.start-grid h2,.project h3{overflow-wrap:anywhere}
  .hero-art{display:block;position:relative;isolation:auto;width:100%;max-width:560px;height:auto;transform:none;margin:28px 0 0;padding:0}
  .hero-art>.orbit,.hero-art>.dice,.hero-art>.pawn,.hero-art>.art-star,.hero-art>.small-star,.hero-art>.art-label{display:none}
  .hero-art .ticket{position:static;transform:none;width:100%;height:auto;padding:23px 25px;border-radius:8px;box-shadow:none;overflow:visible}
  .ticket:before,.ticket:after{display:none}
  .ticket>span{font-size:9px;line-height:1.7;letter-spacing:1.2px;display:block}
  .ticket strong{font-size:26px;line-height:1.4;letter-spacing:-.03em;margin-top:15px}
  .ticket-line{margin:20px -25px 16px}
  .ticker{transform:none;margin-top:0;padding:13px 0}
  .ticker>div{justify-content:flex-start;padding-left:20px;gap:24px}
  .start-grid{gap:32px}
  .start-grid h2{font-size:clamp(30px,7.8vw,43px);line-height:1.25;letter-spacing:-.025em;word-spacing:normal;margin:20px 0}
  .start-grid h2 br{display:initial}
  .start-grid>div>p:not(.eyebrow){font-size:14px;line-height:1.75}
  .start-grid>div>p br{display:initial}
  .start-grid .text-link{font-size:13px;line-height:1.6;min-height:44px}
  .onboarding{padding-top:0;min-width:0}
  .onboarding label{gap:14px;padding:22px 0;align-items:flex-start}
  .onboarding input{width:22px;height:22px;margin:2px 0 0;flex:0 0 22px}
  .onboarding label>span{display:block;min-width:0;flex:1}
  .onboarding label b{font-size:11px;line-height:1.6;display:inline;margin-right:10px}
  .onboarding strong{font-size:15px;line-height:1.6;font-weight:500;display:inline}
  .onboarding small{display:block;font-size:13px;line-height:1.75;margin-top:9px}
  .onboarding small a{line-height:inherit;overflow-wrap:break-word}
  .onboarding #onboard-status{font-size:12px;line-height:1.7}
  .project{min-height:0}
  .project h3{font-size:25px;line-height:1.35;letter-spacing:-.025em}
  .project h3 small{display:inline-block;vertical-align:middle;letter-spacing:0;line-height:1.4;margin-left:5px}
  .project p{font-size:14px;line-height:1.75}
  .project-drawing{height:125px;flex:none;margin:12px 0 15px}
  .project-top{min-height:28px;gap:16px;line-height:1.7}
  .project-tags{font-size:9px;line-height:1.8}
  .project-link{font-size:13px;min-height:56px;gap:20px;line-height:1.6}
  .section-head h2,h2{line-height:1.25;letter-spacing:-.025em}
  .section-head p{font-size:13px;line-height:1.75}
  .section-head .text-link{font-size:13px;line-height:1.6;min-height:44px}
  .project-hero h1,.page-hero h1{font-size:clamp(34px,9.5vw,56px);line-height:1.2;letter-spacing:-.03em;overflow-wrap:break-word}
  .project-hero .lead,.page-hero .lead{font-size:15px;line-height:1.75}
  .project-hero .actions{gap:18px}
  .resource p,.feed-item p{font-size:13px;line-height:1.75}
  .resource a{font-size:15px;line-height:1.5}
  .resource a:after{position:static;display:inline;margin-left:8px}
  .resource a{padding-right:0}
  .faq summary{font-size:15px;line-height:1.6;align-items:flex-start}
  .faq summary>span{flex-shrink:0;margin-top:3px}
  .faq p{font-size:14px;line-height:1.75}
  .filters{gap:8px}
  .filters button,.feed-tabs button{min-height:42px;padding:10px 14px;font-size:12px;line-height:1.5}
  .feed-tabs{flex-wrap:wrap}
  .search-box input{font-size:16px;line-height:1.5}
  .agenda-toolbar{align-items:flex-start;gap:15px}
  .agenda-status{font-size:12px;line-height:1.7;min-width:0}
  .agenda-toolbar>.text-link{min-height:44px;font-size:12px;align-items:flex-start;padding-top:2px}
  .event-card,.event-card.compact{display:grid;grid-template-columns:44px minmax(0,1fr) 28px;gap:14px;padding:20px 16px}
  .event-day,.compact .event-day{grid-column:1;grid-row:1;display:block;border:0;padding:0;margin:0;min-width:0}
  .event-day b,.compact .event-day b{font-size:28px;line-height:1.15}
  .event-day>span{font-size:10px;line-height:1.6}
  .event-content,.compact .event-content{grid-column:2;grid-row:1;padding:0;min-width:0}
  .event-save{position:static;grid-column:3;grid-row:1;align-self:start;justify-self:end;min-width:28px;min-height:38px;padding:0;font-size:25px}
  .event-card h3,.compact h3{font-size:17px;line-height:1.5;letter-spacing:-.02em;padding:0;min-height:0;overflow-wrap:break-word}
  .event-meta,.compact .event-meta{font-size:9px;line-height:1.7;letter-spacing:.4px;padding:0}
  .event-when,.compact .event-when{font-size:12px;line-height:1.65}
  .event-place,.compact .event-place{font-size:12px;line-height:1.65;min-height:0;overflow-wrap:anywhere}
  .event-description{font-size:13px;line-height:1.75}
  .event-actions{align-items:flex-start;gap:4px 18px}
  .event-actions .text-link,.compact .event-actions .text-link{font-size:12px;line-height:1.6;min-height:40px;white-space:normal;text-align:left}
  .home-events-note,.timezone-note{font-size:11px;line-height:1.7}
  .calendar-band p,.agenda-disclaimer p{font-size:13px;line-height:1.75}
  .calendar-band .btn,.calendar-band .text-link{font-size:13px;line-height:1.6;min-height:44px}
  .footer-grid a,.footer-grid p{font-size:12px;line-height:1.8}
  .footer-grid{min-width:0;gap:25px}
  .footer-grid>div{min-width:0}
  .footer-bottom{font-size:11px;line-height:1.7}
  .social-title h2{font-size:27px;line-height:1.3}
  .social-links a{font-size:13px;min-height:48px;line-height:1.6}
  .btn,.text-link{max-width:100%;white-space:normal}
  dialog{padding:22px 18px}
  .dialog-head h2{font-size:25px;line-height:1.3}
  .saved-row a{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
  .toast{width:max-content;max-width:calc(100% - 32px);font-size:13px;line-height:1.6;text-align:center;bottom:18px}
}
@media(min-width:801px){.mobile-community{display:none}}
@media(max-width:520px){
  .container{width:calc(100% - 32px)}
  .hero{padding:30px 0 36px}
  .hero h1{font-size:clamp(43px,12.4vw,62px);margin:20px 0}
  .hero-lead{font-size:18px;line-height:1.65}
  .hero .actions{gap:12px 20px}
  .hero .btn,.hero .text-link{font-size:13px}
  .section{padding:46px 0}
  .home-agenda{padding-bottom:0}
  h2,.section-head h2{font-size:clamp(28px,8vw,35px)}
  .project-drawing{height:110px}
  .game-drawing>span:first-child{font-size:100px}
  .mini-die{font-size:72px;right:20%;top:18px}
  .league-drawing svg{height:110px}
  .city-drawing{padding:10px 15px}
  .city-drawing i:nth-child(2){height:90px}
  .project-hero,.page-hero{padding:36px 0}
  .onboarding label{padding:20px 0}
  .footer-top{gap:18px}
  .online-strip{align-items:flex-start}
  .online-strip b{font-size:13px;line-height:1.6}
  .online-strip div>span{font-size:11px;line-height:1.7}
}
@media(max-width:360px){
  .hero .actions{align-items:stretch;flex-direction:column;gap:8px}
  .hero .actions .text-link{justify-content:center}
  .hero-note>span:last-child{margin-left:8px;font-size:11px}
  .event-card,.event-card.compact{grid-template-columns:36px minmax(0,1fr) 25px;gap:9px;padding:18px 12px}
  .event-card h3,.compact h3{font-size:16px}
  .footer-grid{grid-template-columns:1fr}
}