/* ============================================================
   VIZUDRAFT — JOURNAL / SHARED SHEET
   REV 2026.08.C

   The journal rides on ../work/_case-lite.css rather than
   restating it. That sheet already carries the Vizudraft DNA
   the journal needs — nav, gallery shelf, buttons, eyebrows,
   spec ledger, plates, lightbox, footer, reveals, radius 0 —
   and it ships with the Night Plot tokens as its defaults,
   which is exactly the journal's surface. Nothing is overridden
   here; this file only adds what long-form reading needs.

   Load order on every journal page:
     ../work/_case-lite.css   then   _journal.css

   The one rule: the journal never re-skins. Cases change colour
   per client, the journal is always Night Plot, because it is
   Vizudraft talking rather than a client's world.
   ============================================================ */

/* ------------------------------------------------------------
   MASTHEAD — shared by the index and the articles.
   ------------------------------------------------------------ */
.log-head{
  position:relative; overflow:hidden;
  padding-top:clamp(7.5rem,14vw,11rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
/* A faint plot grid behind the masthead. Same device as the case
   pages' surface textures, masked off before it reaches the copy. */
.log-head::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(232,231,227,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,231,227,0.05) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 86%);
          mask-image:linear-gradient(180deg,#000,transparent 86%);
}
.log-head > *{ position:relative; z-index:1; }

.log-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:0.90; letter-spacing:-0.012em;
  font-size:clamp(2.4rem,6.4vw,5.6rem);
  max-width:19ch;
}
.log-title em{ font-style:normal; color:var(--accent); }

/* No heading ends on a lone word. Balance evens the lines out instead, so
   "WHAT THE NOTES ACTUALLY / ARE" sets as "WHAT THE NOTES / ACTUALLY ARE".
   It inherits into the anonymous flex item inside .log-sec__head. Browsers
   without support (pre-2024) simply wrap as before. */
.log-title,
.log-sec__head,
.log-sub,
.log-row__name,
.log-body .shout{ text-wrap:balance; }

/* The standfirst. Bigger than body, still the body face — Anton
   would fight the headline for the same job. */
.log-deck{
  margin-top:clamp(1.25rem,2.4vw,1.9rem);
  max-width:58ch;
  font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.5; color:var(--body-dim);
}
.log-deck strong{ color:var(--paper); font-weight:500; }

/* ------------------------------------------------------------
   ARTICLE BODY — a drawing sheet's margin and its live area.
   Left rail carries the running index, right column the copy.
   ------------------------------------------------------------ */
.log-grid{
  display:grid; grid-template-columns:186px minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  padding-block:clamp(3rem,6vw,5rem);
}
@media (max-width:900px){
  .log-grid{ grid-template-columns:1fr; gap:0; }
}

.log-rail{ position:sticky; top:92px; align-self:start; }
@media (max-width:900px){ .log-rail{ display:none; } }
.log-rail__k{ display:block; color:var(--mono-dim); padding-bottom:10px;
  border-bottom:1px solid var(--line); margin-bottom:4px; }
.log-rail a{
  display:flex; gap:10px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim); text-decoration:none;
  transition:color .2s ease, padding-left .25s cubic-bezier(.2,1,.3,1);
}
.log-rail a span{ flex:none; color:var(--accent-2); }
.log-rail a:hover{ color:var(--paper); padding-left:6px; }
.log-rail a.is-here{ color:var(--paper); }
.log-rail a.is-here span{ color:var(--accent); }

/* The measure is set on the prose, not on .log-body, so a plate row inside a
   section can run the full width of the column while the copy beside it stays
   at a readable 68ch. Putting max-width on .log-body instead would trap the
   plates at text width, and escaping it needs negative margins that break
   the moment the rail collapses. */
.log-body{ --measure:68ch; }
.log-body p,
.log-body .plus-list,
.log-body .checklist,
.log-body .ledger,
.log-body .callout,
.log-body .field,
.log-body .log-sub,
.log-body .said,
.log-body .log-end{ max-width:var(--measure); }
.log-body p{ color:var(--body-dim); }
.log-body p + p{ margin-top:1.15rem; }
.log-body strong{ color:var(--paper); font-weight:500; }
.log-body em{ font-style:italic; color:var(--paper); }
/* Inline links in running copy get the redline underline the nav uses,
   drawn rather than declared. */
.log-body a{
  color:var(--paper); text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 100%;
  background-size:100% 1px;
  transition:background-size .25s cubic-bezier(.2,1,.3,1), color .2s ease;
}
.log-body a:hover{ color:var(--accent); background-size:100% 2px; }

/* ---- sections ---- */
.log-sec{ padding-top:clamp(2.5rem,5vw,4rem); scroll-margin-top:92px; }
.log-sec:first-child{ padding-top:0; }
.log-sec__head{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:0.95; letter-spacing:-0.01em;
  font-size:clamp(1.5rem,3vw,2.5rem);
  margin-bottom:1.4rem; max-width:22ch;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.log-sec__num{
  flex:none; font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:0.08em; color:var(--accent-2);
  /* Anton sits on a much lower baseline than the mono at this size, so the
     number is nudged up to line with the cap height rather than the baseline. */
  transform:translateY(-0.35em);
}
.log-sub{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--paper);
  margin-top:2rem; margin-bottom:.9rem;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}

