/* ---------------------------------------------------------------
   Field notes: the home page. Tokens, the grid, the running head,
   section heads and the colophon come from site.css, loaded first.
   The same markup prints as a two-page CV (see @media print).
   --------------------------------------------------------------- */

/* ---------- hero ---------- */
.hook{margin-top:1rem;color:var(--ink-2);max-width:37em}
.hook .fig-num{color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.facts .line{display:block}
.facts .sep{color:var(--ink-3);margin:0 .4em}
.facts .elsewhere{display:flex;flex-wrap:wrap;column-gap:1.1em}
.elsewhere a{white-space:nowrap}
.copy{
  margin-left:.6em;padding:.12rem .45rem .14rem;border:1px solid var(--rule-2);border-radius:2px;
  background:transparent;color:var(--ink-2);cursor:pointer;
  font:400 .625rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.copy:hover{color:var(--accent);border-color:var(--accent)}
.copy[data-done]{color:var(--accent);border-color:var(--accent);background:var(--wash)}
.portrait{padding-top:0}
.portrait img{width:100%;max-width:12.5rem;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;filter:grayscale(1) contrast(1.06) brightness(1.02);mix-blend-mode:multiply;transition:filter .5s ease}
.portrait:hover img{filter:grayscale(.15) contrast(1.02)}
figcaption{margin-top:.55rem;font-size:.6875rem;line-height:1.5;color:var(--ink-3)}
figcaption b{font-weight:500;color:var(--ink-2);margin-right:.5em}
@media (prefers-color-scheme: dark){
  .portrait img{mix-blend-mode:normal;filter:grayscale(1) brightness(.74) contrast(1.12)}
  .portrait:hover img{filter:grayscale(.15) brightness(.82) contrast(1.05)}
}

/* ---------- entries ---------- */
.entry{
  position:relative;align-items:baseline;scroll-margin-top:1.5rem;
  grid-template-areas:"meta . title . notes" "meta . body . notes" "meta . links . notes";
  grid-template-rows:auto auto 1fr;
}
.entry+.entry{margin-top:3.4rem}
.entry:focus{outline:none}
.entry>.meta{grid-area:meta}
.entry>.e-title{grid-area:title}
.entry>.e-body{grid-area:body}
.entry>.e-links{grid-area:links}
.entry>.notes{grid-area:notes;grid-row:2/4}
/* the bookmark ribbon: J and K move it, a #fragment sets it */
.entry::before{
  content:"";position:absolute;left:-1.1rem;top:.2rem;width:3px;height:2.1rem;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease;
}
.entry[data-current]::before,.entry:target::before{transform:scaleY(1)}
.meta{display:flex;flex-direction:column;gap:.15rem;font-size:.75rem;line-height:1.45;color:var(--ink-2)}
.meta .kind{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.entry:hover .meta time{color:var(--accent)}
.meta time{transition:color .15s ease}
.e-title h3{font-size:1.5rem;line-height:1.2;font-weight:600;letter-spacing:-.008em}
.dek{margin-top:.25rem;font-style:italic;color:var(--ink-2)}
.e-body{margin-top:.85rem}
.e-body p+p{margin-top:.7em}
.e-links{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:.75rem;line-height:1.6}
.e-links a{text-decoration:none;color:var(--ink-2)}
.e-links a .scr{border-bottom:1px solid var(--rule-2);transition:border-color .15s ease}
.e-links a:hover{color:var(--accent)}
.e-links a:hover .scr{border-color:currentColor}

/* margin notes */
.notes{font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.notes>*+*{margin-top:1rem}
.note{transition:background-color .2s ease,box-shadow .2s ease}
.note .n{font-family:var(--mono);font-size:.6875rem;color:var(--accent);margin-right:.45em}
.note.lit,.note:target{background:var(--wash);box-shadow:0 0 0 .4rem var(--wash)}
.ref{font-family:var(--mono);font-size:.6em;line-height:0;vertical-align:.6em;color:var(--accent);text-decoration:none;padding:0 .12em 0 .08em}
.ref.lit{background:var(--wash)}
.cite{text-decoration:none;color:var(--accent);font-family:var(--mono);font-size:.78em}
.tally{display:grid;gap:.35rem}
.tally li{display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:.6rem;align-items:baseline}
.tally b{font-size:1.25rem;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.tally span{font-family:var(--mono);font-size:.6875rem;line-height:1.4;color:var(--ink-3)}

/* ---------- now ---------- */
.log{grid-template-areas:"meta . body . .";grid-template-rows:auto}
.logrows{border-top:1px solid var(--rule)}
.logrows>div{position:relative;padding:.6rem 0 .65rem}
.side{position:absolute;top:.62rem;left:calc(100% + var(--g2));width:var(--nw);font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.side .note+.note{margin-top:.7rem}
.logrows dd{line-height:1.5}
.tok{font-weight:500;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.005em}
.side .tok{font-weight:500;color:var(--ink)}
.spark{display:inline-block;width:7rem;height:1rem;margin:0 0 0 .45rem;vertical-align:-.14rem;overflow:visible}
.spark path{fill:none;stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.spark circle{fill:var(--accent)}

/* ---------- papers ---------- */
.refs li{align-items:baseline}
.refs li+li{margin-top:1.45rem}
.refno{font-size:.75rem;color:var(--accent)}
.ref-title{font-weight:450}
.venue{display:block;margin-top:.2rem;font-size:.75rem;line-height:1.5;color:var(--ink-3)}
.venue a{color:var(--ink-2)}
.annot{margin-top:.35rem;color:var(--ink-2)}

/* ---------- recognition ---------- */
.honors li{align-items:baseline}
.honors .c-main{padding:.5rem 0 .55rem;border-bottom:1px solid var(--rule)}
.honors li:first-child .c-main{border-top:1px solid var(--rule)}
.yr{font-size:.75rem;color:var(--ink-2)}

/* ---------- play ---------- */
.play-body{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:2rem;align-items:start}
.play-text{padding-top:.35rem}
.play-lede{font-size:1.5rem;line-height:1.3;letter-spacing:-.006em}
.play-rules{margin-top:.45rem;color:var(--ink-2)}
.play-go{margin-top:.8rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem}
.play-go a{font-size:1.125rem}
.hint{font-family:var(--mono);font-size:.6875rem;color:var(--ink-3)}
kbd{font-family:var(--mono);font-size:.6875rem;line-height:1;padding:.14rem .34rem .16rem;border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:3px;color:var(--ink-2);background:var(--paper)}
.teaser{margin:0}
.chart5{width:6.5rem;height:6.5rem}
.chart5 .tint{fill:var(--paper-2)}
.chart5 .lines{fill:none;stroke:var(--rule);stroke-width:.75}
.chart5 .walls{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:square}
.chart5 .frame{fill:none;stroke:var(--ink-2);stroke-width:1.25}
.chart5 .dots{fill:var(--ink-3)}
.chart5 .stars{fill:var(--ink)}
.chart5 .next{opacity:0;transition:opacity .3s ease .25s}
.chart5 .cursor{fill:none;stroke:var(--accent);stroke-width:2;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.play-body:hover .chart5 .cursor,.play-body:focus-within .chart5 .cursor{transform:translate(14px,0)}
.play-body:hover .chart5 .next,.play-body:focus-within .chart5 .next{opacity:1}

/* ---------- contact ---------- */
.found{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.email-big{margin-top:.35rem;font-size:clamp(1.55rem,1.1rem + 1.9vw,2.5rem);line-height:1.15;letter-spacing:-.012em;overflow-wrap:anywhere}
.email-big a{text-decoration-thickness:1px;text-underline-offset:.16em}
.email-big .copy{vertical-align:.5em}
.reach{margin-top:1.6rem;border-top:1px solid var(--rule)}
.reach>div{display:grid;grid-template-columns:6.25rem minmax(0,1fr);column-gap:1rem;align-items:baseline;padding:.45rem 0 .5rem;border-bottom:1px solid var(--rule)}
.reach dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.reach dd{font-size:1rem}

/* ---------- colophon: keyboard keys ---------- */
.keys{font-size:.6875rem;line-height:1.5;color:var(--ink-3)}
.keys li{display:grid;grid-template-columns:3.6rem 1fr;align-items:baseline}
.keys li+li{margin-top:.45rem}
.keycard{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:5;min-width:15rem;padding:.9rem 1rem .8rem;
  background:var(--paper);border:1px solid var(--rule-2);box-shadow:0 1px 0 var(--rule),0 12px 28px -18px rgba(0,0,0,.35);
  font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--ink-2);
}
.keycard p{display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline}
.keycard kbd{justify-self:start}
.keycard p+p{margin-top:.35rem}
.keycard .label{display:block;margin-bottom:.55rem}

/* ---------- narrower: margin notes fold under the text ---------- */
@media (max-width: 1060px){
  .entry{grid-template-areas:"meta . title" "meta . body" "meta . notes" "meta . links";grid-template-rows:auto}
  .log{grid-template-areas:"meta . body"}
  .entry>.notes{grid-area:notes;margin-top:1.1rem;padding-left:1rem;border-left:1px solid var(--rule)}
  .side{position:static;width:auto;margin-top:.55rem;padding-left:.85rem;border-left:1px solid var(--rule);font-size:.875rem}
  .portrait{display:flex;align-items:end;gap:1rem;margin-top:2rem;padding-top:0}
  .portrait img{width:7.5rem}
  .keys{margin-top:1rem}
}
@media (max-width: 720px){
  .reach>div{grid-template-columns:5.25rem minmax(0,1fr);column-gap:.75rem}
  .reach dd{font-size:.96875rem}
  .facts .sep.so{display:none}
  .facts .elsewhere{column-gap:1em}
  .wide-only{display:none}
  .facts .resume{display:table;margin-top:.1rem}
  .portrait img{width:6.5rem}
  .entry{grid-template-areas:"meta" "title" "body" "notes" "links"}
  .log{grid-template-areas:"meta" "body"}
  .entry+.entry{margin-top:2.75rem}
  .entry::before{left:-.7rem;top:0;height:1.4rem}
  .meta{flex-direction:row;flex-wrap:wrap;gap:0 .75rem;margin-bottom:.35rem}
  .e-title h3{font-size:1.3125rem}
  .entry>.notes{padding-left:.85rem}
  .refs li,.honors li{grid-template-columns:4rem minmax(0,1fr)}
  .refs li>.c-gutter,.honors li>.c-gutter{grid-column:1}
  .refs li>.c-main,.honors li>.c-main{grid-column:2}
  .honors li:first-child .yr{padding-top:.5rem}
  .play-body{column-gap:1.25rem}
  .chart5{width:5.25rem;height:5.25rem}
  .play-lede{font-size:1.25rem}
  .colophon .keys{display:none}
  .keycard{left:1rem;right:1rem;bottom:1rem}
}
/* keyboard hints mean nothing on a phone */
@media (hover: none) and (pointer: coarse){
  .hint,.colophon .keys{display:none}
}

/* ---------- print: the page becomes the CV ---------- */
@media print{
  @page{size:letter;margin:.5in .6in .55in}
  :root{
    --paper:#fff;--paper-2:#fff;--ink:#111;--ink-2:#333;--ink-3:#5a5a5a;--rule:#cfcfcf;--rule-2:#9a9a9a;--accent:#111;
    --fs:10pt;--gw:1.05in;--g1:.2in;--side:0px;
  }
  html{font-size:10pt;background:#fff}
  body{background:#fff;color:#111;line-height:1.36;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{text-decoration:none}
  .masthead,.rh,.skip,.portrait,#now,#play,.contact,.colophon,.keycard,.copy,.sec-note,.sec-no,.entry>.notes,.ref,.arr,.scr,.so,.stamp .coord,.hint{display:none!important}
  .prt{display:inline!important}
  .print-only{display:block!important}
  .cite{color:#333;font-size:.8em}
  .row{width:100%;grid-template-columns:var(--gw) var(--g1) minmax(0,1fr)}
  .hero{padding-top:0}
  .stamp{padding-top:.3rem;font-size:7.5pt}
  h1{font-size:23pt;letter-spacing:-.015em;margin:0}
  .standfirst{margin-top:.45rem;font-size:11pt;line-height:1.35;max-width:none}
  .hook{margin-top:.3rem;font-size:10pt;max-width:none}
  .facts{margin-top:.55rem}
  .facts>div{padding:.2rem 0;grid-template-columns:.95in 1fr}
  .facts dt{font-size:7pt}
  .facts dd{font-size:9.5pt}
  .facts .elsewhere{column-gap:.9em}
  .section{margin-top:.95rem;break-inside:auto}
  .sec-head{padding-top:.3rem;margin-bottom:.45rem;border-top:.75pt solid #999;break-after:avoid}
  .sec-no{font-size:7.5pt;color:#555}
  .sec-head h2{font-size:12.5pt;font-weight:600;letter-spacing:0}
  .entry{grid-template-areas:"meta . title" "meta . body" "meta . links";grid-template-rows:auto;break-inside:avoid}
  .entry+.entry{margin-top:.6rem}
  .entry::before{display:none}
  .meta{font-size:7.5pt}
  .meta .kind{font-size:6.5pt}
  .e-title h3{font-size:10.5pt;line-height:1.25}
  .dek{margin-top:.05rem;font-size:9.5pt}
  .e-body{margin-top:.2rem;font-size:9.5pt}
  .e-body p+p{margin-top:.3em}
  .e-links{margin-top:.15rem;font-size:7.5pt;gap:0 1rem}
  .e-links a{color:#333}
  .refs li+li{margin-top:.35rem}
  .refs li{break-inside:avoid}
  .ref-title{font-size:9.5pt}
  .venue{font-size:7.5pt;margin-top:0}
  .annot{display:none}
  .honors .c-main{padding:.15rem 0;font-size:9.5pt;border:0!important}
  .yr,.refno{font-size:7.5pt}
  .print-foot{margin-top:1rem;padding-top:.3rem;border-top:.5pt solid #bbb;font:7pt/1.4 var(--mono);color:#666}
}