/* Shared frame: main, story, community and life. Keep widths in one place. */
:root{--took-page-width:1480px;--took-page-gutter:28px;--took-home-inset:32px;--took-content-gap:24px}
@media(min-width:1600px){:root{--took-page-width:1600px}}
@media(max-width:700px){:root{--took-page-gutter:14px}}
@media(max-width:600px){:root{--took-home-inset:12px}}
body .header-inner,body .topbar-inner,body .home-widgets,body.took-content-page .page-shell,body .site-footer__inner{
  box-sizing:border-box;width:100%;max-width:var(--took-page-width);margin-left:auto;margin-right:auto;padding-left:var(--took-page-gutter);padding-right:var(--took-page-gutter)
}
/* Main already has this inset on its parent; mirror it, rather than double-padding it. */
body #home-page{padding-left:var(--took-home-inset);padding-right:var(--took-home-inset)}
body.took-content-page .page-shell,body .site-footer__inner{width:calc(100% - var(--took-home-inset) - var(--took-home-inset))}
body.took-content-page{background:#f5f6fb}
body.took-content-page .topbar-inner{gap:22px}
.took-content-page .page-shell{margin-bottom:48px}
.took-content-page .hero{margin:28px 0 24px;border-radius:22px;box-shadow:none}
.took-content-page .hero h1{font-size:clamp(30px,3.3vw,46px);line-height:1.25}
.took-content-page .hero p{font-size:16px;line-height:1.8}
.took-content-page .content-layout{grid-template-columns:minmax(0,1fr) 320px;gap:var(--took-content-gap)}
.took-content-page .content-layout>*,.took-content-page .side-column{min-width:0}
.took-content-page .section-head{padding:20px 24px}
.took-content-page .section-head h2{font-size:22px}
.took-content-page .section-head p,.took-content-page .post-context,.took-content-page .stat span{font-size:14px}
.took-content-page .feed{padding:4px 24px 12px}
.took-content-page .feed-toolbar{padding:16px 24px;flex-wrap:wrap}
.took-content-page .feed-search{min-height:44px}
.took-content-page .post-card h3{font-size:22px;line-height:1.5}
.took-content-page .post-excerpt{font-size:16px;line-height:1.8}
.took-content-page .post-footer{font-size:13px;flex-wrap:wrap}
.took-content-page .side-card{padding:24px}
.took-content-page .side-card h3{font-size:18px}
.took-content-page .principles,.took-content-page .side-list a{font-size:14px;line-height:1.8}
.took-content-page .community-card h3{font-size:17px}
.took-content-page .community-card p{font-size:14px;height:auto;min-height:45px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.took-content-page .community-meta{font-size:12px;flex-wrap:wrap}
.took-content-page .button,.took-content-page .button.small,.took-content-page .chip,.took-content-page .account-link{min-height:44px;font-size:14px}
.took-content-page .account-link{display:inline-flex;align-items:center;white-space:nowrap}
.took-content-page .dialog-close{width:44px;height:44px;flex:0 0 44px}
.took-content-page :is(button,a,input,select,textarea):focus-visible{outline:3px solid #7d59d5;outline-offset:3px}
.took-content-page [id]{scroll-margin-top:150px}
@media(max-width:1100px){.took-content-page .content-layout{grid-template-columns:minmax(0,1fr) 280px}.took-content-page .feed-search{flex-basis:100%}}
@media(max-width:960px){.took-content-page .content-layout{grid-template-columns:1fr}.took-content-page .side-column{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  body.took-content-page .topbar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding-top:8px;padding-bottom:8px}
  .took-content-page .topbar-inner>.brand{grid-column:1;grid-row:1;justify-self:start}
  .took-content-page .topbar-inner>.account-link{grid-column:2;grid-row:1}
  .took-content-page .topbar-inner>.primary-nav{grid-column:1/-1;grid-row:2;min-width:0;overflow-x:auto;padding-top:4px}
  .took-content-page .topbar-spacer,.took-content-page .topbar-search,.took-content-page .primary-nav .orbit-desktop{display:none}
  .took-content-page .primary-nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;padding:8px 16px;white-space:nowrap}
  .took-content-page .hero{padding:28px 22px;margin-top:16px}
  .took-content-page .hero p{font-size:15px}
  .took-content-page .section-head{padding:18px 16px}
  .took-content-page .section-head h2{font-size:20px}
  .took-content-page .feed-toolbar{padding:14px 16px}
  .took-content-page .feed{padding:0 16px 10px}
  .took-content-page .post-card h3{font-size:19px}
  .took-content-page .post-excerpt{font-size:15px}
  .took-content-page .side-column{grid-template-columns:1fr}
  .took-content-page .stat span{font-size:12px}
}