/* IBM Plex, self-hosted. The house family, and the site keeps its promise of
   no external dependencies — three latin woff2 subsets, 41KB, no CDN, nothing
   leaked to a font host on page load. */
@font-face{
  font-family:"IBM Plex Serif"; font-style:normal; font-weight:400;
  font-display:swap; src:url(assets/fonts/plex-serif-400.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif"; font-style:italic; font-weight:400;
  font-display:swap; src:url(assets/fonts/plex-serif-400-italic.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif"; font-style:normal; font-weight:500;
  font-display:swap; src:url(assets/fonts/plex-serif-500.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif"; font-style:normal; font-weight:600;
  font-display:swap; src:url(assets/fonts/plex-serif-600.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url(assets/fonts/plex-mono-400.woff2) format("woff2");
}

/* One ink. One accent, and the accent is the entry's own colour.
   House rule: text is NEVER differentiated by tone. No halftone greys, no
   washed-out secondaries — everything renders at full ink, and hierarchy comes
   from size, font, or exactly one of weight / italic / case. --rule is named
   for its only legitimate job: hairlines and borders, never text. */
:root{
  --ink:#1B1D1F; --rule:#8B9096; --paper:#FBFAF7;
  --pigment:#7C888E; --strength:100%;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* display:flex on .buttons was beating the hidden attribute. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.6 var(--serif);
}
main{max-width:34rem; margin:0 auto; padding:14vh 1.5rem 6rem}
/* Every heading on the site is the same thing at a different size: serif,
   weight 600. Weight is the one styling axis they use — no caps, no tone. */
h1,.slug,.ask{font-family:var(--serif); letter-spacing:.005em}
h1{font-size:2rem; font-weight:500; margin:0}
/* The entry's own pigment, walked toward the ink by the build until it
   clears 4.5:1. Hue is identity here, not tone-as-hierarchy. */
.slug{font-size:1.3rem; font-weight:600; margin:0 0 .1rem; --tone:var(--tone-light); color:var(--tone)}
.ask{font-size:1.3rem; font-weight:600; margin:0 0 .9rem}
/* A gloss on the name — italic, not grey. */
/* A gloss on the name — italic, not grey, and not smaller. */
.remark{font-style:italic; margin:.4rem 0 1.6rem}
.links{display:flex; flex-wrap:wrap; gap:1.1rem}
.links a{color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor}
.links a:hover{border-bottom-width:2px}

/* The three things worth showing rather than naming. Logos in the page's ink
   (dark mode included), each with one plain sentence. The lunastak blob keeps
   its own gold, and its own slow animation. */
.marks{display:grid; gap:2.7rem; margin:3.2rem 0 0}
/* Two columns, always the same two: the mark on the left third, what it is on
   the right two-thirds. Reads as a list of things, not a row of badges. */
.marks a{
  display:grid; grid-template-columns:1fr 2fr; gap:1.2rem; align-items:center;
  color:var(--ink); text-decoration:none;
}
.marks svg{display:block; width:auto; max-width:100%}
.mark__logo{display:flex; align-items:center; justify-content:center}
.mark__caption{line-height:1.5}
.marks a:hover .mark__caption{text-decoration:underline}
.mark--humventures svg{height:2.4rem}
.mark--lunastak svg{height:4.1rem}
.mark--kernco svg{height:2.8rem}
@media (max-width:26rem){
  .marks a{grid-template-columns:1fr; gap:.6rem}
}

/* Not a card any more. The eyebrow, the slug and the date sit on the page's
   own left edge like any other heading block; only the quoted summary carries
   the colour — a full-tone bar with the pigment washed behind it, indented so
   the quote reads as something set apart rather than a boxed callout. */
.entry{display:block; margin:3.5rem 0 0}
/* The heading is the way into the collection. It already carries the entry's
   colour, so it reads as a link without needing an underline to say so. */
.slug a{color:inherit; text-decoration:none}
.slug a:hover{text-decoration:underline; text-underline-offset:.18em}
/* Arriving from the surface: land clear of the viewport edge, and thicken the
   bar so it is obvious which entry you came for. */
.entry{scroll-margin-top:3rem}
.entry:target .summary{border-left-width:8px}
/* Only rendered when the summary really is an extract. Lives inside the quote
   rather than under it, so the invitation belongs to the extract it is about.
   Reads as a link — body serif, full ink — but carries no underline; the
   triangle is the affordance. */
.more{
  text-align:right; font-family:var(--serif); font-size:inherit;
  margin:.9rem 0 0; text-decoration:none;
}
.more::after{content:"\00A0\25B8"}
/* On a collection entry the cue is a real link out to the article. */
.more a{color:inherit; text-decoration:none}
/* Allcaps earns its place here: an eyebrow is a category, not a sentence. */
.eyebrow{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .45rem;
}
.summary>p{margin:0 0 .85rem}
.summary>p:last-child{margin-bottom:0}
.summary{
  --wash:var(--wash-light);
  margin:.9rem 0 0; padding:.95rem 1.15rem;
  border-left:3px solid var(--pigment);
  background:color-mix(in oklab, var(--pigment) var(--wash), var(--paper));
}

/* The portrait anchors the question from the right — the mirror of the marks
   above it, which put their images left. The question reads first and the face
   answers it, which is the right way round for a game about whether this is him.
   Source order matches, so it stacks heading-first on a narrow screen. */
/* Under the card: one more entry, or the whole thing. */
.controls{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1.4rem;
  margin:.9rem 0 0;
}
.controls a,.controls button{
  font:inherit; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em;
  color:var(--ink); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:none; border-bottom:1px solid currentColor;
}
.controls a:hover,.controls button:hover{border-bottom-width:2px}
/* A loop with an arrowhead: this one reloads in place. */
#another::after{content:"\00A0\21BB"}

#game{
  display:grid; grid-template-columns:2fr 1fr; gap:0 1.4rem;
  align-items:start; margin-top:4.5rem;
}
/* The heading owns its own row so the portrait can start level with the
   statement rather than the heading. Placed, not nudged with a margin — the
   alignment then survives any change to the heading's size or leading. */
.ask{grid-column:1; grid-row:1}
.game__body{grid-column:1; grid-row:2}
.game__mark{grid-column:2; grid-row:2}
.game__mark{display:flex; justify-content:center}
/* The drawing is 105KB of traced linework — too much to inline into the page,
   and an <img> cannot take currentColor. Masking it lets the file stay external
   and cacheable while the ink still flips with the theme. */
.portrait{
  display:block; height:7.5rem; aspect-ratio:1008/1031;
  background:currentColor;
  -webkit-mask:url(assets/jonny.svg) center/contain no-repeat;
  mask:url(assets/jonny.svg) center/contain no-repeat;
}
@media (max-width:26rem){
  #game{grid-template-columns:1fr; gap:1rem 0}
  .ask,.game__body,.game__mark{grid-column:1; grid-row:auto}
  .game__mark{justify-content:flex-start}
  .portrait{height:5.5rem}
}
.ask{display:block; margin:0 0 1rem}
blockquote{margin:0 0 1rem; padding:0}
#statement p{margin:0}
.buttons{display:flex; gap:.6rem; margin:0}
button{
  font:inherit; font-size:.9rem; background:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:0; padding:.35rem .9rem; cursor:pointer;
}
button:hover{border-color:var(--ink)}
.verdict{margin:.9rem 0 0}
/* A score is digits: mono and small, not grey. */
.tally{font-family:var(--mono); font-size:.7rem; margin:.7rem 0 0; min-height:1.2em}
/* The ending. A score, a line, and one place to go next. */
.result{margin:.2rem 0 0}
.result p{margin:0 0 .6rem}
.result p:last-child{margin-bottom:0}
.score{font-family:var(--serif); font-weight:600; font-size:1.35rem}
.again a,.linkish{
  font:inherit; color:var(--ink); text-decoration:none;
  border:0; border-bottom:1px solid currentColor; background:none;
  padding:0; cursor:pointer;
}
.again a:hover,.linkish:hover{border-bottom-width:2px}
.again a{margin-right:.9rem}

/* A header row the page scrolls under. Full-bleed so the blur reads across the
   window, with the arrow held on the same left edge as the entries below it. */
.bar{
  position:sticky; top:0; z-index:2;
  background:color-mix(in oklab, var(--paper) 72%, transparent);
  backdrop-filter:blur(12px) saturate(1.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);
}
/* Without backdrop-filter a translucent bar is just smeared text underneath. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar{background:var(--paper)}
}
.bar .back{
  max-width:38rem; margin:0 auto; padding:1.05rem 1.5rem;
}
/* Softens the cut where content passes under the bar. */
.bar::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:1.4rem;
  background:linear-gradient(color-mix(in oklab, var(--paper) 72%, transparent), transparent);
  pointer-events:none;
}

.collection{max-width:38rem; padding-top:3rem}
/* margin-bottom only — a `margin` shorthand here would reset the negative
   left margin that keeps the slug on the page's heading plane. */
.collection .entry{margin:0 0 3.2rem}
/* One wash on the surface is a flourish; twenty-five is wallpaper. The bar
   alone carries the colour here, and the heading does the rest. */
.collection .summary{background:none; padding:.1rem 0 .1rem 1.15rem}

.back a{color:var(--ink); text-decoration:none; font-size:1.2rem; display:inline-block}
/* A colophon line, in the same italic register as the remark. */
.count{font-style:italic; font-size:.85rem; margin-top:2.5rem}

@media (prefers-color-scheme:dark){
  :root{--ink:#E8E4DD; --rule:#7E848A; --paper:#141618}
  /* Set here, not inline, so the media query can win. */
  .summary{--wash:var(--wash-dark)}
  .slug{--tone:var(--tone-dark)}
}