/* seanacres.com — "Marked up"
   ===========================================================================
   The page is a document that has been reviewed by hand, because that is what
   happened to this material: an audit on 2026-08-09 struck several claims off
   the resume and downgraded four more. The numbers left standing are worth
   believing because of what came off, so the page shows the marks.

   FOUR RULES. Every mark obeys one, which is what keeps the chaos systematic:

     1. Red ballpoint only ever annotates a NUMBER, or strikes a claim that
        did not survive. It is never decoration.
     2. Highlighter only ever marks a CAVEAT. The yellow is the honesty layer.
     3. Tape only ever holds something down. Never an ornament.
     4. Rotation comes from the set {-1.6, -0.7, 0.6, 1.4} degrees. Nothing is
        rotated by an arbitrary amount.

   The document underneath is dead straight. Only the review layer is crooked.

   LIGHT ONLY, deliberately. Paper does not invert, and a dark theme here would
   be a second design wearing a toggle. Said out loud in the colophon rather
   than hidden.

   Palette from amblesome/design/03-zine.html, which is Sean's own.
   =========================================================================== */

@font-face{font-family:"Slab";src:url("/assets/fonts/zilla-slab-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Slab";src:url("/assets/fonts/zilla-slab-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Slab";src:url("/assets/fonts/zilla-slab-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Slab";src:url("/assets/fonts/zilla-slab-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Pen";src:url("/assets/fonts/caveat.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Stamp";src:url("/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap}

:root{
  color-scheme: light;

  --toner:#16150F; --toner-2:#454239; --faint:#7C776A;
  --stock:#DEDBD0; --stock-2:#EBE8DE; --stock-3:#CFCBBE;
  --hi:#EDE93B;      /* highlighter */
  --pen:#B32B22;     /* red ballpoint */
  --stamp:#1B336F;   /* the one other ink, stamps only */
  --tape:#D8CBA6;

  --slab:"Slab",Rockwell,"Courier New",Georgia,serif;
  --pen-face:"Pen","Marker Felt","Bradley Hand",cursive;
  --mono:"Stamp",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1080px;
  --measure:64ch;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  color:var(--toner);
  font:16px/1.62 var(--slab);
  background:var(--stock);
  background-image:
    radial-gradient(circle at 12% 22%,rgba(0,0,0,.045) 0 1px,transparent 1px),
    radial-gradient(circle at 68% 61%,rgba(0,0,0,.04) 0 1px,transparent 1px),
    radial-gradient(circle at 37% 84%,rgba(0,0,0,.035) 0 1px,transparent 1px),
    linear-gradient(178deg,var(--stock-2),var(--stock-3));
  background-size:37px 37px,53px 53px,71px 71px,100% 100%;
  padding-bottom:80px;
  -webkit-font-smoothing:antialiased;
}

/* Real scanned stock, generated through the Tosskeep pipeline and picked from
   8 candidates. One viewport-sized fixed layer rather than a tile, so there is
   no seam to solve; as an element rather than background-attachment:fixed,
   which iOS Safari renders badly and which also breaks full-page capture. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/textures/stock.jpg") center/cover;
  mix-blend-mode:multiply;opacity:.62}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 22px}

p{margin:0 0 1rem;max-width:var(--measure);color:var(--toner-2)}
strong{color:var(--toner);font-weight:700}
a{color:var(--pen)}
::selection{background:var(--hi);color:var(--toner)}

/* Rule 2: the highlighter marks caveats, nothing else. */
.caveat-mark{background:var(--hi);padding:0 3px;box-decoration-break:clone;
  -webkit-box-decoration-break:clone;color:var(--toner)}

/* Rule 1, second half: a claim that did not survive stays visible, struck.
   Legibility is the entire point. A first pass set this in the hand face at
   --faint and the retracted line could not be read, which turns the strongest
   moment on the page into a grey smudge. It is quoted copy, so it is set in
   the document face, at document contrast, and only the strike is red. */
.struck-claim{color:var(--toner-2);text-decoration:line-through;
  text-decoration-color:var(--pen);text-decoration-thickness:2.5px}

.hand{font-family:var(--pen-face);color:var(--pen);font-size:1.22em;line-height:1.28}

/* ------------------------------------------------------------- masthead */

.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  border-bottom:3px double var(--toner);padding:26px 0 10px;flex-wrap:wrap}
.masthead .name{font:700 21px/1 var(--slab);letter-spacing:-.5px;text-transform:lowercase;
  text-decoration:none;color:var(--toner)}
.masthead nav{display:flex;gap:18px;font:500 10.5px/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--toner-2)}
.masthead nav a{color:inherit;text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid transparent}
.masthead nav a:hover,.masthead nav a:focus-visible{border-color:var(--pen);color:var(--pen)}

/* ----------------------------------------------------------------- hero */

.hero{position:relative;padding:56px 0 26px}
.filed{position:absolute;top:18px;right:0;font:500 9.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}

h1{font:700 clamp(42px,8.6vw,94px)/.94 var(--slab);letter-spacing:-3px;margin:0;
  max-width:14ch;position:relative;text-wrap:balance}

/* The correction anchors to the struck WORD. Anchored to the heading box it
   read as a stray word above line one rather than as an edit. */
h1 .corr{position:relative;display:inline-block}
h1 .struck{color:var(--toner-2)}
h1 .struck::after{content:"";position:absolute;left:-.03em;right:-.03em;top:.5em;height:4px;
  background:var(--pen);transform:rotate(-1.2deg)}
h1 .fix{position:absolute;left:.12em;top:-.56em;font-family:var(--pen-face);color:var(--pen);
  font-size:.52em;font-weight:700;letter-spacing:0;white-space:nowrap;transform:rotate(-2.2deg)}
h1 .fix::after{content:"";position:absolute;left:.42em;bottom:-.2em;width:.8em;height:.34em;
  border-left:3px solid var(--pen);border-bottom:3px solid var(--pen);transform:skewX(-20deg)}

.lede{font-size:19px;line-height:1.45;max-width:44ch;margin:30px 0 0;color:var(--toner)}

/* ------------------------------------------------------- annotated figures */

.figs{display:grid;gap:34px 30px;margin:54px 0 8px}
@media(min-width:900px){.figs{grid-template-columns:1fr 1fr}}
.fig{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:start}
.fig .n{font:700 clamp(40px,6.4vw,64px)/.9 var(--slab);letter-spacing:-3px;white-space:nowrap}
.fig .n em{font-style:normal;color:var(--pen)}
.fig .l{grid-column:1;font:500 9.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--toner-2);margin-top:10px;border-top:1px solid var(--toner);padding-top:6px;
  max-width:30ch}
.fig .note{grid-column:2;grid-row:1 / span 2;position:relative;padding:6px 0 0 46px;
  align-self:start;font-family:var(--pen-face);color:var(--pen);font-size:16.5px;line-height:1.3}
.fig .note svg{position:absolute;left:0;top:10px;overflow:visible}
.fig-1 .note{transform:rotate(-1.6deg)}
.fig-2 .note{transform:rotate(1.4deg)}

/* Rule 1 on small screens: the arrow drops, the note stacks under the number
   it annotates, and red keeps its meaning. */
@media(max-width:640px){
  .fig{grid-template-columns:1fr}
  .fig .note{grid-column:1;grid-row:auto;padding:10px 0 0;transform:none}
  .fig .note svg{display:none}
  .fig .note::before{content:"\2191";display:block;font-family:var(--mono);font-size:13px;
    margin-bottom:2px}
}

/* ---------------------------------------------------------------- sheets */

.sheet{background:var(--stock-2);border:1px solid var(--stock-3);padding:22px 24px;
  margin-top:36px;box-shadow:3px 3px 0 rgba(22,21,15,.15);position:relative;isolation:isolate}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:url("/assets/textures/toner.jpg") center/cover;
  mix-blend-mode:multiply;opacity:.22}
.sheet > h2{margin:0 0 5px;font:700 10px/1 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--pen)}
.sheet > .sub{margin:0 0 22px;font-size:14.5px;color:var(--toner-2);max-width:var(--measure)}

/* --------------------------------------------------------- project cards */

.cards{display:grid;gap:22px}
@media(min-width:820px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--stock);border:1px solid var(--toner);padding:18px 18px 16px;
  position:relative;box-shadow:2px 2px 0 rgba(22,21,15,.2)}
.card:nth-child(1){transform:rotate(-.7deg)}
.card:nth-child(2){transform:rotate(.6deg)}
.card:nth-child(3){transform:rotate(1.4deg)}
.card:nth-child(4){transform:rotate(-1.6deg)}

/* Rule 3: tape holds a card down. It appears nowhere else. */
.tape{position:absolute;width:104px;height:27px;opacity:.9;
  background:url("/assets/textures/tape-1.png") center/100% 100% no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.card:nth-child(2) .tape{background-image:url("/assets/textures/tape-2.png")}
.card:nth-child(3) .tape{background-image:url("/assets/textures/tape-3.png")}
.card:nth-child(4) .tape{background-image:url("/assets/textures/tape-2.png");
  transform:rotate(-3deg) scaleX(-1)}
.card:nth-child(odd) .tape{top:-12px;left:20px;transform:rotate(-4deg)}
.card:nth-child(even) .tape{top:-11px;right:24px;transform:rotate(3.5deg)}

.card .kind{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.card h3{font:700 24px/1 var(--slab);letter-spacing:-1px;margin:8px 0 4px}
.card p{font-size:14.5px;margin:12px 0 0}
.card ul{margin:12px 0 0;padding-left:17px;font-size:14px;color:var(--toner-2)}
.card li{margin-bottom:6px}
.card .state{margin-top:16px;padding-top:10px;border-top:1px dashed var(--stock-3);
  font:500 9.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  padding-right:96px}

.stamp{position:absolute;right:16px;bottom:14px;border:2.5px solid var(--pen);color:var(--pen);
  font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;
  transform:rotate(-6deg);opacity:.85;box-shadow:inset 0 0 0 1px rgba(179,43,34,.3)}
.stamp.is-live{border-color:var(--stamp);color:var(--stamp);transform:rotate(4deg)}

/* --------------------------------------------------------------- studies */

.study{display:grid;gap:6px 22px;padding:17px 0;border-bottom:1px dashed var(--stock-3);
  text-decoration:none;color:inherit;position:relative}
@media(min-width:820px){.study{grid-template-columns:28px 1fr 220px;align-items:baseline}}
.study:first-of-type{border-top:1px solid var(--toner)}
.study .pt{font:700 17px/1 var(--slab);color:var(--pen)}
.study h3{margin:0 0 4px;font:700 20px/1.15 var(--slab);letter-spacing:-.6px}
.study p{margin:0;font-size:14px;max-width:58ch}
.study .from{font:500 9.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.study:hover h3,.study:focus-visible h3{color:var(--pen)}

/* ---------------------------------------------------------- study article */

.article,.article-body{max-width:52rem;margin-left:auto;margin-right:auto}
.article{padding:44px 0 0}
.article .from{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--pen);margin:0 0 14px}
.article h1{font-size:clamp(34px,5.6vw,62px);letter-spacing:-2px;max-width:17ch;line-height:1}
.article .dek{font-size:18px;line-height:1.45;max-width:46ch;margin:22px 0 0;color:var(--toner)}

.article-body{padding:8px 0 0}
.article-body h2{font:700 clamp(21px,2.6vw,26px)/1.2 var(--slab);letter-spacing:-.8px;
  margin:44px 0 12px;max-width:24ch}
.article-body h2:first-child{margin-top:0}
.article-body ul{margin:0 0 20px;padding-left:19px;max-width:var(--measure)}
.article-body li{margin-bottom:9px;color:var(--toner-2)}

/* A quoted claim is document text, not an annotation. The hand face is
   reserved for marks a person made in the margin; using it here made the
   retracted copy look like a note about the copy. */
blockquote{margin:26px 0;padding:14px 18px;border-left:3px solid var(--pen);
  background:var(--stock-2);font-size:16px;line-height:1.55;max-width:52ch}
blockquote p{max-width:none;margin:0}

/* ---------------------------------------------------------------- tables */

.evidence{overflow-x:auto;margin:26px 0 30px;border:1px solid var(--toner);
  background:var(--stock-2);box-shadow:2px 2px 0 rgba(22,21,15,.15)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:34rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--stock-3);vertical-align:top;
  color:var(--toner-2)}
th{font:500 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pen);
  white-space:nowrap;border-bottom:1px solid var(--toner)}
tbody tr:last-child td{border-bottom:0}
td strong{color:var(--toner)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--toner)}
td.rung{font:600 13px/1 var(--mono);color:var(--pen)}

