/* Chez Larsson */
:root {
  --cl-ink: #000000;
  --cl-ink-soft: #333333;
  --cl-muted: #666666;
  --cl-paper: #ffffff;
  --cl-shell: #ffffff;
  --cl-rule: #cccccc;
  --cl-accent: #000000;
  --cl-body: Helvetica, Arial, sans-serif;
  --cl-display: 'Trebuchet MS', Tahoma, Verdana, sans-serif;
  --cl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cl-measure: 31rem;
  --cl-page: 700px;
  --cl-rail: 200px;
  --cl-gap-1: 0.3rem;
  --cl-gap-2: 0.6rem;
  --cl-gap-3: 1rem;
  --cl-gap-4: 1.5rem;
  --cl-gap-5: 2.25rem;
  --cl-gap-6: 3.25rem;
  --cl-gap-7: 4.75rem;
  --cl-gap-8: 7rem;
}
/* ===========================================================================
   chezlarsson.cl-co — complete stylesheet
   White, black, grey. Sans throughout. 700px page / 500 column / 200 rail.
   No :root block here: tokens are generated above this sheet.
   One breakpoint, written literally as (max-width: 940px).
   =========================================================================== */

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Faithful to the original's body size: small (~13px) at 150% leading.
     Set on html so rem-free px values below stay predictable. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: var(--cl-ink); }

/* --- base type ------------------------------------------------------------ */

