/* 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{font:400 14px/1.42859 var(--font);letter-spacing:-.016em;color:var(--fg2);text-decoration:none;white-space:nowrap}
.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}
.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 */
@supports (grid-template-rows:subgrid){
  @media (min-width:735px){
    .list{grid-template-rows:repeat(3,auto);row-gap:0}
    .item{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  }
}
@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)}

.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:8px 24px;
           font:400 12px/1.33337 var(--font);letter-spacing:-.01em;color:var(--fg2)}
.foot a{color:#262626;text-decoration:none}
.foot a:hover{text-decoration:underline}
@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}
}