:root{
  --paper:#F7F6F3;
  --ink:#141312;
  --grey:#76726B;
  --rule:#DCD9D3;
  --mark:#FBF719;
  --plate:#EBE9E4;
  --u:11px;
  --line:22px;
}

/* dark mode — warm black, warm ink, mauve mark. same variables, new values;
   everything below reads them, so this block is the whole theme.
   the mark itself stays a dark panel here (not a bright pop like the
   yellow) — a couple shades lighter than paper, same hue family as the
   accent, with the ordinary light ink running through it unchanged. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1B1815;
    --ink:#E7E1D8;
    --grey:#948C80;
    --rule:#3A332C;
    --mark:#5D3C49;
    --plate:#242019;
  }
}
*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
  a, .log-link, summary{ transition:color 120ms ease, text-decoration-color 120ms ease; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', serif;
  font-optical-sizing:auto;
  font-size:13.5px;
  line-height:var(--line);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1, "liga" 1;
}

::selection{
  background:var(--mark);
  color:var(--ink);
}

/* the highlighter mark — a color BEHIND text, not a color OF text.
   used sparingly: the "open" status. if yellow spreads, take some away. */
.hl{
  background:var(--mark);
  padding:0 0.15em;
  margin:0 -0.15em;
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-decoration-color:var(--rule);
  text-underline-offset:3px;
  text-decoration-skip-ink:auto;
}
a:hover{ text-decoration-color:var(--ink); }
a:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  text-decoration:none;
}
.log-link:focus-visible,
summary:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  background:var(--paper);
  padding:8px 12px;
  border:0.5px solid var(--rule);
  text-decoration:none;
  z-index:10;
}
.skip:focus{
  left:8px;
  top:8px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  padding:calc(4*var(--u)) calc(2*var(--u)) calc(6*var(--u));
}

/* ---- masthead: centered, no rule — the mark stands on its own axis ---- */
header.site{
  text-align:center;
  margin-bottom:calc(4*var(--u));
  font-family:'IBM Plex Mono', monospace;
  line-height:var(--line);
}
header.site .mark-wordmark{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.08em;
  text-indent:0.08em; /* letter-spacing trails the last glyph; this re-centers optically */
  color:var(--ink);
  text-decoration:none;
}
header.site .mark-wordmark:hover{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}

/* ---- labels: shared grammar of title blocks and the index brief ---- */
.label{
  display:block;
  color:var(--grey);
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:4px;
}

table.titleblock{
  width:100%;
  border-collapse:collapse;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  line-height:16.5px;
  margin-bottom:calc(4*var(--u));
}
table.titleblock td{
  border:0.5px solid var(--rule);
  padding:9px 11px;
  vertical-align:top;
}
table.titleblock .big{
  font-size:15px;
  font-weight:500;
  letter-spacing:0.01em;
  margin:0;
  display:inline;
  font-family:'IBM Plex Mono', monospace;
}
.status-open{ font-weight:500; }
.status-closed{ font-weight:500; color:var(--grey); }

/* ---- index brief: centered under the mark, labeled like everything else ---- */
.brief{
  text-align:center;
  margin-bottom:calc(4*var(--u));
}
.brief .label{ margin-bottom:6px; }
.brief p{
  margin:0 auto;
  max-width:46ch;
  text-wrap:balance;
  hyphens:none;
}

.marginal{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:0 18px;
}
.margin-date{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  line-height:var(--line);
  color:var(--grey);
  text-align:right;
  white-space:nowrap;
}
.log-link{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
}
.log-link:hover{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}
.success .log-link::after{ content:" ✓"; }
.fail .log-link::after{ content:" ✗"; }

section.entry-row{ display:contents; }
section.entry-row:target .log-link{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}

.entry{
  padding-bottom:calc(3*var(--u));
  border-bottom:0.5px solid var(--rule);
  margin-bottom:calc(3*var(--u));
  min-width:0;
}
.marginal > section:last-of-type .entry{
  border-bottom:none;
  margin-bottom:0;
}
.entry p{
  margin:0 0 var(--line);
  max-width:58ch;
  text-wrap:pretty;
  hanging-punctuation:first;
  hyphens:auto;
}
.entry p:last-child{ margin-bottom:0; }
.entry > *:last-child{ margin-bottom:0; }
.entry > *:first-child{ margin-top:0; }

