/* Field notes: the front page's ink and paper, at the weight a reading page needs */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g:max(clamp(20px,5vw,40px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --bg:#fafafa; --fg:#141414; --fg2:#575757; --fg3:#8c8c8c; --hair:#d0d0d0;
  --gs:240px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.45' intercept='-0.24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.7' intercept='-1.0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 10' preserveAspectRatio='none'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45 1.4' numOctaves='2' seed='3' result='n'/%3E%3CfeColorMatrix in='n' type='luminanceToAlpha' result='a'/%3E%3CfeComponentTransfer in='a' result='b'%3E%3CfeFuncA type='linear' slope='-3' intercept='2.25'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='SourceGraphic' in2='b' operator='in'/%3E%3C/filter%3E%3Cpath filter='url(%23p)' d='M2 5.8C80 3.4 210 2.4 400 2.8S780 2 998 4L998 5.6C800 7 600 8 400 7.6S120 7.8 2 6.4Z'/%3E%3C/svg%3E");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
/* a short page still puts its footer at the foot of the screen */
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
     background:var(--grain) 0 0/var(--gs) var(--gs),var(--bg);color:var(--fg);
     font:400 17px/1.47059 var(--font);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;font-synthesis:none}
main{flex:1 0 auto}
.foot{flex:none}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tex{background:var(--tex) 0 0/200px 200px,linear-gradient(var(--fg),var(--fg));
       -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media (forced-colors:active){.tex{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}

.wrap{width:100%;max-width:calc(584px + 2 * var(--g));margin:0 auto;padding-left:var(--g);padding-right:var(--g)}
.wrap--wide{max-width:calc(1260px + 2 * var(--g))}   /* the site's own measure: header, footer and the list */
.top{padding-top:calc(env(safe-area-inset-top,0px) + 22px);padding-bottom:22px}
.top__in{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.top__n{font:600 21px/1.14286 var(--font);letter-spacing:.011em;text-decoration:none}
.top__n:hover{text-decoration:underline;text-underline-offset:3px}
.top__b{position:relative;font:400 14px/1.42859 var(--font);letter-spacing:-.016em;color:var(--fg2);text-decoration:none;white-space:nowrap}
.top__b::after{content:"";position:absolute;inset:-5px -4px}   /* a 20px line, grown to 30px for a fingertip */
.top__b:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

main{padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(56px,8vw,96px)}
.nt__k{font:600 12px/1.33337 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.nt__t{margin-top:12px;font:600 clamp(28px,4.2vw,40px)/1.1 var(--font);letter-spacing:-.012em;text-wrap:balance}
.nt__m{margin-top:16px;font:400 14px/1.42859 var(--font);letter-spacing:-.016em;color:var(--fg2)}
.nt__d{position:relative;margin-top:clamp(24px,3.2vw,32px);padding-top:22px}
.nt__d::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  -webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.75}
.nt__d>*+*{margin-top:18px}
.nt__d p{font:400 17px/1.47059 var(--font);letter-spacing:-.022em;text-wrap:pretty}
.nt__d a{text-underline-offset:3px}
.nt__h2{margin-top:36px!important;font:600 21px/1.19048 var(--font);letter-spacing:.011em;text-wrap:balance}
.nt__h3{margin-top:28px!important;font:600 17px/1.23529 var(--font);letter-spacing:-.022em}
.nt__q{margin-top:24px!important;padding-left:18px;border-left:2px solid var(--hair)}
.nt__q p{font-style:italic;color:var(--fg2)}
.nt__ul,.nt__ol{display:grid;gap:12px}
.nt__ul li,.nt__ol li{position:relative;padding-left:26px;font:400 17px/1.47059 var(--font);letter-spacing:-.022em}
.nt__ul li::before{content:"";position:absolute;left:4px;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:.75}
.nt__ol{counter-reset:n}
.nt__ol li{counter-increment:n}
.nt__ol li::before{content:counter(n) ".";position:absolute;left:0;top:0;color:var(--fg2);font-variant-numeric:tabular-nums}
.nt__r{margin-top:32px!important;height:3px;border:0;-webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.35}
/* a note argues one point; this is the way through to the subject set out in full */
.nt__more{position:relative;margin-top:clamp(28px,4vw,40px)!important;padding-top:18px;
  font:400 14px/1.42859 var(--font);letter-spacing:-.016em;color:var(--fg2)}
.nt__more::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  -webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.5}
.nt__more a{position:relative;color:var(--fg);text-underline-offset:3px}
.nt__more a::after{content:"";position:absolute;inset:-5px -3px}
.nt__end{margin-top:clamp(40px,6vw,64px)}

.lead{max-width:820px;margin-top:14px;font:400 17px/1.47059 var(--font);letter-spacing:-.022em;color:var(--fg2);text-wrap:pretty}
/* the notes run across the page in columns, the way the sections on the front page do:
   a pencil rule over each one, then its date, its title and its opening lines */
.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 40px;margin-top:clamp(36px,5vw,56px)}
.item{position:relative;display:block;padding-top:22px;text-decoration:none}
.item::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  -webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.7}
.item__m{font:400 14px/1.42859 var(--font);letter-spacing:-.016em;color:var(--fg2);font-variant-numeric:tabular-nums}
.item__t{margin-top:6px;font:600 21px/1.19048 var(--font);letter-spacing:.011em;color:var(--ink,var(--fg));text-wrap:balance}
.item:hover .item__t{text-decoration:underline;text-underline-offset:4px}
.item__x{margin-top:10px;font:400 17px/1.47059 var(--font);letter-spacing:-.022em;color:var(--fg2);text-wrap:pretty}
/* date, title and opening line sit on the same baselines across the row. Only the notes
   do this: they are one row, so the zero row gap costs nothing. The areas list runs to
   two rows, where a zero gap would push the second row against the first. */
@supports (grid-template-rows:subgrid){
  @media (min-width:735px){
    .list--notes{grid-template-rows:repeat(3,auto);row-gap:0}
    .list--notes .item{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  }
}
.list--areas{row-gap:clamp(34px,4.2vw,46px)}
/* one area name runs to two lines while the others take one, so every name is given the
   room for two: the summaries below them then start on the same line across the row */
@media (min-width:735px){.list--areas .item__t{min-height:2.38em}}
@media (max-width:1068px){.list{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}}
@media (max-width:734px){.list{grid-template-columns:1fr;gap:32px}}
.empty{margin-top:40px;color:var(--fg2)}

/* the principles the whole page applies: numbered the way the front page numbers its
   questions, and set in ink rather than the muted lead grey around them */
.xpp{display:grid;gap:13px;max-width:820px;margin-top:clamp(18px,2.4vw,24px);counter-reset:p}
.xpp li{position:relative;counter-increment:p;padding-left:34px;
  font:400 17px/1.47059 var(--font);letter-spacing:-.022em;color:var(--fg);text-wrap:pretty}
.xpp li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font:600 12px/1.6 var(--font);letter-spacing:.08em;color:var(--fg3);font-variant-numeric:tabular-nums}

/* the expertise page: a jump list over the five areas, then the five sections in one read */
.xpn{position:relative;margin-top:clamp(22px,3vw,30px);padding-top:18px}
.xpn::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  -webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.5}
.nt__d section{scroll-margin-top:22px}
.nt__d section>*+*{margin-top:18px}
/* the five areas read as separate panels rather than one continuous document: each one
   opens on its own pencil rule, so the eye has somewhere to rest between them */
