/* The home page below the hero (Mason's picks, 2026-09-27; the board was /lab/concepts/). White page, the dark
   navy (#0C121D) only, plain black-and-white photographs with white text over darkened photographs, Spectral
   ExtraLight for large type, Source Sans 3 for reading, no italics, no small section numbers.
     overview      the figures with the thin line between the two columns, counting up
     statement     over Midtown at dusk, its words lighting as they rise
     Who we are    the headline beside the text, a wide photograph beneath
     What we do    the four practices as one photo mosaic, the text on each photograph
     Why Praxus    the section holds while the four reasons slide sideways over their photographs
     Research      every note in one row, stepped with the arrow buttons
   The hero keeps its own stylesheets. Every rule here is confined to .mn, the new sections, so the site's older
   styles never reach them; class names the older stylesheets also use carry an hm- prefix. Everything reads
   complete without JavaScript; home.js adds the motion (html.hm-mo) and the arrows. */

/* Open Font License (assets/fonts/OFL-*.txt), latin subset from @fontsource 5.3.0 */
@font-face{font-family:'PX Spectral';font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/spectral-200.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Spectral';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/spectral-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/spectral-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Source Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PX Source Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- system ---------- */
.mn{--paper:#FFFFFF;--navy:#0C121D;--ink:#0C121D;--text:#2E3A4B;--mute:#5D6B7E;--rule:#D5DBE3;--photo:#06080B;
  --serif:'PX Spectral',Georgia,serif;--sans:'PX Source Sans',system-ui,sans-serif;--g:24px;--pad:60px;--navh:96px;
  --ease:cubic-bezier(.2,.7,.2,1);--wipe:cubic-bezier(.76,0,.24,1);
  position:relative;z-index:1;display:block;background:var(--paper);color:var(--text);font:400 18px/1.6 var(--sans);letter-spacing:normal;
  text-align:left;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* the older home stylesheets paint main light grey (.v3-e main); the new sections sit on white */
.mn.mn{background:var(--paper)}
.mn *,.mn *::before,.mn *::after{box-sizing:border-box}
.mn :is(h1,h2,h3,h4,p,ul,ol,li,figure,address,time){margin:0;padding:0;border:0}
.mn :is(ul,ol){list-style:none}
.mn address{font-style:normal}
.mn a{color:inherit;text-decoration:none}
.mn img{display:block;max-width:100%;height:auto}
.mn button{font:inherit;color:inherit}
.mn :is(em,i){font-style:normal}
.mn .wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.mn .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
.mn .hm-sec{padding:120px 0 170px}
.mn .ph{overflow:hidden}
.mn .ph img{width:100%;height:100%;object-fit:cover}
.mn .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* section labels: the name alone, no number and no line under it (Mason, 2026-10-14: "not lines everywhere"), in the
   headlines' serif, written normally and still grey (Mason, 2026-10-24: "i think 2 serif is probably the right
   choice"). Research is named once, by its headline. */
.mn .lab{position:relative;display:flex;margin-bottom:26px;font:400 24px/1.25 var(--serif);letter-spacing:-.006em;color:var(--mute)}
.mn .lab .lab__t{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}

/* type */
.mn h2{font:300 64px/1.06 var(--serif);letter-spacing:-.022em;color:var(--ink);text-transform:none}
.mn h3{font-weight:400;color:var(--ink);text-transform:none;letter-spacing:normal}
.mn .lede{margin-top:28px;max-width:34em;font:400 20px/1.6 var(--sans);color:var(--text)}
.mn .head{grid-column:1/span 8}

/* buttons: a solid block; the label rolls up while a copy rolls in, and nothing turns blue */
.mn .hm-btn{position:relative;display:inline-flex;align-items:center;min-height:54px;margin-top:44px;padding:16px 28px;border:0;border-radius:0;box-shadow:none;
  background:var(--navy);color:#fff;font:600 15px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;white-space:nowrap;transition:background-color .45s var(--ease)}
.mn .hm-btn:is(:hover,:focus-visible){background:var(--navy);color:#fff}
.mn .hm-btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.mn .roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.mn .roll>span{display:block;transition:transform .52s var(--wipe)}
.mn .roll>.roll-b{position:absolute;left:0;top:100%;white-space:nowrap}
.mn .hm-btn:is(:hover,:focus-visible) .roll>span{transform:translateY(-100%)}

/* ---------- the overview: four numbers at the scale of the hero, the hero's thin divider between the columns ---------- */
.mn .figs-sec{padding-top:96px;padding-bottom:160px}
.mn .figs-sec .lab{margin-bottom:64px}
.mn .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.mn .fig{padding:8px 0 96px}
.mn .fig:nth-child(n+3){padding-bottom:8px}
.mn .fig:nth-child(even){padding-left:56px;border-left:1px solid var(--rule)}
.mn .fig__n{display:block;font:300 168px/.9 var(--serif);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.mn .fig__l{display:block;margin-top:28px;font:600 12px/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ---------- the statement, set in the sky over Midtown at dusk ---------- */
.mn .hm-band{position:relative;height:880px;overflow:hidden;background:var(--photo)}
.mn .band__ph{position:absolute;inset:0;overflow:hidden}
.mn .band__ph img{position:absolute;left:0;top:-56px;width:100%;max-width:none;height:calc(100% + 112px);object-fit:cover;will-change:transform}
.mn .band__ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,11,.72) 0%,rgba(6,8,11,.44) 30%,rgba(6,8,11,.1) 58%,rgba(6,8,11,.3) 100%),linear-gradient(90deg,rgba(6,8,11,.46),rgba(6,8,11,0) 56%)}
/* text straight on a photograph */
.mn .over{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-start;max-width:1440px;margin:0 auto;padding:116px var(--pad) 0;
  color:#fff;--ink:#FFFFFF;--text:rgba(255,255,255,.84);--mute:rgba(255,255,255,.64);--rule:rgba(255,255,255,.32)}
.mn .stmt__p{max-width:13.2em;font:300 56px/1.12 var(--serif);letter-spacing:-.014em;color:#fff}
.mn .stmt__b{color:var(--mute)}
.mn .stmt__end{margin-top:36px;font:400 56px/1.12 var(--serif);letter-spacing:-.014em;color:#fff}

/* ---------- Who we are ---------- */
.mn .who__h{grid-column:1/span 7}
.mn .who__txt{grid-column:8/span 5;padding-top:14px}
.mn .who__txt .lede{margin-top:0}
.mn .who__ph{margin-top:110px;aspect-ratio:12/5}

/* ---------- What we do: the four practices as one photo mosaic, on white ---------- */
.mn .mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:400px 400px 440px;gap:var(--g);margin-top:96px}
.mn .mo{position:relative;min-width:0}
.mn .mo--cf{grid-column:1/span 7;grid-row:1/span 2}
.mn .mo--cm{grid-column:8/span 5;grid-row:1}
.mn .mo--ma{grid-column:8/span 5;grid-row:2}
.mn .mo--in{grid-column:1/-1;grid-row:3}
.mn .mo__a{position:absolute;inset:0;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.mn .mo__a:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.mn .mo__ph{position:absolute;inset:0;background:var(--photo)}
.mn .mo__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,11,.06) 0%,rgba(6,8,11,.36) 44%,rgba(6,8,11,.88) 100%)}
.mn .mo--in .mo__ph::after{background:linear-gradient(90deg,rgba(6,8,11,.88) 0%,rgba(6,8,11,.62) 44%,rgba(6,8,11,.1) 82%)}
.mn .mo__ph img{transition:transform 1.4s var(--ease)}
.mn .mo__a:is(:hover,:focus-visible) .mo__ph img,.hm-mo .mn .mo__a:is(:hover,:focus-visible) .mo__ph.in img{transform:scale(1.045)}
.mn .mo__t{position:relative;padding:0 40px 38px;max-width:36em}
.mn .mo--cf .mo__t{padding:0 52px 52px}
.mn .mo--in .mo__t{max-width:50%;align-self:center;padding:0 52px}
.mn .mo h3{font:300 42px/1.04 var(--serif);letter-spacing:-.024em;color:#fff}
.mn .mo--cf h3{font-size:72px;letter-spacing:-.03em}
.mn .mo--in h3{font-size:56px}
.mn .mo p{margin-top:16px;font:400 16.5px/1.58 var(--sans);color:rgba(255,255,255,.86)}
.mn .mo--cf p{font-size:18px;max-width:30em}
/* a quiet link line under text on a photograph */
.mn .go{display:inline-block;margin-top:20px;font:400 17px/1.3 var(--serif);color:rgba(255,255,255,.66);transition:color .4s ease}
.mn a:is(:hover,:focus-visible) .go{color:#fff}

/* ---------- Why Praxus: the reasons slide sideways over their photographs ---------- */
.mn .why--film{padding-bottom:120px}
.mn .film{position:relative;margin-top:72px}
.mn .film__track{display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  --lead:max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)));padding-left:var(--lead);scroll-padding-left:var(--lead)}
.mn .film__track::-webkit-scrollbar{display:none}
.mn .film__p{flex:none;width:min(74vw,1080px);scroll-snap-align:start}
.mn .film__p:last-child{margin-right:var(--lead)}
.mn .film__in{position:relative;display:flex;align-items:flex-end;height:min(70vh,680px);min-height:500px;overflow:hidden;color:#fff;background:var(--photo)}
.mn .film__ph{position:absolute;inset:0}
.mn .film__ph img{width:100%;max-width:none;height:100%;object-fit:cover}
.mn .film__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,11,.84) 0%,rgba(6,8,11,.6) 42%,rgba(6,8,11,.14) 82%),linear-gradient(0deg,rgba(6,8,11,.4),rgba(6,8,11,0) 46%)}
.mn .film__t{position:relative;max-width:40em;padding:0 56px 56px}
.mn .film__t h3{max-width:12em;font:300 50px/1.05 var(--serif);letter-spacing:-.026em;color:#fff}
.mn .film__t p{margin-top:24px;max-width:36em;font:400 17px/1.62 var(--sans);color:rgba(255,255,255,.86)}
/* with motion, on a wide screen: the section holds under the menu bar and scrolling moves the row (home.js sets the height) */
@media (min-width:901px){
  .hm-mo .mn .film__pin{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));min-height:560px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .hm-mo .mn .film__track{overflow:visible;scroll-snap-type:none;will-change:transform}
}