/* ---- + bullets ---- */
.plus-list{ margin-top:1.15rem; }
.plus-list li{
  position:relative; padding-left:26px; color:var(--body-dim);
}
.plus-list li + li{ margin-top:.8rem; }
.plus-list li::before{
  content:"+"; position:absolute; left:0; top:0;
  font-family:var(--font-mono); font-size:13px; color:var(--accent-2);
}
.plus-list b{
  color:var(--paper); font-weight:500;
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.08em;
  margin-right:6px;
}
/* Nested run — the controlled-generation rules under "photograph the result". */
.plus-list ul{ margin-top:.65rem; padding-left:0; }
.plus-list ul li{ padding-left:20px; font-size:15.5px; }
.plus-list ul li::before{ content:"·"; color:var(--mono-dim); font-size:15px; }
.plus-list ul li + li{ margin-top:.5rem; }

/* ---- the gap ledger ----
   Rows, not cards. Same hairline logic as .spec-ledger, turned on its
   side so a long right-hand column can breathe. --------------------- */
.ledger{ margin-top:1.4rem; border-top:1px solid var(--line); }
.ledger__row{
  display:grid; grid-template-columns:190px minmax(0,1fr);
  gap:clamp(14px,2.4vw,30px);
  padding:clamp(.9rem,1.7vw,1.15rem) 0;
  border-bottom:1px solid var(--line);
  transition:background-color .2s ease;
}
.ledger__row:hover{ background:rgba(232,231,227,0.03); }
.ledger__k{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--paper); align-self:start;
}
.ledger__v{ color:var(--body-dim); font-size:15.5px; }
@media (max-width:620px){
  .ledger__row{ grid-template-columns:1fr; gap:7px; }
}

/* ---- callout ----
   The redline divider from the brand kit, used as a rule down the
   left of the one paragraph in the article that is a hard rule. */
.callout{
  position:relative; margin-top:1.6rem; margin-bottom:.4rem;
  padding:clamp(1.1rem,2.2vw,1.5rem) 0 clamp(1.1rem,2.2vw,1.5rem) clamp(20px,2.6vw,30px);
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg, rgba(232,64,42,0.06), transparent 62%);
}
.callout p{ color:var(--paper); }
.callout p + p{ margin-top:.9rem; color:var(--body-dim); }
.callout__k{
  display:block; font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--accent);
  margin-bottom:9px;
}

/* ---- the shout ----
   One line per article, set in the display face, used where the copy
   turns. Inherits .shout from the case sheet but wants a wider measure. */
.log-body .shout{ max-width:26ch; margin-block:clamp(2.2rem,4vw,3rem); }

/* ---- numbered checklist ----
   Blueprint numerals, because they are data. The rule under each row
   is the drawing-sheet ledger again. */
.checklist{ margin-top:1.4rem; counter-reset:chk; border-top:1px solid var(--line); }
/* Absolute numeral rather than a two-column grid, and that is load-bearing.
   As a grid, the bare text after each item's </b> becomes an ANONYMOUS grid
   item and gets placed in the next cell — the 44px numeral column — which
   rendered one section four times taller than it should be. Taking the numeral
   out of flow means the item's markup can be anything. */
.checklist li{
  counter-increment:chk;
  --pad:clamp(.95rem,1.8vw,1.25rem);
  position:relative;
  padding:var(--pad) 0 var(--pad) clamp(40px,4vw,58px);
  border-bottom:1px solid var(--line);
  color:var(--body-dim);
}
.checklist li::before{
  content:counter(chk,decimal-leading-zero);
  position:absolute; left:0; top:calc(var(--pad) + 3px);
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:0.08em; color:var(--accent-2);
}
.checklist b{
  display:block; color:var(--paper); font-weight:500;
  font-family:var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.08em;
  margin-bottom:6px;
}

/* ---- field notes — the two case pulls ---- */
.field{
  border:1px solid var(--line); background:var(--bg-2);
  padding:clamp(1.2rem,2.4vw,1.7rem);
  transition:border-color .25s ease, transform .35s cubic-bezier(.2,1,.3,1);
}
.field + .field{ margin-top:clamp(.9rem,1.8vw,1.3rem); }
.field:hover{ border-color:var(--accent); transform:translateY(-3px); }
.field__k{
  display:flex; align-items:baseline; gap:12px; margin-bottom:.85rem;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--paper);
}
.field__k i{ font-style:normal; color:var(--accent); }
.field p{ font-size:15.5px; }
.field__go{
  display:inline-flex; align-items:center; gap:9px; margin-top:1rem;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--accent); text-decoration:none;
  transition:gap .25s cubic-bezier(.2,1,.3,1);
}
.field__go:hover{ gap:15px; }
.field__go::after{ content:"→"; }