/* LISTS — numbered or bulleted. Markers are mono/grey, same register
   as fig-no, spec keys, the footnote *, the tangent chevron — the
   page's established language for "this is structure, not voice."
   The list text itself stays the normal serif voice, same measure as
   a paragraph. Hanging indent: wrapped lines align under the text,
   not under the marker. */
.entry ul,
.entry ol{
  margin:0 0 var(--line);
  padding:0;
  max-width:58ch;
  list-style:none;
}
.entry li{
  position:relative;
  padding-left:calc(2*var(--u));
  margin-bottom:var(--u);
  text-wrap:pretty;
  hyphens:auto;
}
.entry li:last-child{ margin-bottom:0; }
.entry ul li::before{
  content:"–";
  position:absolute;
  left:2px;
  font-family:'IBM Plex Mono', monospace;
  color:var(--grey);
}
.entry ol{ counter-reset:list; }
.entry ol li{ counter-increment:list; }
.entry ol li::before{
  content:counter(list)".";
  position:absolute;
  left:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  color:var(--grey);
}

/* lists inside a tangent drop to its quieter register, same as p */
.tangent ul,
.tangent ol{
  font-size:12.5px;
  line-height:1.6;
  margin-bottom:calc(1.5*var(--u));
}
.tangent li{ margin-bottom:calc(0.5*var(--u)); }
.tangent li:last-child{ margin-bottom:0; }

figure{
  margin:var(--line) 0;
}
figure .frame{
  border:0.5px solid var(--rule);
  padding:8px;
  background:var(--paper);
}

/* every image (photo or sketch) shows uncropped, at its own natural
   proportions — no fixed box, no object-fit:cover, nothing trimmed
   off the top of a head or the hem of a skirt. */
figure img,
figure .ph{
  width:100%;
  display:block;
  aspect-ratio:auto;
  height:auto;
  background:none;
}

/* SKETCH — opt in with class="sketch" on the <img>. only for true
   line art on a transparent background (ink, pencil), never on photos
   of the actual object. dark mode inverts lightness so the ink reads
   light-on-dark; hue-rotate keeps colored ink close to its own hue
   instead of flipping to the complementary color. no-op in light mode,
   no-op on true grayscale (nothing for hue-rotate to touch). */
@media (prefers-color-scheme: dark){
  /* tint the inverted lines with the page's actual ink color, instead
     of sepia's fixed (too-saturated, too-yellow) formula. a thin layer
     of --ink sits on top and blends in: mix-blend-mode:overlay leaves
     dark/transparent areas alone (multiplying against near-black stays
     near-black) and only warms the light pencil lines themselves —
     the one thing that needed it. inset:8px matches .frame's own
     padding so the tint lines up with the image exactly. */
  .frame:has(img.sketch){ position:relative; }
  .frame:has(img.sketch)::after{
    content:"";
    position:absolute;
    inset:8px;
    background:var(--ink);
    mix-blend-mode:overlay;
    opacity:.15;
    pointer-events:none;
  }
  figure img.sketch{ filter:invert(1) hue-rotate(180deg); }

  /* PHOTO — opt in with class="photo" on the <img>. real photographs
     stay real photographs in dark mode (no invert, that's for line art
     only) — just pulled down a little so a bright frame doesn't flash
     against the dark page. a touch of contrast keeps it from reading
     flat once brightness comes down. hover/focus lifts it back to true
     brightness for anyone who wants to actually look at it. */
  figure img.photo{
    filter:brightness(.82) contrast(1.05);
    transition:filter 150ms ease;
  }
  figure img.photo:hover,
  figure img.photo:focus-visible{
    filter:none;
  }
}
figcaption{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  line-height:16.5px;
  color:var(--grey);
  margin-top:7px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}
figcaption .fig-no{ color:var(--ink); }

.spec{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  line-height:var(--line);
  margin:var(--line) 0;
  border-top:0.5px solid var(--rule);
  border-bottom:0.5px solid var(--rule);
  padding:var(--u) 0;
}
.spec-row{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.spec-row .k{ color:var(--grey); }
.spec-row .leader{
  flex:1;
  border-bottom:1px dotted var(--rule);
  transform:translateY(-3px);
  min-width:24px;
}
.spec-row .v{ text-align:right; }

/* TANGENT — a small collapsible aside inside a note, for a digression
   that doesn't need to sit inline. same <details>/<summary> pattern as
   the index page's groups, just quieter and smaller in scale. the
   visible label is just the title itself, no "tangent" tag needed. */
.tangent{
  margin:var(--line) 0;
  border:0.5px solid var(--rule);
  padding:var(--u) calc(1.5*var(--u));
}
.tangent summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--ink);
}
.tangent summary::-webkit-details-marker{ display:none; }
.tangent summary::marker{ content:""; }
.tangent summary .chev{
  font-family:'IBM Plex Mono', monospace;
  color:var(--grey);
  transition:transform 160ms ease;
  display:inline-block;
}
.tangent summary:hover .title{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}
.tangent[open] summary .chev{ transform:rotate(90deg); }
/* the gap after the title isn't just empty space — it's the same
   hairline-rule-as-divider move used everywhere else on the page
   (.quote, .spec, .entry). A rule reads as "label ends here" instantly;
   raw whitespace alone was ambiguous no matter how much we added. */
