/* skisaksen.com — an electrical engineer's lab notebook.
   Pale green computation paper, a red margin rule down the left, dates in the margin, blue-black ink.
   Display: Big Shoulders Display (condensed). Text: Source Serif 4 (variable, wght axis). */

@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2-variations"),
      url(/assets/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2-variations"),
      url(/assets/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2")}

:root{
  --paper:#EDF1E5;      /* engineering computation paper */
  --grid:#D3DDCB;       /* quadrille ruling */
  --grid-ink:#A9B8A0;   /* ruling under the cursor */
  --ink:#1E2A3B;        /* blue-black pen */
  --pencil:#55614F;     /* secondary text (AA on paper) */
  --margin:#B8382C;     /* red margin rule, the one accent */
  --wash:#E2E8D8;       /* quiet fill */
  --display:"Big Shoulders Display","Arial Narrow","Roboto Condensed",sans-serif;
  --text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --col:64ch;
  --cell:24px;
  --rule-x:clamp(0px,11vw,200px);
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --ease-pen:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#171E1A;--grid:#232D27;--grid-ink:#3A4A40;--ink:#E2E7DA;--pencil:#A3AE9E;--margin:#E8705F;--wash:#1F2822;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#171E1A;--grid:#232D27;--grid-ink:#3A4A40;--ink:#E2E7DA;--pencil:#A3AE9E;--margin:#E8705F;--wash:#1F2822;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  color:var(--ink);
  font:400 1.0625rem/1.65 var(--text);
  font-optical-sizing:auto;
  overflow-x:hidden;
}
a{color:inherit;text-decoration-color:var(--margin);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--margin)}
:focus-visible{outline:2px solid var(--margin);outline-offset:3px;border-radius:2px}
::selection{background:var(--margin);color:var(--paper)}

/* Ink under the cursor: a second, darker ruling revealed through a soft circular mask.
   Pointer devices only; stays hidden until JS reports a position. */
@media (hover:hover) and (pointer:fine){
  .js body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(var(--grid-ink) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
    background-size:var(--cell) var(--cell);
    -webkit-mask:radial-gradient(220px 220px at var(--mx,-999px) var(--my,-999px),#000 0,rgba(0,0,0,.6) 40%,transparent 100%);
            mask:radial-gradient(220px 220px at var(--mx,-999px) var(--my,-999px),#000 0,rgba(0,0,0,.6) 40%,transparent 100%);
  }
}

.skip{position:absolute;left:var(--gutter);top:-200px;z-index:10;background:var(--ink);color:var(--paper);padding:8px 14px;font-family:var(--display);font-weight:700;letter-spacing:.03em;text-decoration:none}
.skip:focus{top:8px;outline-offset:0}

.page{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;min-height:100vh;
  padding-left:var(--gutter);
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 72px;
}
/* the margin rule */
.rule{
  position:absolute;top:0;bottom:0;
  left:calc(var(--gutter) + var(--rule-x));
  width:2px;background:var(--margin);opacity:.78;
  transform-origin:top;
}
.row{display:grid;grid-template-columns:var(--rule-x) minmax(0,var(--col));column-gap:28px}
.row>.m{padding-right:16px;text-align:right;color:var(--pencil);font-size:.875rem;line-height:1.4;padding-top:.35em}
.row>.m a{text-decoration-thickness:1px}
.row>.m .note{margin:0;text-align:left;font-style:italic;font-size:.8rem;line-height:1.45;padding-top:.3em}
.row>.b{min-width:0}

.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-block:28px 0}
.name{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.02em;text-decoration:none}
nav{display:flex;gap:22px;font-size:.95rem}
nav a{text-decoration:none;border-bottom:1.5px solid transparent}
nav a[aria-current="page"]{border-bottom-color:var(--margin)}

/* hero */
.hero{padding-block:72px 40px}
.count{
  font-family:var(--display);font-weight:800;
  font-size:clamp(5.5rem,19vw,15rem);line-height:.82;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin:0;
}
/* odometer built by JS from the plain number; the plain number is what renders without JS */
.count .od{display:inline-block;height:.82em;overflow:hidden;vertical-align:top}
.count .od-reel{display:block;margin-top:-.09em;transform:translateY(0);will-change:transform}
.count .od-reel span{display:block;height:1em;line-height:1}
.lede{font-size:clamp(1.2rem,2.1vw,1.45rem);line-height:1.45;max-width:34ch;margin:22px 0 0;text-wrap:balance}

/* the strip — an SVG so the widths are attributes, not inline styles (CSP), drawn like a pen trace */
.strip{margin-top:40px}
.bar{display:block;width:100%;height:22px;border:1.5px solid var(--ink);background:var(--paper)}
.bar rect{transform-box:fill-box;transform-origin:left}
.bar .enf{fill:var(--margin)}
.bar .wri{fill:url(#hatch)}
.bar .hatch-line{stroke:var(--margin);stroke-width:2}
.bar .pro{fill:transparent}
.key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;margin-top:14px;font-size:.92rem;color:var(--pencil)}
.key b{display:block;font-family:var(--display);font-weight:700;font-size:1.65rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.key i{display:inline-block;width:12px;height:12px;border:1.5px solid var(--ink);vertical-align:-1px;margin-right:6px}
.key .k1 i{background:var(--margin)}
.key .k2 i{background:repeating-linear-gradient(135deg,var(--margin) 0 2px,transparent 2px 5px)}
.measured{margin-top:18px;font-size:.85rem;color:var(--pencil)}

h1,h2{font-family:var(--display);letter-spacing:.01em;text-wrap:balance}
h2{font-weight:700;font-size:2rem;line-height:1.05;margin:0 0 18px}
section{padding-block:56px 0}
p{margin:0 0 1em}
.more{display:inline-block;margin-top:10px;font-size:.95rem}

/* notebook list */
.entry-link{display:block;text-decoration:none;padding:18px 0;border-top:1.5px solid var(--ink)}
.entry-link:last-of-type{border-bottom:1.5px solid var(--ink)}
.entry-link h3{font-family:var(--text);font-weight:600;font-size:1.35rem;line-height:1.25;margin:0 0 6px;text-wrap:balance}
.entry-link p{margin:0;color:var(--pencil)}
.entry-link:hover h3{color:var(--margin)}
.empty{color:var(--pencil);font-style:italic;margin-top:14px}

/* scorecard — bars plotted on the paper's own grid */
.areas{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.areas li{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr) 4ch;gap:12px;align-items:center;font-size:.95rem}
.areas .track{display:block;width:100%;height:14px;background:var(--wash);border:1px solid var(--grid)}
.areas .track .tick{stroke:var(--grid-ink);stroke-width:.4;stroke-dasharray:1 1}
.areas .fill{fill:var(--ink);transform-box:fill-box;transform-origin:left}
.areas .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.axis{display:grid;grid-template-columns:minmax(0,22ch) minmax(0,1fr) 4ch;gap:12px;margin-top:6px;font-size:.78rem;color:var(--pencil);font-variant-numeric:tabular-nums}
.axis .ticks{position:relative;height:1.4em}
.axis .ticks span{position:absolute;top:0;transform:translateX(-50%)}
.axis .ticks span:first-child{transform:none}
.axis .ticks span:last-child{transform:translateX(-100%)}
.axis .t1{left:25%}.axis .t2{left:50%}.axis .t3{left:75%}.axis .t4{left:100%}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:36px}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:.95;font-variant-numeric:tabular-nums}
.facts p{margin:8px 0 0;color:var(--pencil);font-size:.95rem}

.about p{max-width:60ch}

/* footer with a drawing title block */
footer{padding-top:72px;color:var(--pencil);font-size:.88rem}
.colophon{margin:0 0 18px}
.tblock{
  display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content);
  border:1.5px solid var(--pencil);width:fit-content;max-width:100%;
  font-size:.78rem;line-height:1.3;color:var(--pencil);
}
.tblock>div{padding:6px 14px 7px 12px;min-width:0}
.tblock>div:nth-child(2n){border-left:1px solid var(--pencil)}
.tblock>div:nth-child(n+3){border-top:1px solid var(--pencil)}
.tblock small{display:block;font-family:var(--display);font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-bottom:1px}
.tblock span{display:block;color:var(--ink);font-size:.8rem}

/* entry view */
.essay{padding-block:64px 0}
.essay h1{font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.95;margin:0 0 20px}
.essay .standfirst{font-size:1.25rem;line-height:1.5;color:var(--pencil);margin-bottom:36px}
.essay p{font-size:1.125rem;line-height:1.72}
.essay blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:3px solid var(--margin);font-style:italic;font-size:1.2rem}
.back{display:inline-block;margin-top:40px}
.draft{display:inline-block;font-size:.8rem;color:var(--margin);border:1.5px solid var(--margin);padding:1px 8px;margin-bottom:14px}

