/* writing.css · version 1 · nasrkhan.net/writing/assets/writing.css
   Shared by the Writing section: the essay list, every essay, the 404 page and the hand-drawn charts (pen.js).
   Change it only by adding rules, then raise the version number here and in the ?v= of new pages.
   The page stays flat white in every colour scheme. Archivo for reading, IBM Plex Mono for dates and numbers,
   Caveat for pen notes on charts. */

/* ---------- tokens and base ---------- */
:root{
  --paper:#FFFFFF; --ink:#15181E; --ink-2:#474E5A; --ink-3:#6A717D; --rule:#E3E6EA;
  --blue:#2B66C3; --pen:#C8361D; --focus:#2B66C3;
  --f-ui:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-type:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-pen:"Caveat","Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-ui);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--ink-3)}
a:hover{color:var(--blue);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:rgba(43,102,195,.16)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shared top line and quiet links ---------- */
.e-crumbs{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:16px;color:var(--ink-3)}
.e-crumbs a{text-decoration:none;color:var(--ink-2)}
.e-crumbs a:hover{color:var(--blue);text-decoration:underline}
.e-crumbs .e-me{font-weight:700;font-stretch:108%;color:var(--ink)}
.quiet{margin:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px}
.quiet a{color:var(--ink-2);text-decoration-color:var(--rule)}
.quiet a:hover{color:var(--blue);text-decoration-color:currentColor}

/* ---------- the essay list (writing/index.html) ---------- */
.w-page{max-width:640px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:clamp(40px,10vh,96px) 72px;display:grid;gap:34px}
.w-page h1{font-weight:700;font-stretch:108%;font-size:30px;line-height:1.1;letter-spacing:-.015em}
.w-lead{margin:10px 0 0;font-size:17.5px;line-height:1.55;color:var(--ink-2)}
.w-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.w-list li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:2px 18px;align-items:baseline}
.w-list time{font:400 13.5px/1.4 var(--f-type);color:var(--ink-3);font-variant-numeric:tabular-nums}
.w-list a{font-size:18px;line-height:1.4}
.w-list .w-empty{display:block;font-size:17px;color:var(--ink-3)}
.mocknote{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;margin:0;padding:8px 12px;max-width:calc(100% - 32px);background:var(--paper);border:1px solid var(--ink-3);font:400 13px/1.4 var(--f-type);color:var(--ink-2)}
@media (max-width:520px){.w-list li{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404 ---------- */
.nf-page{max-width:640px;margin-inline:auto;padding:clamp(56px,14vh,136px) max(20px,env(safe-area-inset-right,0px)) 72px max(20px,env(safe-area-inset-left,0px));display:grid;gap:28px}
.nf-page h1{font-weight:700;font-stretch:108%;font-size:30px;line-height:1.1;letter-spacing:-.015em}
.nf-page p{font-size:18px;line-height:1.6;color:var(--ink-2)}

/* ---------- essay page ---------- */
.essay{max-width:680px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:clamp(28px,6vh,56px) 72px}
.e-head{margin-top:clamp(40px,8vh,72px)}
.e-head h1{font-weight:700;font-stretch:104%;font-size:clamp(33px,6.2vw,46px);line-height:1.08;letter-spacing:-.022em}
.e-dek{margin:16px 0 0;font-size:clamp(19px,2.6vw,21px);line-height:1.45;color:var(--ink-2);max-width:34em}
.e-meta{margin:18px 0 0;font:400 13.5px/1.4 var(--f-type);color:var(--ink-3);font-variant-numeric:tabular-nums}

.e-fig{margin:2.3em 0 2.4em}
.e-lead{margin-top:44px}
.e-fig figcaption{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.e-fig figcaption b{font:500 12.5px/1 var(--f-type);color:var(--ink-3);margin-right:8px;letter-spacing:.02em}

.e-body{font-size:19px;line-height:1.7}
.e-body>p,.e-body li>p{margin:0 0 1.15em}
.e-body h2{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.012em;margin:2.1em 0 .6em}
.e-body h3{font-size:20px;font-weight:650;line-height:1.3;margin:1.7em 0 .5em}
.e-body ul,.e-body ol{margin:0 0 1.15em;padding-left:1.25em}
.e-body li{margin:.35em 0;padding-left:.2em}
.e-body li::marker{color:var(--ink-3)}
.e-body ol>li::marker{font:500 .8em var(--f-type)}
.e-body strong{font-weight:650}
.e-body em{font-style:italic}
.e-body code{font:400 .86em var(--f-type);background:#F3F4F6;padding:1px 5px;border-radius:3px}
.e-body blockquote{margin:1.5em 0;padding:2px 0 2px 20px;border-left:2px solid var(--ink);color:var(--ink-2)}
.e-body blockquote p{margin:0 0 .7em}
.e-body blockquote p:last-child{margin-bottom:0}
.e-body hr,.e-break{border:0;height:14px;margin:2.2em auto;width:72px;background:no-repeat center/72px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14'%3E%3Cpath d='M2 8c6-6 10 4 16-1s10-4 16 1 10 4 16-1 10-4 16 1' fill='none' stroke='%23C8361D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.fn{position:relative;top:-.55em;vertical-align:baseline;line-height:0;font-size:100%}
.fn a{font:500 12px/1 var(--f-type);color:var(--blue);text-decoration:none;padding:0 1px 0 2px}
.fn a:hover{text-decoration:underline}

/* a sentence from the essay repeated large, for rhythm; screen readers skip it */
.e-pull{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--pen);font-size:clamp(22px,3.2vw,26px);line-height:1.35;font-weight:600;letter-spacing:-.01em;color:var(--ink)}

/* definitions: a letter or short term, then what it stands for */
.e-defs{margin:0 0 1.3em;display:grid;gap:12px}
.e-defs div{display:grid;grid-template-columns:minmax(34px,auto) minmax(0,1fr);gap:0 14px;align-items:baseline}
.e-defs dt{font:600 18px/1.5 var(--f-type)}
.e-defs dd{margin:0}

/* a formula on its own lines */
.e-formula{display:grid;gap:2px;margin:1.5em 0 1.6em!important;padding:4px 0 4px 18px;border-left:2px solid var(--ink);font-family:var(--f-type)}
.e-formula span:first-child{font-size:15px;line-height:1.45;color:var(--ink-2)}
.e-formula span:last-child{font-size:20px;font-weight:600;line-height:1.4}

/* tables: hairlines only, numbers in mono */
.e-table-wrap{margin:1.6em 0 1.9em;overflow-x:auto}
.e-table{width:100%;border-collapse:collapse;font-size:16.5px;line-height:1.35}
.e-table thead th{font-weight:600;font-size:14px;line-height:1.3;color:var(--ink-2);text-align:left;vertical-align:bottom;padding:0 12px 9px 0;border-bottom:1.5px solid var(--ink)}
.e-table tbody th,.e-table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:baseline;text-align:left;font-weight:400}
.e-table th:last-child,.e-table td:last-child{padding-right:0}
.e-table .n{text-align:right}
.e-table td.n{font-family:var(--f-type);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* notes and the end of the essay */
.e-notes{margin-top:3.2em;padding-top:18px;border-top:1px solid var(--rule)}
.e-notes h2{font:500 13px/1.4 var(--f-type);color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.e-notes ol{margin:12px 0 0;padding-left:1.4em;font-size:15.5px;line-height:1.55;color:var(--ink-2);display:grid;gap:8px}
.e-notes li::marker{font:500 13px var(--f-type);color:var(--ink-3)}
.e-notes li:target{background:rgba(43,102,195,.07);outline:6px solid rgba(43,102,195,.07)}
.e-notes a{color:inherit}
.e-notes a:hover{color:var(--blue)}
.e-notes .back{text-decoration:none;color:var(--ink-3);margin-left:4px}
.e-end{margin-top:40px;display:grid;gap:14px}
.e-bio{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- hand-drawn charts (pen.js) ---------- */
.pen-chart{position:relative}
.pen-chart p{margin:0!important}
.pen-chart svg{display:block;max-width:none;overflow:visible}
.pc-num{font:500 14px var(--f-type);fill:var(--ink-2);font-variant-numeric:tabular-nums}
.pc-num,.pc-pen,.pc-halo{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.pc-num-sm{font-size:13px}
.pc-num-pen{fill:var(--pen)}
.pc-lab{font:400 15px var(--f-ui);fill:var(--ink)}
.pc-lab-sm{font:400 13.5px var(--f-ui);fill:var(--ink-2)}
.pc-lab-b{font:650 15px var(--f-ui);fill:var(--ink)}
.pc-tick{font:400 12.5px var(--f-type);fill:var(--ink-3)}
.pc-pen{font:700 21px var(--f-pen);fill:var(--pen)}
.pc-pen-sm{font:700 18px var(--f-pen);fill:var(--pen)}
.pc-pen-faint{fill:var(--ink-3)}
.pc-col-labels{display:grid;margin-top:8px;text-align:center;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.pc-col-labels span{padding:0 4px}
.pc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:14px;line-height:1.3;color:var(--ink-2)}
.pc-legend span{display:inline-flex;align-items:center;gap:7px}
.pc-legend svg{flex:none}
.pc-legend b{font:500 13px var(--f-type);color:var(--ink-3)}

/* grid: a 2x2 of advice */
.pc-grid{position:relative}
.pc-heads{display:grid;grid-template-columns:1fr 1fr;text-align:center;font:700 21px/1.1 var(--f-pen);color:var(--pen);padding-bottom:2px}
.pc-rowhead{padding:12px 0 2px;font:700 20px/1.1 var(--f-pen);color:var(--pen)}
.pc-cells{display:grid;grid-template-columns:1fr 1fr}
.pc-cell{padding:6px 20px 22px 0}
.pc-cell+.pc-cell{padding:6px 0 22px 24px}
.pc-t{font-weight:650;font-size:17px;line-height:1.3}
.pc-t span{display:inline-block}
.pc-x{padding-top:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pc-eg{padding-top:10px;font:400 12.5px/1.35 var(--f-type);color:var(--ink-3)}
.pc-overlay{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;max-width:none}

/* flow: steps with arrows */
.pen-chart .pc-flow{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:34px;position:relative}
.pen-chart .pc-flow.is-down{grid-auto-flow:row;gap:30px}
.pen-chart .pc-flow li{position:relative;margin:0;padding:14px 14px 15px}
.pc-flow-n{display:block;font:500 12.5px/1 var(--f-type);color:var(--ink-3);margin-bottom:8px}
.pc-flow-t{font-weight:650;font-size:16.5px;line-height:1.3}
.pc-flow-x{padding-top:6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.pc-flow li.is-on .pc-flow-n,.pc-flow li.is-on .pc-flow-t{color:var(--pen)}

/* timeline: dated events down a line */
.pen-chart .pc-tl{list-style:none;margin:0;padding:0 0 0 34px;display:grid;gap:22px;position:relative}
.pen-chart .pc-tl li{position:relative;margin:0;padding:0}
.pc-tl-d{display:block;font:500 13px/1.3 var(--f-type);color:var(--ink-3)}
.pc-tl-t{font-weight:650;font-size:17px;line-height:1.3;padding-top:3px}
.pc-tl-x{padding-top:4px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.pc-tl li.is-on .pc-tl-d,.pc-tl li.is-on .pc-tl-t{color:var(--pen)}

/* compare: options side by side */
.pc-cmp{display:grid;position:relative}
.pc-cmp>div{padding:11px 12px 11px 0;font-size:15.5px;line-height:1.4}
.pc-cmp .pc-cmp-h{font-weight:650;font-size:16px;padding-bottom:12px}
.pc-cmp .pc-cmp-h span{display:inline-block}
.pc-cmp .pc-cmp-l{color:var(--ink)}
.pc-cmp .pc-cmp-v{color:var(--ink-2)}
.pc-cmp .pc-cmp-v svg{vertical-align:-4px}
.pc-cmp .pc-cmp-v.is-pick{color:var(--ink)}

/* stat: a few big numbers */
.pc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px 28px;position:relative}
.pc-stat-v{font-weight:700;font-stretch:104%;font-size:clamp(32px,5.4vw,42px);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pc-stat-v span{display:inline-block}
.pc-stat-l{padding-top:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pc-stat.is-pen .pc-stat-v{color:var(--pen)}

/* waffle legend */
.pc-waffle{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px}
.pc-waffle .pc-legend{flex-direction:column;align-items:flex-start;gap:10px;margin:0;font-size:15px;color:var(--ink)}

@media (max-width:520px){
  .e-body{font-size:18px;line-height:1.68}
  .e-body h2{font-size:22px}
  .e-table{font-size:15px}
  .e-table thead th{font-size:13px}
  .e-table td.n{font-size:14px}
  .pc-t{font-size:16px}
  .pc-x{font-size:14.5px}
  .pc-cell{padding-right:14px}
  .pc-cell+.pc-cell{padding-left:16px}
  .pc-cmp>div{font-size:14.5px}
}
@media print{
  .e-crumbs,.quiet{display:none}
  .essay{max-width:none;padding:0}
  .e-body{font-size:11.5pt;line-height:1.55}
  .e-fig{break-inside:avoid}
  a{text-decoration:none}
  .fn a{color:var(--ink)}
}