.tangent[open] summary{
  margin-bottom:var(--u);
  padding-bottom:var(--u);
  border-bottom:0.5px solid var(--rule);
}
.tangent p{
  font-size:12.5px;
  line-height:1.6;
  margin-bottom:calc(1.5*var(--u));
}
.tangent p:first-child,
.tangent ul:first-child,
.tangent ol:first-child{ margin-top:0; }
.tangent p:last-child,
.tangent ul:last-child,
.tangent ol:last-child{ margin-bottom:0; }

/* QUOTE — a single attributed quotation, used on its own. cited
   material stays quieter than the writer's own voice: smaller size,
   tighter leading, a modest indent on both sides (still left-aligned —
   centering is what made this look bad before, not the width). framed
   top and bottom like .spec, so it reads as its own isolated block
   instead of another sentence in the flow. cite sits right-aligned
   underneath, like a signature closing the quote. */
.quote{
  margin:var(--line) 0;
  padding:var(--u) calc(2*var(--u));
  border-top:0.5px solid var(--rule);
  border-bottom:0.5px solid var(--rule);
}
/* .breathe — an occasional deliberate pause before a quote, in exact
   multiples of the line unit so it still sits on the page's grid
   instead of reading as a stray gap. use sparingly. */
.quote.breathe{ margin-top:calc(2*var(--line)); }
.quote p{
  margin:0;
  font-style:italic;
  font-size:12px;
  line-height:1.5;
}
.quote p + p{ margin-top:var(--u); }
.quote cite{
  display:block;
  margin-top:6px;
  text-align:right;
  font-family:'IBM Plex Mono', monospace;
  font-style:normal;
  font-size:10px;
  letter-spacing:0.03em;
  color:var(--grey);
}

/* QUOTE GROUP — a run of several quotes back to back. one shared
   frame for the whole stack; tighter gap between quotes inside it —
   once they're reading as one list rather than five separate isolated
   blocks, they don't each need room to breathe on their own, just
   enough air to keep a cite from bleeding into the next quote. */
.quote-group{
  margin:var(--line) 0;
  padding:var(--u) calc(2*var(--u));
  border-top:0.5px solid var(--rule);
  border-bottom:0.5px solid var(--rule);
}
.quote-group .quote{
  margin:calc(1.5*var(--u)) 0 0;
  padding:0;
  border:none;
}
.quote-group .quote cite{ margin-top:4px; }
.quote-group .quote:first-child{ margin-top:0; }

/* BOX — a plain frame around any run of text. same hairline rule as
   figures and quotes. txt notation: [box] ... [/box] */
.box{
  border:0.5px solid var(--rule);
  padding:var(--u) calc(1.5*var(--u));
  margin:var(--line) 0;
}
.box > *:first-child{ margin-top:0; }
.box > *:last-child{ margin-bottom:0; }

/* DIVIDER — thin rule inside an entry. txt notation: a long ----- line
   on its own. */
.entry hr{
  border:0;
  border-top:0.5px solid var(--rule);
  margin:var(--line) 0;
}

/* CHART — a 2-column comparison table (e.g. Problem/Solution). same
   quiet mono-label language as the index register table. txt notation:

     [chart]
     Problem | Solution
     description text | description text
     [/chart]

   first line becomes the header row, second line the body row. use
   sparingly — it's a structured contrast, not a general table. */