.cl-bd {
  font-family: var(--cl-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cl-ink);
  background: var(--cl-paper);
  /* No horizontal scroll at any width, including 320. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--cl-display);
  font-weight: bold;
  line-height: 1.25;
}

p { text-wrap: pretty; }

.cl-en-bd p + p,
.cl-mo-ld + .cl-mo-ld { margin-top: var(--cl-gap-4); }

/* Vertical rhythm inside the article body.
   The reset above zeroes every heading margin and nothing put it back, so an h2 sat
   flush against the paragraph before and after it. The delivered preview used h2s in
   the body and simply never styled them; the layout audit did not catch it either,
   because it measures horizontal insets and overflow, not vertical gaps.
   A heading takes more space above than below: it belongs to what follows. */
.cl-en-bd h2 { margin-block: var(--cl-gap-6) var(--cl-gap-3); }
.cl-en-bd h3 { margin-block: var(--cl-gap-5) var(--cl-gap-2); }
.cl-en-bd h2:first-child,
.cl-en-bd h3:first-child { margin-top: 0; }

.cl-en-bd ul,
.cl-en-bd ol { margin-block: var(--cl-gap-4); padding-left: var(--cl-gap-5); }
.cl-en-bd ul { list-style: disc; }
.cl-en-bd ol { list-style: decimal; }
.cl-en-bd li + li { margin-top: var(--cl-gap-2); }

.cl-en-bd blockquote {
  margin-block: var(--cl-gap-5);
  padding-left: var(--cl-gap-4);
  border-left: 2px solid var(--cl-rule);
  color: var(--cl-ink-soft);
}

.cl-en-bd p + ul,
.cl-en-bd p + ol,
.cl-en-bd ul + p,
.cl-en-bd ol + p,
.cl-en-bd p + blockquote,
.cl-en-bd blockquote + p { margin-top: var(--cl-gap-4); }

/* Links: black, underlined, and black on hover — the original's rule.
   Hover feedback therefore has to be non-chromatic: the underline thickens
   and drops away from the baseline. */
a:link, a:visited { color: var(--cl-ink); text-decoration: underline; text-underline-offset: 2px; }

a:hover {
  color: var(--cl-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:focus-visible,
.cl-sk:focus-visible {
  outline: 2px solid var(--cl-ink);
  outline-offset: 2px;
  text-decoration: none;
}

/* --- skip link ------------------------------------------------------------ */

.cl-sk {
  position: absolute;
  left: -9999px;
  top: 0;
}

.cl-sk:focus {
  position: static;
  display: block;
  padding: var(--cl-gap-3) var(--cl-gap-4);
  background: var(--cl-paper);
  font-family: var(--cl-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- shell ---------------------------------------------------------------- */

/* .cl-wr is the only centring device. Its inline padding is what keeps the
   700px page off the viewport edge below the breakpoint.
   The allowance is page + one grid gap, so column | rail resolve to a true
   500 | 200 — the gap is added to the shell rather than taken out of the
   content column, which is what the photographs were cut for. */
.cl-wr {
  width: 100%;
  max-width: calc(var(--cl-page) + var(--cl-gap-7) + var(--cl-gap-5) + var(--cl-gap-5));
  margin: 0 auto;
  padding-inline: var(--cl-gap-5);
}

/* --- banner --------------------------------------------------------------- */

.cl-ba {
  padding-block: var(--cl-gap-7) var(--cl-gap-5);
  padding-inline: var(--cl-gap-4);
  text-align: center;
}

.cl-wm {
  font-family: var(--cl-display);
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.cl-wm a:link,
.cl-wm a:visited { text-decoration: none; }
.cl-wm a:hover { text-decoration: underline; text-underline-offset: 4px; }

.cl-tg {
  margin-top: var(--cl-gap-3);
  font-family: var(--cl-display);
  font-size: 13px;
  line-height: 1.4;
  color: var(--cl-muted);
}

/* --- category strip ------------------------------------------------------- */

.cl-ca {
  border-top: 1px dotted var(--cl-rule);
  border-bottom: 1px dotted var(--cl-rule);
  padding-block: var(--cl-gap-3);
  padding-inline: var(--cl-gap-4);
  margin-bottom: var(--cl-gap-6);
}

.cl-ca-ls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cl-gap-2) var(--cl-gap-5);
}

.cl-ca-ta {
  font-family: var(--cl-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* The current tab is marked by weight, not colour — there is no accent. */
.cl-ca-ta[aria-current="page"] { font-weight: bold; }

/* --- page grid ------------------------------------------------------------ */

/* column | rail, exactly the original's alpha/beta proportions.
   minmax(0, …) so a wide photograph can never push the rail off-grid. */
.cl-pg {
  display: grid;
  grid-template-columns: minmax(0, var(--cl-measure)) var(--cl-rail);
  gap: var(--cl-gap-7);
  align-items: start;
  padding-bottom: var(--cl-gap-8);
}

.cl-co { min-width: 0; padding-inline: var(--cl-gap-4); }

.cl-rl { padding-inline: var(--cl-gap-4); }

/* --- entries -------------------------------------------------------------- */

.cl-en {
  padding-bottom: var(--cl-gap-7);
  margin-bottom: var(--cl-gap-7);
  border-bottom: 1px dotted var(--cl-rule);
}

.cl-en:last-child { border-bottom: 0; margin-bottom: 0; }

.cl-en-fu { padding-bottom: var(--cl-gap-6); }

/* A pinned entry is distinguished by an uppercase kicker and extra air,
   not by a tint or a box. */
.cl-en-pi .cl-ki { display: block; }

/* Dateline: centred, uppercase, above the title. */
.cl-st {
  display: block;
  font-family: var(--cl-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cl-muted);
  text-align: center;
}

.cl-ki {
  display: none;
  margin-top: var(--cl-gap-2);
  font-family: var(--cl-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
}

.cl-en-tl {
  margin-top: var(--cl-gap-3);
  margin-bottom: var(--cl-gap-5);
  font-size: 19px;
  text-align: center;
}

.cl-en-tl a:link,
.cl-en-tl a:visited { text-decoration: none; }
.cl-en-tl a:hover { text-decoration: underline; text-underline-offset: 4px; }

.cl-ld {
  margin-bottom: var(--cl-gap-5);
  font-size: 15px;
  color: var(--cl-ink-soft);
}

.cl-ex { margin-bottom: var(--cl-gap-4); }

/* --- photographs ---------------------------------------------------------- */

/* The recovered files are at most 600px wide, median 470, mostly portrait.
   width: auto keeps every one at its native size; the figure centres it in a
   column that is often wider. Nothing here can upscale.
   The negative inline margin cancels .cl-co's padding so a picture gets the
   full 500px measure while prose keeps its padding; the caption re-adds it. */
.cl-fg {
  margin-block: var(--cl-gap-5);
  margin-inline: calc(-1 * var(--cl-gap-4));
  text-align: center;
}

.cl-sh {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.cl-fg figcaption,
.cl-fg .cl-fi {
  margin-top: var(--cl-gap-3);
  padding-inline: var(--cl-gap-4);
  font-size: 12px;
  color: var(--cl-muted);
}

/* --- entry footer bits ---------------------------------------------------- */

.cl-pe,
.cl-fi {
  font-family: var(--cl-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cl-muted);
}

.cl-pe { display: block; margin-top: var(--cl-gap-5); text-align: center; }

.cl-fi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cl-gap-2) var(--cl-gap-3);
  margin-top: var(--cl-gap-3);
  justify-content: center;
}

.cl-ch { font-family: var(--cl-body); font-size: 12px; letter-spacing: 0; text-transform: none; }

/* --- pager ---------------------------------------------------------------- */

.cl-pr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-gap-5);
  padding-top: var(--cl-gap-6);
  border-top: 1px dotted var(--cl-rule);
}

.cl-pr-sl { min-width: 0; padding-inline: var(--cl-gap-3); }

.cl-pr-pr { text-align: left; }
.cl-pr-ne { grid-column: 2; text-align: right; }

.cl-pr-wo {
  display: block;
  font-family: var(--cl-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cl-muted);
}

.cl-pr-tl { display: block; margin-top: var(--cl-gap-2); font-size: 14px; }

/* --- index page ----------------------------------------------------------- */

.cl-ix { padding-inline: var(--cl-gap-4); }

.cl-ix-tl {
  margin-bottom: var(--cl-gap-6);
  font-size: 22px;
  text-align: center;
}

.cl-yr { margin-bottom: var(--cl-gap-7); }

.cl-yr-tl {
  padding-bottom: var(--cl-gap-2);
  border-bottom: 1px dotted var(--cl-rule);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cl-yr-ls { margin-top: var(--cl-gap-4); }

.cl-yr-ls li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cl-gap-2) var(--cl-gap-4);
  padding-block: var(--cl-gap-2);
}

.cl-yr-da {
  flex: 0 0 auto;
  min-width: 84px;
  font-family: var(--cl-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cl-muted);
}

/* --- rail modules --------------------------------------------------------- */

/* Not boxes: a heading, a dotted rule, a list. */
.cl-mo { margin-bottom: var(--cl-gap-7); }

.cl-mo-tl {
  padding-bottom: var(--cl-gap-2);
  border-bottom: 1px dotted var(--cl-rule);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cl-mo-ls { margin-top: var(--cl-gap-3); }

.cl-mo-ls li { padding-block: var(--cl-gap-2); font-size: 13px; }

.cl-mo-ld { margin-top: var(--cl-gap-3); font-size: 13px; }

.cl-mo-nt { margin-top: var(--cl-gap-3); font-size: 12px; color: var(--cl-muted); }

/* --- colophon ------------------------------------------------------------- */

.cl-cp {
  border-top: 1px dotted var(--cl-rule);
  padding-block: var(--cl-gap-6) var(--cl-gap-7);
  padding-inline: var(--cl-gap-4);
  text-align: center;
}

.cl-cp-ma {
  font-family: var(--cl-display);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.cl-cp-nt { margin-top: var(--cl-gap-3); font-size: 12px; color: var(--cl-muted); }

.cl-cp-ls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cl-gap-2) var(--cl-gap-4);
  margin-top: var(--cl-gap-4);
  font-size: 12px;
}

/* --- page-kind adjustments ------------------------------------------------ */

/* An article is one post: it needs no stream rules between entries. */
.cl-bd-ar .cl-en { border-bottom: 0; margin-bottom: var(--cl-gap-6); }

/* The index is a single full-width list, so it drops the rail column. */
.cl-bd-ix .cl-pg { grid-template-columns: minmax(0, 1fr); }

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 940px) {
  .cl-pg {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cl-gap-6);
  }

  /* The rail becomes a footer band, separated by a rule rather than a fill. */
  .cl-rl {
    border-top: 1px dotted var(--cl-rule);
    padding-top: var(--cl-gap-6);
  }

  .cl-ca-ls { justify-content: flex-start; }

  .cl-wm { font-size: 27px; }
  .cl-en-tl { font-size: 17px; }

  /* Both pager slots stack, so neither may claim column 2. */
  .cl-pr { grid-template-columns: minmax(0, 1fr); gap: var(--cl-gap-4); }
  .cl-pr-ne { grid-column: 1; text-align: left; }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- pointer targets ------------------------------------------------------
   Mechanics, not style. Every standalone link above sets its own type size and
   nothing else, so the anchors were 13-15px tall. WCAG 2.5.8 wants 24x24 CSS px for
   a pointer target, and its "inline" exemption covers links inside a sentence — not a
   navigation strip, a footer row or a sidebar list, which these are.
   Padding on an inline box does not grow the line box, so each one becomes
   inline-block first. Negative margins keep the visual rhythm the design set: the
   strip and the footer look identical, the hit areas are simply larger.
   -------------------------------------------------------------------------- */

.cl-ca-ta,
.cl-cp-ls a,
.cl-mo-ls a,
.cl-pe a,
.cl-ch {
  display: inline-block;
  padding-block: 5px;
}

/* claw back the height the padding added, so vertical rhythm is unchanged */
.cl-ca-ls { margin-block: -5px; }
.cl-cp-ls { margin-block: -5px; }
.cl-mo-ls li { padding-block: calc(var(--cl-gap-2) - 5px); }