/* Subpages below the hero: About, Research, the research notes, Contact and
   Disclosures (Mason's picks, 2026-09-27). Same system as the home page: white
   page, deep navy #071426 only, black-and-white photographs, Spectral at scale,
   no italics, no radii, no shadows. Content lines up with the site's rail (the
   hero's left edge) at every width. Everything reads complete without
   JavaScript; subpages.js adds the reveals, the lighting statement, the drift,
   the Research carousel and its topic filter, and the Disclosures index. */
/* Open Font License (assets/fonts/OFL-*.txt), latin subset from @fontsource 5.3.0 (the 200 and
   Source Sans 3 files are the practice pages' own). Spectral is declared under its own name here so
   the heroes keep the site's Spectral files untouched. */
@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:'Source Sans 3';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:'Source Sans 3';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}

.px{--paper:#FFFFFF;--mist:#F3F5F8;--navy:#071426;--ink:#071426;--text:#2E3A4B;--mute:#5D6B7E;--rule:#D5DBE3;
  --serif:'PX Spectral',Georgia,serif;--sans:'Source Sans 3',system-ui,sans-serif;
  --pad:clamp(24px,calc(4vw / var(--z,1)),80px);--max:1760px;--g:24px;
  --ease:cubic-bezier(.2,.7,.2,1);--wipe:cubic-bezier(.76,0,.24,1);
  background:var(--paper);color:var(--text);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.px *,.px *::before,.px *::after{box-sizing:border-box}
.px em,.px i,.px cite,.px address{font-style:normal}
.px a{color:inherit;text-decoration:none}
.px p{margin:0}
.px h2,.px h3,.px h4{margin:0;font-weight:200;max-width:none}
.px img{display:block;max-width:100%}
.px [hidden]{display:none!important}
.px .px-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the site's rail: same max width and side padding as every hero */
.px .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.px .dark{--ink:#FFFFFF;--text:rgba(255,255,255,.8);--mute:rgba(255,255,255,.62);--rule:rgba(255,255,255,.22);background:var(--navy);color:var(--text)}
.px .bw img,.px img.bw{filter:grayscale(1) contrast(1.06) brightness(.96)}

/* type */
.px .eb{display:block;margin-bottom:26px;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.px .h-xl{font:300 clamp(44px,6.4vw,96px)/1.02 var(--serif);letter-spacing:-.03em;color:var(--ink)}
/* a note's heading on its photo is the page's hero and keeps its weight */
.px .band--note .h-xl{font-weight:200}
.px .h-l{font:300 clamp(38px,4.6vw,68px)/1.06 var(--serif);letter-spacing:-.024em;color:var(--ink)}
.px .h-m{font:300 clamp(26px,2.4vw,36px)/1.18 var(--serif);letter-spacing:-.012em;color:var(--ink)}
.px .h-s{font:400 clamp(21px,1.7vw,25px)/1.25 var(--serif);letter-spacing:-.005em;color:var(--ink)}
.px .lede{font:400 clamp(19px,1.5vw,22px)/1.6 var(--sans);color:var(--text)}
.px .prose p+p{margin-top:1.1em}
.px .figs-ref{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.px .meta{display:flex;flex-wrap:wrap;gap:6px 22px;font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.px .tail{margin-top:22px;font:400 15px/1.4 var(--sans);color:var(--mute)}

/* buttons: a solid block whose label rolls up (the home pick); no colour change on hover */
.px .btn{display:inline-flex;align-items:center;min-height:54px;padding:16px 28px;border:0;background:var(--navy);color:#fff;cursor:pointer;font:600 15px/1.2 var(--sans);letter-spacing:.01em}
.px .btn--light{background:#fff;color:var(--navy)}
.px .roll{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.px .roll>span{display:block;transition:transform .52s var(--wipe)}
.px .roll>.roll-b{position:absolute;left:0;top:100%;white-space:nowrap}
.px :is(.btn,.tlink):is(:hover,:focus-visible) .roll>span,
.px a:is(:hover,:focus-visible) :is(.btn,.tlink) .roll>span{transform:translateY(-100%)}
.px .tlink{display:inline-block;font:600 15px/1.3 var(--sans);color:var(--ink)}

/* photographs */
.px .ph{position:relative;overflow:hidden;background:#1a2230;margin:0}
.px .ph img{width:100%;height:100%;object-fit:cover}

/* a full-width photograph with white type over it */
.px .band{position:relative;min-height:calc(82vh / var(--z,1));display:flex;align-items:flex-end;overflow:hidden;background:var(--navy);color:#fff}
.px .band>.ph{position:absolute;inset:-8% 0;background:none}
.px .band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,38,.25) 0%,rgba(7,20,38,.35) 45%,rgba(7,20,38,.86) 100%)}
.px .band>.wrap{position:relative;z-index:1;width:100%;padding-bottom:88px}
.px .band .eb{color:rgba(255,255,255,.7)}
.px .band .h-xl,.px .band .h-l{color:#fff;max-width:14em}
.px .band .lede{color:rgba(255,255,255,.86);max-width:36em;margin-top:26px}
.px .band--short{min-height:calc(62vh / var(--z,1))}

/* a statement set large, its words lighting as it scrolls through */
.px .stmt{padding:150px 0;background:#fff}
.px .stmt p{font:300 clamp(36px,4.8vw,72px)/1.12 var(--serif);letter-spacing:-.025em;color:var(--navy);max-width:17em}
.px-js .px [data-words] .w{opacity:.2;transition:opacity .35s linear}
.px-js .px [data-words] .w.on{opacity:1}

/* reveals (only once subpages.js has run; reduced motion shows everything) */
.px-js .px [data-in]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.px-js .px [data-in].is-in{opacity:1;transform:none}
.px-js .px .ph[data-rv]{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--wipe)}
.px-js .px .ph[data-rv].is-in{clip-path:inset(0 0 0 0)}

/* ---------------- About: chapters ---------------- */
.practice-content.px::before,.practice-content.px::after{display:none}
/* each section opens on a full photograph; its words sit together in one column beneath */
.px .chap__body{padding-top:110px;padding-bottom:140px}
.px .chap__body>*{max-width:860px}
.px .chap__intro{font:300 clamp(24px,2vw,30px)/1.4 var(--serif);color:var(--ink);letter-spacing:-.01em}
.px .chap__body .prose{margin-top:40px}

/* ---------------- Research: the cover and the carousel ---------------- */
.px .crow{padding:120px 0 150px;background:var(--paper)}
.px .row__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:48px}
.px .row__side{display:flex;align-items:center;gap:28px}
.px .count{font:400 15px/1 var(--sans);color:var(--mute);white-space:nowrap}
/* topic buttons: bright when chosen, dimmed otherwise, no lines */
.px .topics{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline}
.px .topics button{padding:0;border:0;background:none;cursor:pointer;font:300 clamp(24px,2.2vw,34px)/1.2 var(--serif);color:var(--ink);opacity:.35;transition:opacity .4s var(--ease)}
.px .topics button:hover,.px .topics button[aria-pressed="true"]{opacity:1}
.px .arrows{display:flex;gap:8px}
.px .arrows button{width:56px;height:56px;border:0;background:var(--navy);color:#fff;cursor:pointer;font:400 22px/1 var(--sans);transition:opacity .3s}
.px .arrows button:disabled{opacity:.25;cursor:default}
/* the row starts on the rail and runs off the right edge */
.px .car{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;
  padding-left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));scroll-padding-left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
.px .car::-webkit-scrollbar{display:none}
/* one grid, each card a subgrid, so dates, titles, summaries and lines up across the row */
.px .car__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,29vw,440px);grid-template-rows:repeat(5,auto);column-gap:var(--g);
  list-style:none;margin:0;padding:0 var(--pad) 8px 0;width:max-content}
.px .car__s{display:grid;grid-row:span 5;grid-template-rows:subgrid;scroll-snap-align:start}
.px .car__s>a{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start}
.px .card .ph{aspect-ratio:4/3;margin-bottom:26px}
.px .card .ph img{transition:transform 1.2s var(--ease)}
.px .card a:hover .ph img{transform:scale(1.04)}
.px .card .h-s{margin:14px 0}
.px .card p.sum{font-size:16px;line-height:1.6;color:var(--text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* the cover (Mason's pick, 20:43): the page's heading and the current note written on one
   full-screen photograph, in the type of the home, practice and About heroes; every note follows
   in the row on white. Heights in vh are divided by the site's large-screen zoom (--z, fit.css)
   so the cover stays one screen. */
.rx{--navh:96px;--hd:'Spectral',Georgia,serif;--hs:'Hanken','Hanken Grotesk',system-ui,sans-serif;--shade:#06080B}
@media (max-width:760px){.rx{--navh:78px}}
.rx .rx-h1{margin:0;font:300 clamp(42px,5.4vw,86px)/1.04 var(--hd);letter-spacing:-.014em;color:#F3F5F8;max-width:none}
.rx .rx-lede{margin:0;font:400 clamp(17px,1.3vw,20px)/1.65 var(--hs);color:rgba(238,241,246,.9);max-width:25em}
.rx .cov .eb{color:rgba(243,245,248,.74)}
.rx .ph{background:var(--shade)}
.rx .cov{position:relative;display:flex;min-height:max(660px,calc(100vh / var(--z,1)));min-height:max(660px,calc(100svh / var(--z,1)));overflow:hidden;background:var(--shade);color:#fff}
.rx .cov>.ph{position:absolute;inset:-8% 0}
.rx .cov::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,20,38,.66) 0%,rgba(7,20,38,.38) 30%,rgba(7,20,38,.34) 50%,rgba(7,20,38,.9) 100%)}
.rx .cov__in{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:56px;
  padding-top:calc(var(--navh) + clamp(48px,calc(9vh / var(--z,1)),120px));padding-bottom:clamp(36px,calc(5.5vh / var(--z,1)),64px)}
.rx .cov__top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--g);align-items:end}
.rx .cov__top .rx-lede{justify-self:end;margin-bottom:.4em}
.rx .cov__note{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--g);align-items:end;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.26);color:#fff}
.rx .cov__note .meta{color:rgba(255,255,255,.74)}
.rx .cov__t{margin:14px 0 12px;font:300 clamp(28px,2.7vw,42px)/1.12 var(--serif);letter-spacing:-.01em;color:#fff;max-width:22em}
.rx .cov__sum{font:400 clamp(16px,1.2vw,18px)/1.6 var(--sans);color:rgba(255,255,255,.84);max-width:40em}
.rx .cov__go{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.rx .cov__go .tail{margin:0;color:rgba(255,255,255,.72)}
.rx--cover .crow{padding-top:110px}

/* ---------------- Research notes: photo band ---------------- */
/* the note's heading written on its photograph, clear of the fixed navigation */
.px .band--note{min-height:calc(80vh / var(--z,1));padding-top:calc(var(--navh,96px) + 48px)}
.px .band--note::after{background:linear-gradient(180deg,rgba(7,20,38,.45) 0%,rgba(7,20,38,.52) 40%,rgba(7,20,38,.9) 100%)}
.px .band--note .meta{display:block;color:rgba(255,255,255,.75)}
.px .band--note h1{margin:18px 0 0;max-width:15em}
.px .note{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);gap:var(--g);padding-top:110px;padding-bottom:120px}
.px .note__side{position:sticky;top:110px;align-self:start}
.px .note__side p{font:400 15px/1.6 var(--sans);color:var(--mute)}
.px .note__side .tags{margin:18px 0;display:flex;flex-wrap:wrap;gap:8px}
.px .note__side .research-disclosure{margin-top:14px;font-size:14px;line-height:1.55}
.px .note__side .tags span{padding:6px 12px;background:var(--mist);font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.px .note__body p{font:400 clamp(19px,1.35vw,21px)/1.75 var(--sans);color:#243041}
.px .note__body p+p{margin-top:1.2em}
.px .note__body h2{font:300 clamp(26px,2.2vw,32px)/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:1.8em 0 .7em}
.px .note__body>p:first-of-type{font:300 clamp(24px,2vw,30px)/1.45 var(--serif);color:var(--ink);letter-spacing:-.01em}
.px .note__body sup a.research-cite{color:var(--mute)}
.px .src{margin-top:80px}
.px .src h3{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.px .src ol{margin:0;padding-left:1.2em;font:400 15px/1.6 var(--sans);color:var(--text)}
.px .src li+li{margin-top:10px}
.px .src a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.px .more{padding:130px 0 150px}
.px .more .row__top{align-items:baseline}
/* more notes: the Research card on deep navy, photograph first and the words beneath;
   one grid with each card a subgrid, so dates, titles and summaries line up */
.px .ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:var(--g)}
.px .ocard{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;color:#fff}
.px .ocard__t{display:contents}
.px .ocard .ph{aspect-ratio:4/3;margin-bottom:26px}
.px .ocard .ph img{transition:transform 1.2s var(--ease)}
.px .ocard:hover .ph img{transform:scale(1.04)}
.px .ocard .meta{color:rgba(255,255,255,.72)}
.px .ocard .h-m{font:400 clamp(21px,1.7vw,25px)/1.25 var(--serif);letter-spacing:-.005em;color:#fff;margin:14px 0}
.px .ocard p.sum{font-size:16px;line-height:1.6;color:rgba(255,255,255,.8);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.px .ocard .by{margin-top:14px;font:400 14px/1.5 var(--sans);color:rgba(255,255,255,.66)}
.px .ocard .tlink{margin-top:18px;color:#fff;justify-self:start}

/* ---------------- Contact: the office over the street ---------------- */
.px .band--contact{min-height:calc(88vh / var(--z,1))}
.px .band--contact::after{background:linear-gradient(180deg,rgba(7,20,38,.5) 0%,rgba(7,20,38,.6) 45%,rgba(7,20,38,.9) 100%)}
.px .band--contact .h-l{max-width:12em}
.px .cbig{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;margin-top:80px}
.px .cbig .k{display:block;margin-bottom:14px;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.px .cbig .v{font:300 clamp(30px,3.4vw,52px)/1.12 var(--serif);letter-spacing:-.02em;color:#fff}
.px .cbig a.v{display:inline-block;overflow-wrap:anywhere}

/* ---------------- Disclosures: side index ---------------- */
.px .dx{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--g) 64px;padding-top:110px;padding-bottom:150px}
.px .dx__nav{position:sticky;top:110px;align-self:start;list-style:none;margin:0;padding:0}
.px .dx__nav a{display:block;padding:10px 0;font:300 clamp(22px,1.8vw,28px)/1.25 var(--serif);color:var(--ink);opacity:.35;transition:opacity .4s var(--ease)}
.px .dx__nav a:hover,.px .dx__nav a.on{opacity:1}
.px .dx__body section{padding-bottom:88px;scroll-margin-top:110px}
.px .dx__body section:last-child{padding-bottom:0}
.px .dx__body h2{margin-bottom:26px}
.px .dx__body p{font-size:19px;line-height:1.75;max-width:40em}
.px .dx__body p+p{margin-top:1em}

/* ---------------- phone ---------------- */
@media (max-width:900px){
  .px{font-size:17px}
  .px .band{min-height:calc(72vh / var(--z,1))}
  .px .band>.wrap{padding-bottom:52px}
  .px .band--short{min-height:calc(46vh / var(--z,1))}
  .px .stmt{padding:100px 0}
  .px .chap__body{padding-top:64px;padding-bottom:88px}
  .px .chap__body .prose{margin-top:28px}
  .px .band--note{min-height:calc(76vh / var(--z,1));padding-top:calc(var(--navh,72px) + 32px)}
  .px .crow{padding:72px 0 96px}
  .px .row__top{flex-direction:column;align-items:stretch;gap:22px;margin-bottom:32px}
  .px .row__side{justify-content:space-between}
  .px .topics{gap:6px 20px}
  .px .topics button{font-size:22px}
  .px .arrows button{width:48px;height:48px}
  .px .car__track{grid-auto-columns:80vw}
  .px .note{grid-template-columns:1fr;padding-top:56px;padding-bottom:80px}
  .px .note__side{position:static}
  .px .more{padding:88px 0 96px}
  .px .more .row__top{flex-direction:row;justify-content:space-between;align-items:baseline}
  .px .ocards{grid-template-columns:1fr;grid-template-rows:none;row-gap:56px}
  .px .ocard{display:block;grid-row:auto}
  .px .ocard__t{display:block}
  .px .band--contact{min-height:calc(86vh / var(--z,1))}
  .px .cbig{grid-template-columns:1fr;gap:32px;margin-top:56px}
  .px .dx{grid-template-columns:1fr;padding-top:64px;padding-bottom:96px}
  .px .dx__nav{display:none}
  .px .dx__body section{padding-bottom:64px}
  .rx .cov{min-height:100svh}
  .rx .cov__in{gap:44px;padding-top:calc(var(--navh) + 44px);padding-bottom:32px}
  .rx .cov__top,.rx .cov__note{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .rx .cov__top .rx-lede{justify-self:start;margin:0}
  .rx .cov__go{justify-self:start;margin-top:22px}
  .rx--cover .crow{padding-top:72px}
}
@media (prefers-reduced-motion:reduce){
  .px *{transition:none!important}
}