/* NYMD Center network — shared page shell. Palette comes from per-site tokens set in the page ; everything else (scale, rhythm, motion) is shared so the family reads as related. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased} img,video{max-width:100%;height:auto;display:block} a{color:var(--accent)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)} /* --- header --- */ .site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)} .site-head__in{display:flex;align-items:center;gap:1.25rem;height:72px} .brand{font-family:var(--display);font-weight:600;font-size:1.18rem;color:var(--navy); text-decoration:none;letter-spacing:-.01em;margin-right:auto} .nav{display:flex;gap:1.5rem;align-items:center} .nav a{color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:500; opacity:.82;transition:opacity var(--dur-fast) var(--ease)} .nav a:hover{opacity:1} .btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none; padding:.68rem 1.35rem;border-radius:999px;font-weight:600;font-size:.93rem; transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .btn:hover{background:var(--accent-light);transform:translateY(-1px)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn--ghost:hover{background:var(--paper-2);color:var(--ink)} .nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer} /* --- hero --- */ .hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate} .hero video,.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(105deg,rgba(8,20,28,.86) 0%,rgba(8,20,28,.6) 55%,rgba(8,20,28,.3) 100%)} .hero__in{padding:clamp(4rem,11vw,8.5rem) 0 clamp(3rem,7vw,5.5rem);max-width:44rem} .hero h1{font-family:var(--display);font-size:var(--h1);line-height:1.06;margin:0 0 1rem; font-weight:600;letter-spacing:-.02em} .hero p{font-size:clamp(1rem,.94rem+.3vw,1.18rem);opacity:.92;margin:0 0 1.9rem;max-width:38rem} .hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)} .hero .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff} .eyebrow{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; opacity:.75;margin:0 0 .9rem} /* --- page body --- */ .page{padding:clamp(2.5rem,6vw,4.5rem) 0} .page__head{max-width:46rem;margin:0 0 2.2rem} .page__head h1{font-family:var(--display);font-size:var(--h1);line-height:1.1; margin:0 0 .6rem;font-weight:600;letter-spacing:-.02em;color:var(--navy)} .page__head p{font-size:1.08rem;opacity:.78;margin:0} .prose{max-width:44rem} .prose h2{font-family:var(--display);font-size:var(--h2);margin:2.4rem 0 .7rem; font-weight:600;color:var(--navy);letter-spacing:-.015em;line-height:1.2} .prose h3{font-size:var(--h3);margin:1.9rem 0 .5rem;font-weight:650;color:var(--navy)} .prose p{margin:0 0 1.15rem} .prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.3rem} .prose li{margin:0 0 .5rem} .prose blockquote{margin:1.8rem 0;padding:.3rem 0 .3rem 1.3rem; border-left:3px solid var(--accent);font-size:1.06rem;opacity:.9} .prose img{border-radius:var(--radius);margin:1.6rem 0} .prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem} .prose th,.prose td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line)} .prose th{font-weight:650;color:var(--navy)} /* --- reveal on scroll (shared motion signature) --- */ [data-reveal]{opacity:0;transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)} [data-reveal].is-in{opacity:1;transform:none} /* --- cta band --- */ .cta{background:var(--navy);color:#fff;padding:clamp(2.5rem,6vw,4rem) 0;margin-top:3rem} .cta h2{font-family:var(--display);font-size:var(--h2);margin:0 0 .6rem;font-weight:600} .cta p{opacity:.85;margin:0 0 1.5rem;max-width:34rem} /* --- footer --- */ .site-foot{background:var(--paper-2);border-top:1px solid var(--line); padding:2.6rem 0 1.4rem;font-size:.92rem} .site-foot__cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1.8rem} .site-foot h4{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; margin:0 0 .6rem;opacity:.6;font-weight:650} .site-foot a{color:var(--ink);text-decoration:none;opacity:.82} .site-foot a:hover{opacity:1;text-decoration:underline} .site-foot address{font-style:normal;opacity:.82;line-height:1.7} .legal{border-top:1px solid var(--line);padding-top:1.1rem;font-size:.82rem;opacity:.62} @media (max-width:820px){ .nav{position:fixed;inset:72px 0 auto;background:var(--paper);flex-direction:column; align-items:stretch;gap:0;padding:.5rem 0 1rem;border-bottom:1px solid var(--line); transform:translateY(-120%);transition:transform var(--dur) var(--ease)} .nav.is-open{transform:none} .nav a{padding:.85rem clamp(1rem,4vw,2rem)} .nav-toggle{display:block;order:3} .nav .btn{margin:.6rem clamp(1rem,4vw,2rem)} } /* Shusterman network footer. Self-contained and theme-neutral: it inherits the host site's font and adapts to a light or dark surface. A site can match it exactly by setting any of the --sn-* variables once, anywhere in its own stylesheet. */ .sn-network{ --sn-bg: transparent; --sn-fg: currentColor; --sn-muted: color-mix(in srgb, currentColor 62%, transparent); --sn-rule: color-mix(in srgb, currentColor 15%, transparent); --sn-accent: currentColor; --sn-radius: 10px; font-family: inherit; background: var(--sn-bg); color: var(--sn-fg); border-top: 1px solid var(--sn-rule); padding: 2.5rem 1.25rem 2rem; } .sn-network__inner{ max-width: 1100px; margin: 0 auto; } .sn-network__label{ font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--sn-muted); margin: 0 0 .3rem; } .sn-network__sublabel{ font-size: .84rem; color: var(--sn-muted); margin: 0 0 1.4rem; line-height:1.5; } .sn-network__grid{ list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .sn-network__item{ padding: .5rem 0; border-bottom: 1px solid var(--sn-rule); } .sn-network__link{ color: var(--sn-accent); text-decoration: none; font-weight: 600; font-size: .95rem; display: inline-block; } .sn-network__link:hover, .sn-network__link:focus-visible{ text-decoration: underline; } .sn-network__purpose{ display: block; font-size: .8rem; color: var(--sn-muted); margin-top: .1rem; line-height: 1.45; } .sn-network__item--hub .sn-network__link::after{ content: "— main practice"; font-weight: 400; font-size: .75rem; color: var(--sn-muted); margin-left: .4rem; letter-spacing: .01em; } @media (max-width: 480px){ .sn-network{ padding: 2rem 1rem 1.5rem; } .sn-network__grid{ grid-template-columns: 1fr; } }