/* --------------------------------------------------------------- charts
   Drawn in the same two inks as everything else. Rule 1 holds here too: the
   red line is the one the reader is meant to be surprised by (the expensive
   model getting worse), because that is the measured finding. */

.chart{margin:26px 0 6px;max-width:var(--shell);overflow-x:auto}
.chart svg{width:100%;min-width:520px;height:auto;display:block;overflow:visible}
.figcaption{font:500 11px/1.55 var(--mono);color:var(--faint);margin:12px 0 26px;
  max-width:60ch;letter-spacing:.02em}

.s-axis{stroke:var(--toner);stroke-width:1.5}
.s-grid{stroke:var(--stock-3);stroke-width:1}
.s-label{fill:var(--toner-2);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.s-name{fill:var(--toner);font-family:var(--slab);font-size:14px;font-weight:700}
.s-up{stroke:var(--toner);stroke-width:2.5;fill:none;stroke-linecap:round}
.s-down{stroke:var(--pen);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:6 4}
.s-dot-up{fill:var(--toner)}
.s-dot-down{fill:var(--pen)}

/* ---------------------------------------------------------------- footer */

footer{margin-top:48px;border-top:3px double var(--toner);padding-top:16px}
.foot-links{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.foot-links a{color:var(--toner-2);text-decoration:none;border-bottom:1px solid var(--stock-3)}
.foot-links a:hover{color:var(--pen);border-color:var(--pen)}
.colophon{font-size:13.5px;color:var(--faint);max-width:58ch;margin:18px 0 0;line-height:1.55}

.backlink{display:inline-block;margin-top:38px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--toner-2)}
.backlink:hover{color:var(--pen)}

:focus-visible{outline:2px solid var(--pen);outline-offset:3px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media print{
  body{background:#fff;padding:0}
  .masthead nav,.backlink{display:none}
  .sheet,.card{box-shadow:none}
}