/* page headings on scorecard / about / 404 */
.lead{padding-block:64px 0}
.lead h1{font-weight:800;font-size:clamp(2.6rem,6vw,4.4rem);line-height:.95;margin:0 0 20px}
.lead.about{padding-bottom:0}
.lead.about h1{margin-bottom:8px}
.lead .standfirst{font-size:1.25rem;line-height:1.5;color:var(--pencil);margin-bottom:28px;max-width:40ch}

/* phone: margin collapses to a thin rule at the gutter, margin notes move above */
@media (max-width:720px){
  :root{--rule-x:0px}
  .rule{left:6px;width:2px}
  .row{grid-template-columns:minmax(0,1fr);column-gap:0}
  .row>.m{text-align:left;padding:0 0 6px}
  .row>.m:empty{display:none}
  .hero{padding-block:48px 28px}
  .key{grid-template-columns:minmax(0,1fr);gap:10px}
  .key>div{display:flex;align-items:baseline;gap:10px}
  .key b{display:inline;font-size:1.4rem;min-width:3.2ch}
  .facts{grid-template-columns:minmax(0,1fr)}
  .areas li,.axis{grid-template-columns:minmax(0,11ch) minmax(0,1fr) 4ch;font-size:.88rem}
  .axis{font-size:.75rem}
  .tblock{grid-template-columns:minmax(0,1fr);width:auto}
  .tblock>div:nth-child(2n){border-left:0}
  .tblock>div:nth-child(n+2){border-top:1px solid var(--pencil)}
  .tblock span{white-space:normal}
}
@media (max-width:420px){
  .top{flex-direction:column;align-items:flex-start;gap:10px}
}
/* 2K and wider: the condensed face is sized for this screen, not stretched to it */
@media (min-width:2000px){
  :root{--col:72ch;--cell:28px;--rule-x:clamp(0px,11vw,300px)}
  body{font-size:1.3rem}
  .page{max-width:1760px}
  .row{column-gap:40px}
  .row>.m{font-size:1.05rem}
  .top{padding-top:40px}
  .name{font-size:1.9rem}
  nav{font-size:1.15rem;gap:30px}
  .hero{padding-block:96px 56px}
  .count{font-size:18rem}
  .lede{font-size:1.75rem}
  .bar{height:28px}
  .key{font-size:1.1rem}
  .key b{font-size:2.1rem}
  .measured,.colophon{font-size:1.02rem}
  .lead h1,.essay h1{font-size:5.6rem}
  .lead .standfirst,.essay .standfirst{font-size:1.5rem}
  .essay p{font-size:1.35rem}
  .essay blockquote{font-size:1.45rem}
  h2{font-size:2.6rem}
  .entry-link h3{font-size:1.6rem}
  .areas li,.axis{font-size:1.1rem}
  .areas .track{height:18px}
  .facts b{font-size:4.2rem}
  .facts p{font-size:1.1rem}
  .tblock{font-size:.95rem}
  .tblock small{font-size:.85rem}
  .tblock span{font-size:1rem}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* the margin rule draws itself; a cross-document view transition keeps it (and the masthead) still */
  .rule{view-transition-name:rule}
  .masthead{view-transition-name:masthead}
  .home .rule{animation:draw-rule .8s var(--ease-pen) both}
  @keyframes draw-rule{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* the strip fills like a pen trace, after the count has settled */
  .home .bar rect{animation:draw .9s var(--ease-pen) both;animation-delay:.7s}
  .home .bar .wri{animation-delay:.85s}
  .home .bar .pro{animation:none}
  @keyframes draw{from{transform:scaleX(.001)}to{transform:scaleX(1)}}

  /* scorecard bars draw in once they scroll into view; without JS they are simply there */
  .js .areas .fill{transform:scaleX(.001)}
  .js .areas.in .fill{animation:draw .8s var(--ease-pen) both}
  .js .areas.in li:nth-child(2) .fill{animation-delay:.06s}
  .js .areas.in li:nth-child(3) .fill{animation-delay:.12s}
  .js .areas.in li:nth-child(4) .fill{animation-delay:.18s}
  .js .areas.in li:nth-child(5) .fill{animation-delay:.24s}
  .js .areas.in li:nth-child(6) .fill{animation-delay:.30s}
  .js .areas.in li:nth-child(7) .fill{animation-delay:.36s}
  .js .areas.in li:nth-child(8) .fill{animation-delay:.42s}
  .js .areas.in li:nth-child(9) .fill{animation-delay:.48s}

  .count .od-reel{transition:transform 1.1s cubic-bezier(.22,.9,.3,1)}

  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:220ms var(--ease-pen) both page-out}
  ::view-transition-new(root){animation:260ms var(--ease-pen) both page-in}
  @keyframes page-out{to{opacity:0}}
  @keyframes page-in{from{opacity:0;transform:translateY(6px)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js body::before{display:none}
}

.od-said{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}