/* ---- closing stamp ---- */
.log-end{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; flex-wrap:wrap;
}
.log-end__stamp{
  font-family:var(--font-display); text-transform:uppercase; line-height:1;
  font-size:clamp(1.1rem,2vw,1.6rem); color:var(--mono-dim);
}

/* ------------------------------------------------------------
   QUOTED MACHINE — added for LOG.02, usable by any entry.
   Verbatim model output sits on the blueprint rule. The redline
   stays ours (.callout), so the reader can always tell at a
   glance who is talking. What we typed gets a quieter dim rule.
   ------------------------------------------------------------ */
.said{
  margin-top:1.4rem;
  padding:clamp(1rem,2vw,1.3rem) 0 clamp(1rem,2vw,1.3rem) clamp(18px,2.4vw,28px);
  border-left:2px solid var(--accent-2);
  background:linear-gradient(90deg, rgba(78,99,255,0.08), transparent 62%);
}
.said__k{
  display:block; font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-2);
  margin-bottom:9px;
}
.log-body .said p{ color:var(--paper); }
.log-body .said p + p{ margin-top:.8rem; }
.said--ask{ border-left-color:var(--mono-dim); background:none; }
.said--ask .said__k{ color:var(--mono-dim); }
.log-body .said--ask p{ color:var(--body-dim); }
.log-body .said .said__note{ font-size:14.5px; color:var(--mono-dim); }

/* Quotes inside ledger rows stack one per line, so a row of
   contradictory readings reads as a list rather than a paragraph. */
.ledger__v > q{ display:block; color:var(--paper); }
.ledger__v > q + q{ margin-top:.5rem; }
/* What we did about a note — the redline, because it is ours. */
.did{
  display:block; margin-top:.55rem;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--accent);
}
.did::before{ content:"\2192\00a0"; }
.did--no{ color:var(--mono-dim); }

.log-body .counts{ margin-top:1.6rem; }
/* A step down from the case sheets' counts: journal numerals carry signs and
   units (+74%, +14px) and have to fit a narrower column beside the rail. */
.log-body .count__n{ font-size:clamp(2rem,4.2vw,3.5rem); }

/* ---- versus: the same image, two framings, side by side ---- */
.versus{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(.9rem,1.8vw,1.3rem); margin-top:1.5rem;
}
@media (max-width:720px){ .versus{ grid-template-columns:1fr; } }
.vs{ border:1px solid var(--line); background:var(--bg-2); padding:clamp(1.1rem,2.2vw,1.5rem); }
.vs__k{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--paper); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:1rem;
}
/* The tally always takes its own line, so the two boxes' headers match. */
.vs__k i{ display:block; margin-top:5px; font-style:normal; color:var(--accent); }
.log-body .vs__ask{ font-size:14.5px; color:var(--mono-dim); margin-bottom:1rem; }
.vs > q{ display:block; color:var(--paper); font-size:15.5px; }
.vs > q + q{ margin-top:.75rem; }

/* ------------------------------------------------------------
   INDEX — the journal's own contents sheet.
   Ledger rows, not cards. Same grammar as the work stack.
   ------------------------------------------------------------ */
.log-list{ border-top:1px solid var(--line); }
.log-row{
  display:grid; grid-template-columns:96px minmax(0,1fr) 132px;
  gap:clamp(16px,3vw,36px); align-items:baseline;
  padding:clamp(1.5rem,3.4vw,2.4rem) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition:background-color .25s ease, padding-left .35s cubic-bezier(.2,1,.3,1);
}
.log-row:hover{ background:rgba(232,231,227,0.03); padding-left:14px; }
.log-row__idx{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  color:var(--accent-2); }
/* display:block is load-bearing on both — the row's middle cell is a <span>
   wrapper holding two more <span>s, and left inline the deck simply ran on
   from the end of the headline instead of sitting under it. */
.log-row__name{
  display:block;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:0.98; letter-spacing:-0.01em;
  font-size:clamp(1.3rem,2.8vw,2.2rem); color:var(--paper);
  transition:color .2s ease;
}
.log-row:hover .log-row__name{ color:var(--accent); }
.log-row__deck{ display:block; margin-top:.7rem; color:var(--body-dim); font-size:15.5px; max-width:62ch; }
.log-row__meta{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--mono-dim); text-align:right; line-height:1.9; }
@media (max-width:820px){
  .log-row{ grid-template-columns:1fr; gap:10px; }
  .log-row__meta{ text-align:left; }
}

/* The index is short on purpose while there is one entry. This says so
   rather than leaving the page looking broken. */
.log-note{
  margin-top:clamp(1.6rem,3vw,2.4rem); color:var(--mono-dim); max-width:60ch;
}

@media (prefers-reduced-motion:reduce){
  .log-row,.log-rail a,.field,.field__go,.log-body a{ transition:none; }
  .log-row:hover{ padding-left:0; }
  .log-rail a:hover{ padding-left:0; }
  .field:hover{ transform:none; }
  .field__go:hover{ gap:9px; }
}