.chart-frame{
  border:0.5px solid var(--rule);
  border-radius:3px;
  overflow:hidden;
  margin:var(--line) 0;
}
table.chart{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}
table.chart th{
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
  text-align:center;
  background:var(--plate);
  padding:calc(1.25*var(--u)) calc(1.5*var(--u));
  border-bottom:0.5px solid var(--rule);
}
table.chart th:first-child{ border-right:0.5px solid var(--rule); }
table.chart td{
  padding:calc(1.75*var(--u)) calc(1.5*var(--u));
  vertical-align:top;
  font-size:12.5px;
  line-height:1.65;
}
table.chart td:first-child{ border-right:0.5px solid var(--rule); }
table.chart td ul{
  margin:0;
  padding:0;
  list-style:none;
}
table.chart td li{
  position:relative;
  padding-left:calc(1.5*var(--u));
  margin-bottom:calc(0.75*var(--u));
}
table.chart td li:last-child{ margin-bottom:0; }
table.chart td li::before{
  content:"\2013";
  position:absolute;
  left:0;
  font-family:'IBM Plex Mono', monospace;
  color:var(--grey);
}

/* SHOUT — one word given room to breathe. italic serif, big but not
   loud — the emphasis comes from scale and air, not weight or caps.
   txt notation: {{word}} */
.shout{
  margin:calc(1.5*var(--line)) 0;
  font-family:'Source Serif 4', serif;
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:500;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-0.01em;
}

/* FOOTNOTE — a small aside tied to a * earlier in the text. same
   visual language as figcaption/spec: mono, grey, 10px. */
p.footnote{
  margin-top:calc(1.5*var(--u));
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--grey);
}

.eof{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  line-height:var(--line);
  color:var(--grey);
  text-align:center;
  margin:calc(4*var(--u)) 0 0;
  letter-spacing:0.08em;
}

footer.colophon{
  max-width:560px;
  margin:0 auto;
  padding:var(--line) calc(2*var(--u)) calc(4*var(--u));
  border-top:0.5px solid var(--rule);
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  line-height:var(--line);
  color:var(--grey);
  display:flex;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
footer.colophon a{ color:var(--grey); }

/* ============ REGISTER (index page) ============ */

details.group{
  border-bottom:0.5px solid var(--rule);
  margin-bottom:0;
}
details.group:first-of-type{
  border-top:0.5px solid var(--rule);
}

details.group summary{
  cursor:pointer;
  list-style:none;
  padding:calc(1.5*var(--u)) 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
details.group summary::-webkit-details-marker{ display:none; }
details.group summary::marker{ content:""; }

details.group summary .chev{
  font-family:'IBM Plex Mono', monospace;
  color:var(--grey);
  transition:transform 160ms ease;
  display:inline-block;
}
details.group[open] summary .chev{ transform:rotate(90deg); }

details.group summary:hover .group-name{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}

details.group summary .count{
  color:var(--grey);
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
}

table.register{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  line-height:var(--line);
  margin-bottom:calc(2*var(--u));
}
table.register col.c-no{ width:44px; }
table.register col.c-start{ width:92px; }
table.register col.c-notes{ width:44px; }
table.register col.c-status{ width:110px; }
table.register th{
  font-size:9px;
  font-weight:400;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey);
  text-align:left;
  padding:0 12px 6px 0;
  border-bottom:0.5px solid var(--rule);
}
table.register th:last-child{ padding-right:0; text-align:right; }
table.register td{
  padding:10px 12px 10px 0;
  border-bottom:0.5px solid var(--rule);
  vertical-align:baseline;
}
table.register tr:last-child td{ border-bottom:none; }
table.register td:last-child{ padding-right:0; text-align:right; }
table.register .no{ color:var(--grey); white-space:nowrap; }
table.register a{
  text-decoration:none;
  font-weight:500;
}
table.register a:hover{
  text-decoration:underline;
  text-decoration-thickness:0.5px;
  text-underline-offset:3px;
}
.st-open{ font-weight:500; }
.st-closed{ font-weight:500; color:var(--grey); }
.st-success::after{ content:"✓"; }
.st-fail::after{ content:"✗"; }
.st-dreaming{ color:var(--grey); font-style:italic; }

@media (max-width:520px){
  .marginal{
    grid-template-columns:1fr;
    gap:0;
  }
  .margin-date{
    text-align:left;
    padding:0 0 var(--u);
  }
  .log-link{ display:inline; margin-right:8px; }
  .hide-m{ display:none; }
  table.register{ table-layout:auto; }
  figcaption{
    flex-direction:column;
    gap:2px;
  }
  .spec-row{ flex-wrap:wrap; }
  details.group summary{
    font-size:10px;
  }
}

@media print{
  .eof, .skip{ display:none; }
  body{ background:#fff; }
  details{ display:block !important; }
  summary{ list-style:none; }
  footer.colophon::after{
    content:"lublog — printed from the web";
    display:block;
    width:100%;
  }
}