/* type: San Francisco on Apple devices, Inter elsewhere; headings keep the gallery serif */
body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a,button{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* frosted header, hairline edge */
.hdr{background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(20,20,20,.08)}

/* house rule: square corners on chips and contents links too */
.toc a,.tv-ctl button,.chip,.chips a,.f-chip{border-radius:0!important}

/* touch rows: smooth, snapping, no scrollbars on touch screens */
.car-row,.rail,.eprail .eprow,.ww-r,.scr-tabs{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.car-row>li,.rail>*,.eprow>*{scroll-snap-align:start}
@media (hover:none){.car-row,.rail,.eprow,.ww-r,.scr-tabs{scrollbar-width:none}.car-row::-webkit-scrollbar,.rail::-webkit-scrollbar,.eprow::-webkit-scrollbar,.ww-r::-webkit-scrollbar,.scr-tabs::-webkit-scrollbar{display:none}}

/* gentle motion on pointer devices only */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
 a.card,.car-row li,.mm2-i{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1)}
 a.card:hover,.car-row li:hover{transform:translateY(-2px)}
}


/* phones: tighter, even rhythm; no dead space */
@media (max-width:700px){
 main .sec{padding-top:44px!important;padding-bottom:4px!important}
 .home-breath{margin:44px 0!important}
 .wg-today{margin:24px 0!important}
 .wg-today .wg-name{margin:32px auto!important}
 .car{margin:36px 0 12px!important;padding-top:20px!important}
 .otp{margin:20px 0 4px!important}
 .otp ul{columns:1}
 h1{letter-spacing:-.01em}
 .lede,.hero .lede{font-size:17px!important;line-height:1.5!important}
 main p,main li{font-size:17px;line-height:1.6}
 .btn,.btns a,.btns button{min-height:48px;display:inline-flex!important;align-items:center;justify-content:center}
 .ftr{padding-top:36px!important}
 .car-row{grid-auto-columns:82%!important;gap:14px!important}
 .scr-tabs a{min-height:44px;display:inline-flex;align-items:center}
}

/* tablets: two even columns instead of cramped threes and fours */
@media (min-width:701px) and (max-width:1100px){
 main .sec{padding-top:56px!important}
 .home-breath{margin:64px 0!important}
 .car-row{grid-auto-columns:minmax(240px,40%)!important}
}