.nt__d--panels{margin-top:0;padding-top:0}
.nt__d--panels::before{display:none}
.nt__d--panels>section{position:relative;max-width:584px;
  margin-top:clamp(40px,5vw,60px)!important;padding-top:26px}
.nt__d--panels>section:first-child{margin-top:clamp(30px,4vw,44px)!important}
.nt__d--panels>section::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  -webkit-mask:var(--rule) 0 0/100% 100% no-repeat;mask:var(--rule) 0 0/100% 100% no-repeat;background:var(--fg);opacity:.6}
.nt__d--panels>section>.nt__h2{margin-top:0!important}
/* wide enough for two columns: the name of the area stands on the left and the prose
   runs beside it, so the page keeps the horizontal structure the areas list opens with
   and the line length stays at the reading measure */
@media (min-width:1068px){
  .nt__d--panels>section{max-width:none;display:grid;grid-template-columns:252px minmax(0,584px);gap:0 56px}
  .nt__d--panels>section>.nt__h2{grid-column:1;grid-row:1}
  .nt__d--panels>section>:not(.nt__h2){grid-column:2}
  .nt__d--panels>section>:nth-child(2){margin-top:0!important}
}

.foot{border-top:1px solid var(--hair);background:#efefef}
.foot .wrap{padding-top:18px;padding-bottom:22px}
.foot__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;
           font:400 12px/1.33337 var(--font);letter-spacing:-.01em;color:var(--fg2)}
.foot a{position:relative;color:#262626;text-decoration:none}
/* a 14px line grown to 26px; the row gap above is 16px, so two zones never overlap */
.foot a::after{content:"";position:absolute;inset:-6px -4px}
.foot a:hover{text-decoration:underline}
/* a line that is nothing but links is a row of actions, not prose, so it gets real targets */
.nt__cta a{position:relative}
.nt__cta a::after{content:"";position:absolute;inset:-5px -4px}
@media print{
  @page{margin:16mm}
  .top__b,.foot{display:none!important}
  body{background:#fff}
  .tex,.tex *{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
              -webkit-text-fill-color:currentColor!important;color:var(--fg)!important}
  .nt__h2,.nt__h3{break-after:avoid;page-break-after:avoid}
}