/* Smile Guide */
.sy-guide{padding:8.5rem 2.5rem 4rem;max-width:90rem;margin:0 auto}
.sy-crumbs{font-size:.875rem;color:#54514a;margin:0 0 1.5rem}
.sy-crumbs a{color:inherit}
.sy-guide-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3rem;align-items:end;margin-bottom:3.5rem}
.sy-guide-label{font-family:"Geist Mono",monospace;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#a8384a;margin:0 0 1rem}
.sy-guide h1{font-weight:300;font-size:clamp(3.25rem,7vw,7rem);line-height:.95;letter-spacing:-.04em;margin:0 0 1.5rem;color:#222}
.sy-guide h1 .sy-h1-sub{display:block;font-size:1.05rem;letter-spacing:0;line-height:1.4;font-weight:400;color:#54514a;margin-top:1rem}
.sy-guide-intro{font-size:1.125rem;line-height:1.5;color:#54514a;max-width:34ch;margin:0}
.sy-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem;padding:0;list-style:none}
.sy-pills a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid #d9d5c8;border-radius:999px;color:#222;text-decoration:none;font-size:.95rem;transition:background .2s,border-color .2s}
.sy-pills a:hover{border-color:#222}
.sy-pills a[aria-current]{background:#222;border-color:#222;color:#fffef8}
.sy-feature{position:relative;display:block;border-radius:.75rem;overflow:hidden;aspect-ratio:16/11;color:#fff;text-decoration:none}
.sy-feature img{width:100%;height:100%;object-fit:cover;object-position:18% center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sy-feature:hover img{transform:scale(1.03)}
.sy-feature-text{position:absolute;inset:auto 0 0 0;padding:1.75rem;background:linear-gradient(0deg,rgba(20,20,20,.82),rgba(20,20,20,.45) 60%,rgba(20,20,20,0))}
.sy-feature-tag{font-family:"Geist Mono",monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.sy-feature h2{font-weight:400;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.12;letter-spacing:-.02em;margin:.5rem 0 .75rem;max-width:24ch;color:#fff}
.sy-read{font-size:.95rem}
.sy-mhero{display:none}
.sy-grid-h{font-weight:300;font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.03em;margin:0 0 1.75rem}
.sy-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 1.25rem;list-style:none;margin:0;padding:0}
.sy-card a{display:block;color:#222;text-decoration:none}
.sy-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.4rem;display:block;background:#efede6;transition:opacity .3s}
.sy-card a:hover img{opacity:.88}
.sy-card h3{font-weight:400;font-size:1.15rem;line-height:1.3;margin:1rem 0 .6rem;letter-spacing:-.01em}
.sy-card .sy-read{color:#54514a}
.sy-cards.is-folded .sy-card:nth-child(n+25){display:none}
.sy-more{display:flex;justify-content:center;margin-top:2.5rem}
.sy-more button{min-height:48px;padding:0 1.5rem;border:1px solid #222;border-radius:.25rem;background:none;color:#222;font:inherit;font-size:1rem;cursor:pointer}
.sy-more button:hover{background:#222;color:#fffef8}
.sy-about{display:grid;grid-template-columns:1fr 1.6fr;gap:3rem;margin-top:5rem;padding-top:3rem;border-top:1px solid #e3ded3}
.sy-about h2{font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1.05;margin:0}
.sy-about p{font-size:1.1rem;line-height:1.6;color:#2f2d29;margin:0 0 1.25rem;max-width:44rem}
.sy-about p a{color:#a8384a;text-decoration:underline;text-underline-offset:.18em}
.sy-about .sy-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.sy-about .sy-actions a{display:inline-flex;align-items:center;min-height:48px;padding:0 1.2rem;border-radius:.25rem;text-decoration:none;font-size:1rem}
.sy-about .is-dark{background:#222;color:#fff}.sy-about .is-line{border:1px solid #222;color:#222}
.sy-about small{display:block;margin-top:1rem;color:#54514a;font-size:.95rem}
@media (max-width:991px){.sy-guide-top{grid-template-columns:minmax(0,1fr);gap:2rem}.sy-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sy-about{grid-template-columns:1fr;gap:1.25rem}}
@media (max-width:600px){.sy-guide{padding:6.5rem 1.25rem 3rem}.sy-cards{grid-template-columns:1fr;gap:2rem}
 .sy-feature{aspect-ratio:4/3}.sy-feature-text{padding:1.25rem}
 .sy-guide{padding-top:0;margin-top:-5.8rem}
 /* phone hero: the topic photo behind the title */
 .sy-guide-head{position:relative;margin:0 -1.25rem;padding:21.8rem 1.25rem 1.75rem;min-height:calc(72vh + 5.8rem);display:flex;flex-direction:column;justify-content:flex-end;color:#fff;overflow:hidden}
 .sy-guide-head{background:#1f1d1a}
 .sy-guide-head .sy-mhero{display:block;position:absolute;top:0;left:0;right:0;height:72%;z-index:-2}
 .sy-guide-head .sy-mhero img{width:100%;height:100%;object-fit:cover;object-position:22% center}
 .sy-guide-head::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,20,20,.6),rgba(20,20,20,0) 20%),linear-gradient(0deg,#1f1d1a 0%,#1f1d1a 32%,rgba(31,29,26,.55) 50%,rgba(31,29,26,0) 68%)}
 .sy-guide-head{isolation:isolate}
 .sy-guide-head .sy-crumbs,.sy-guide-head .sy-crumbs a,.sy-guide-head h1,.sy-guide-head .sy-guide-intro,.sy-guide-head h1 .sy-h1-sub{color:#fff}
 .sy-guide-head .sy-guide-label{color:#fff;opacity:.85}
 .sy-guide-head h1{font-size:3.4rem;margin-bottom:1rem}
 /* topics: one row you swipe (or drag with a mouse); the cut-off pill and the edge fade show there is more */
 .sy-pills{flex-wrap:nowrap;overflow-x:auto;margin:1.5rem -1.25rem 0;padding:0 1.25rem .25rem;scrollbar-width:none;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent)}
 .sy-pills.is-mid{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent)}
 .sy-pills.is-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);mask-image:linear-gradient(90deg,transparent,#000 12%)}
 .sy-pills.is-dragging{cursor:grabbing;scroll-snap-type:none}
 .sy-pills::-webkit-scrollbar{display:none}
 .sy-pills li{flex:none;scroll-snap-align:start;scroll-margin-left:1.25rem}
 .sy-pills a{white-space:nowrap;-webkit-user-drag:none}
 .sy-pills a{min-height:44px;font-size:.9rem;padding:0 .9rem}
 /* the featured article becomes a large plain card (the photo is already the hero) */
 .sy-feature{aspect-ratio:auto;color:#222;border-radius:0;overflow:visible}
 .sy-feature img{aspect-ratio:4/3;border-radius:.4rem;object-position:center}
 .sy-feature-text{position:static;background:none;padding:1rem 0 0}
 .sy-feature h2{color:#222;font-size:1.5rem}
 .sy-feature-tag{color:#a8384a}}
@media (prefers-reduced-motion:reduce){.sy-feature img,.sy-card img{transition:none}}

/* header glass (scripts/header_glass.py) */
.navigation .nav-bar.is-main,.navigation .mobile-navbar{background-color:rgba(255,254,248,.84)!important;
 -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 0 rgba(34,30,25,.06),0 10px 30px rgba(34,30,25,.08);
 transition:background-color .25s ease,box-shadow .25s ease}
.navigation .nav-link,.navigation .mobile-navbar .login-button,.navigation .mobile-navbar .login-button *{color:#222!important;transition:color .25s ease}
.navigation .nav-divider{background-color:rgba(34,30,25,.14)!important;transition:background-color .25s ease}
.navigation .menu-bar{background-color:#222!important;transition:background-color .25s ease}
.sy-logo-swap{position:relative;display:block;line-height:0}
.sy-logo-swap .is-white{position:absolute;left:0;top:0;height:100%;width:auto;opacity:0;transition:opacity .25s ease}
.sy-logo-swap .is-colour{transition:opacity .25s ease}
html.sy-over .navigation .nav-bar.is-main,html.sy-over .navigation .mobile-navbar{background-color:rgba(20,18,16,.24)!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html.sy-over .navigation .nav-link,html.sy-over .navigation .mobile-navbar .login-button,
html.sy-over .navigation .mobile-navbar .login-button *{color:#fff!important}
html.sy-over .navigation .nav-divider{background-color:rgba(255,255,255,.32)!important}
html.sy-over .navigation .menu-bar{background-color:#fff!important}
html.sy-over .sy-logo-swap .is-white{opacity:1}html.sy-over .sy-logo-swap .is-colour{opacity:0}
@media (prefers-reduced-transparency:reduce){
 .navigation .nav-bar.is-main,.navigation .mobile-navbar{background-color:#fffef8!important;-webkit-backdrop-filter:none;backdrop-filter:none}
 html.sy-over .navigation .nav-bar.is-main,html.sy-over .navigation .mobile-navbar{background-color:rgba(20,18,16,.72)!important}}
@media (prefers-reduced-motion:reduce){.navigation *,.sy-logo-swap img{transition:none!important}}