/* ---------- Research: every note in one row, stepped with the arrow buttons ---------- */
.mn .hm-res{padding-top:40px;overflow:hidden}
.mn .res__top{align-items:end}
.mn .head--res{grid-column:1/span 7}
.mn .res__ctl{grid-column:9/span 4;justify-self:end;display:flex;align-items:center;gap:20px}
.mn .res__ctl .hm-btn{margin-top:0}
.mn .res__nav{display:flex;gap:8px}
/* the arrow buttons: solid squares; on hover the arrow slides out and a copy slides in, as the Roll buttons do */
.mn .res__b{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:var(--navy);color:#fff;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.mn .res__i{position:relative;display:block;width:22px;height:22px;overflow:hidden}
.mn .res__b--prev .res__i{transform:scaleX(-1)}
.mn .res__i svg{position:absolute;left:0;top:0;display:block;transition:transform .52s var(--wipe)}
.mn .res__i svg+svg{transform:translateX(-150%)}
.mn .res__b:is(:hover,:focus-visible):not(:disabled) .res__i svg{transform:translateX(150%)}
.mn .res__b:is(:hover,:focus-visible):not(:disabled) .res__i svg+svg{transform:none}
.mn .res__b:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mn .res__b:disabled{background:#E7E8EA;color:#9B9EA3;cursor:default}
.mn .slide{margin-top:80px}
.mn .slide__track{display:flex;gap:var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  --lead:max(var(--pad),calc((100vw - 1440px) / 2 + var(--pad)));padding-left:var(--lead);scroll-padding-left:var(--lead)}
.mn .slide__track::-webkit-scrollbar{display:none}
.mn .slide__track:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.mn .slide__p{flex:none;width:clamp(300px,29vw,420px);scroll-snap-align:start}
.mn .slide__p:last-child{margin-right:var(--lead)}
.mn .card{display:block;color:inherit}
.mn .card:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.mn .card .ph{aspect-ratio:3/2;margin-bottom:28px;background:var(--photo)}
.mn .card .ph img{transition:transform 1.2s var(--ease)}
.mn .card:hover .ph img{transform:scale(1.035)}
.mn .card time{font:400 16px/1.3 var(--serif);color:var(--mute)}
.mn .card h3{margin:14px 0 18px;font:300 26px/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.mn .card__more{font:400 17px/1.3 var(--serif);color:var(--ink)}

/* ---------- motion (home.js adds html.hm-mo; with ?still or reduced motion none of this applies) ---------- */
.hm-mo .mn .ph[data-rv]{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--wipe)}
.hm-mo .mn .ph[data-rv] img{transform:scale(1.08);transition:transform 1.9s var(--ease)}
.hm-mo .mn .ph[data-rv].in{clip-path:inset(0)}
.hm-mo .mn .ph[data-rv].in img{transform:none}
.hm-mo .mn .card:hover .ph.in img{transform:scale(1.035)}
.hm-mo .mn .mo--cm .mo__ph{transition-delay:.12s}
.hm-mo .mn .mo--ma .mo__ph{transition-delay:.2s}
.hm-mo .mn .band--stmt .w{opacity:.26;transition:opacity .45s ease}
.hm-mo .mn .band--stmt .w.on{opacity:1}
/* headings rise into place word by word (home.js wraps each word) */
.hm-mo :is(.mn,.end) [data-rise] .rw{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .16em;margin:-.08em 0 -.16em}
.hm-mo :is(.mn,.end) [data-rise] .rw>span{display:inline-block;transform:translateY(112%);transition:transform 1.05s var(--ease)}
.hm-mo :is(.mn,.end) [data-rise].in .rw>span{transform:none}
/* text that rises into place over a photograph */
.hm-mo :is(.mn,.end) [data-in]{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.hm-mo :is(.mn,.end) [data-in].in{opacity:1;transform:none}
.hm-mo .mn .mo__t[data-in]{transition-delay:.45s}
.hm-mo .end .end__ph img{will-change:transform}
@media (prefers-reduced-motion:reduce){.mn *{transition:none!important}}

/* ---------- phones ---------- */
@media (max-width:900px){
  .mn{--pad:20px;font-size:17px}
  .mn .grid>*{grid-column:1/-1!important}
  .mn .hm-sec{padding:72px 0 96px}
  .mn .lab{margin-bottom:18px;font-size:21px}
  .mn h2{font-size:40px}
  .mn .lede{font-size:18px}
  /* overview */
  .mn .figs-sec{padding:64px 0 88px}
  .mn .figs-sec .lab{margin-bottom:48px}
  .mn .figs{grid-template-columns:minmax(0,1fr)}
  .mn .fig,.mn .fig:nth-child(n+3){padding:0 0 52px}
  .mn .fig:nth-child(even){padding-left:0;border-left:0}
  .mn .fig:last-child{padding-bottom:0}
  .mn .fig__n{font-size:100px}
  /* statement */
  .mn .hm-band{height:auto;min-height:620px;display:flex;flex-direction:column;justify-content:flex-start}
  .mn .band__ph img{top:-28px;height:calc(100% + 56px);object-position:66% 50%}
  .mn .over{position:relative;padding:64px var(--pad) 260px}
  .mn .stmt__p,.mn .stmt__end{font-size:31px}
  /* who we are */
  .mn .who__txt{margin-top:26px;padding-top:0}
  .mn .who__ph{margin-top:48px;aspect-ratio:4/3}
  /* what we do: one photograph under the other, the text on each */
  .mn .mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:16px;margin-top:48px}
  .mn .mo{grid-column:1!important;grid-row:auto!important}
  .mn .mo__a{position:relative;inset:auto;min-height:440px}
  .mn .mo__ph::after,.mn .mo--in .mo__ph::after{background:linear-gradient(180deg,rgba(6,8,11,.1) 0%,rgba(6,8,11,.58) 38%,rgba(6,8,11,.92) 72%)}
  .mn .mo__t,.mn .mo--cf .mo__t,.mn .mo--in .mo__t{max-width:none;align-self:flex-end;padding:180px 22px 26px}
  .mn .mo h3,.mn .mo--cf h3,.mn .mo--in h3{font-size:36px}
  .mn .mo p,.mn .mo--cf p{font-size:16px}
  /* why praxus: swipe the row */
  .mn .why--film{padding-bottom:72px}
  .mn .film{margin-top:44px}
  .mn .film__p{width:86vw}
  .mn .film__in{height:auto;min-height:560px}
  .mn .film__ph::after{background:linear-gradient(180deg,rgba(6,8,11,.12) 0%,rgba(6,8,11,.62) 34%,rgba(6,8,11,.92) 70%)}
  .mn .film__t{padding:200px 22px 26px}
  .mn .film__t h3{font-size:32px}
  .mn .film__t p{margin-top:18px;font-size:15.5px}
  /* research: swipe the row; the arrows sit under the introduction */
  .mn .hm-res{padding-top:0}
  .mn .res__ctl{justify-self:start;flex-wrap:wrap;margin-top:32px;gap:16px}
  .mn .slide{margin-top:40px}
  .mn .slide__p{width:80vw}
  .mn .card h3{font-size:23px}
  /* a flick moves either row one photograph or one note at a time instead of skipping past two (2026-10-17) */
  .mn .film__p,.mn .slide__p{scroll-snap-stop:always}
}