/* ============================================================================
   JAPANDI · TUFTE — long-form layer
   ----------------------------------------------------------------------------
   SWAP TARGET. Reconstructed from the class vocabulary of the authoring theme
   paired with render.py: sidenotes, margin notes, margin and full-width
   figures, .newthought, the inverse pull-quote, and the closing seal. If you
   have the canonical theme.css from that prototype, replace this file.

   Loaded AFTER theme.css and site.css. It adds only the article layout; it
   never redefines a token.

   Tufte's information structure — sidenotes instead of footnotes, integrated
   figures, two-level hierarchy, colour held in reserve — expressed through
   Japandi spatial ethics: a guarded margin, ma, one warm gesture.

   IMPLEMENTATION NOTE: the margin is produced with floats, not a grid. A
   sidenote is authored *inside* the paragraph that cites it, so it is not a
   child of the article and grid placement can never reach it. Float-right plus
   a negative margin is the technique that works on nested notes, and it
   degrades correctly when the margin is removed at narrow widths.
   ============================================================================ */

/* ------------------------------------------------------------- the page --- */

.article {
  --text-col:   34rem;
  --margin-col: 13rem;
  --gutter:     2rem;
  --full:       calc(var(--text-col) + var(--gutter) + var(--margin-col));

  max-width: var(--full);
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-2xl);
  counter-reset: sidenote-counter;
}

/* Body copy is held to the text column; the space to its right is the guarded
   margin. Elements allowed to use the full width opt in below. */
.article > p,
.article > h2,
.article > h3,
.article > ul,
.article > ol,
.article > blockquote,
.article > pre {
  max-width: var(--text-col);
}

/* ---------------------------------------------------------- article head - */

.article__head { margin-block-end: var(--space-l); }

.article__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  margin-block-end: var(--space-xs);
}

.article__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--muted);
  max-width: 36rem;
  margin: 0 0 var(--space-s);
}

.article__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  max-width: none;
}
.article__meta::before {
  content: "";
  display: block;
  inline-size: var(--space-m);
  block-size: 1px;
  background: var(--rule);
}

/* --------------------------------------------------------- article body --- */

.article h2 { margin-block: var(--space-l) var(--space-s); font-size: 1.5rem; }
.article h3 { margin-block: var(--space-m) var(--space-xs); }

.article p { margin-block-end: var(--space-s); }

/* Tufte's opener: small caps carry the first few words, so a section can start
   without an indent or a drop cap. */
.newthought {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 0;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.article blockquote {
  margin: var(--space-m) 0;
  padding-inline-start: var(--space-s);
  border-inline-start: 1px solid var(--rule);
  color: var(--muted);
  font-style: italic;
}
.article blockquote p:last-child { margin-block-end: 0; }

.article pre {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-s);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-block: var(--space-m);
}
.article :not(pre) > code {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 2px;
  padding: 0.1em 0.32em;
}

/* ------------------------------------------------ sidenotes and margins --- */
/* The float is taken at the right edge of the text column, then pushed out by
   gutter + margin width so it lands in the margin proper. clear:right stops two
   notes colliding when they cite adjacent sentences. */

.sidenote,
.marginnote {
  float: right;
  clear: right;
  width: var(--margin-col);
  margin-right: calc(-1 * (var(--gutter) + var(--margin-col)));
  margin-bottom: var(--space-s);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  position: relative;
}

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--warm);
  vertical-align: super;
  line-height: 0;
  margin-inline-start: 0.12em;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--warm);
  vertical-align: super;
  line-height: 0;
}

/* Only the checkbox is hidden. The label IS the visible superscript, so hiding
   every .margin-toggle would remove the number the reader is meant to click. */
input.margin-toggle { display: none; }

/* A margin note has no number, so its label is a symbol that only appears once
   the margin itself is gone. */
label.margin-toggle:not(.sidenote-number) { display: none; }
label.sidenote-number { cursor: default; }

/* ------------------------------------------------------- margin figures --- */

/* Unlike a sidenote (which floats inside the text column and is pushed out with
   a negative margin), the margin figure is a block child spanning the full
   article width, so it floats flush to the article's right edge — landing in
   the margin without a negative offset that would overshoot off-screen when the
   window is only just wide enough for the margin. */
.margin-figure {
  float: right;
  clear: right;
  width: var(--margin-col);
  margin-right: 0;
  margin-bottom: var(--space-m);
  margin-top: 0.35rem;
}
.margin-figure img {
  inline-size: 100%;
  border-radius: 2px;
  border: 1px solid var(--rule);
  filter: saturate(0.92);
}
.margin-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-block-start: var(--space-2xs);
}

/* A glyph (kanji SVG) margin figure: dark strokes on a held-greige card, so it
   reads in either theme and echoes the home brand bar. */
.margin-figure--glyph {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: var(--space-m);
  display: grid;
  place-items: center;
}
.margin-figure--glyph img {
  inline-size: auto;
  block-size: clamp(6rem, 16vw, 8.5rem);
  border: 0;
  border-radius: 0;
  filter: none;
}

/* full-width figure: the one place the layout opens across both columns */
.full-figure {
  clear: both;
  max-width: var(--full);
  margin-block: var(--space-l);
}
.full-figure img {
  inline-size: 100%;
  border-radius: 2px;
  border: 1px solid var(--rule);
  filter: saturate(0.92);
}
.full-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  margin-block-start: var(--space-2xs);
}

/* ----------------------------------------------------------- pull-quote --- */
/* Colour held in reserve the whole way down the page, then spent once — on
   sumi, not vermilion. Vermilion stays reserved for the seal alone. */

.pullquote {
  clear: both;
  max-width: var(--full);
  margin-block: var(--space-l);
  padding: var(--space-l) clamp(var(--space-s), 5vw, var(--space-l));
  background: var(--fg);
  color: var(--bg);
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.4;
  font-weight: 500;
  text-wrap: balance;
}
.pullquote p { margin: 0; max-width: none; }

/* --------------------------------------------------------- closing seal --- */

.article__end {
  clear: both;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
  max-width: var(--full);
}
.article__end p { margin: 0; }

/* ------------------------------------------------------------ narrow UI --- */
/* Below the threshold the margin cannot exist, so notes fold down into the text
   column as inline asides — set off by a vermilion rule, keyed to their number.
   They are shown unconditionally rather than behind a checkbox toggle: the
   checkbox hack cannot be operated by a keyboard once the box is display:none,
   so hiding the note there would put content out of reach of keyboard-only and
   some screen-reader users. Always-visible is the accessible choice, and reads
   as deliberate. The margin figure keeps floating; it needs no interaction. */

@media (max-width: 54rem) {
  .article {
    --text-col: 100%;
    max-width: 40rem;
  }

  .sidenote,
  .marginnote {
    float: none;
    clear: none;
    width: auto;
    margin-right: 0;
    display: block;
    margin-block: var(--space-xs) var(--space-s);
    padding: var(--space-xs) var(--space-s);
    border-inline-start: 2px solid var(--seal);
    background: color-mix(in srgb, var(--fg) 3.5%, transparent);
    border-radius: 0 2px 2px 0;
  }

  /* No toggle is needed when the note is always shown: the number stays as a
     passive marker, and the unnumbered margin-note's ⊕ control is removed. */
  label.margin-toggle:not(.sidenote-number) { display: none; }
  label.sidenote-number { cursor: default; }
  .sidenote-number::after { padding-inline: 0.15em; }

  .margin-figure {
    float: none;
    width: auto;
    max-width: 14rem;
    margin-right: 0;
    margin-block: var(--space-m);
  }
}

@media (max-width: 46rem) {
  .article { padding-block-start: var(--space-m); }
}

/* -------------------------------------------------------------- listing --- */

.posts { list-style: none; margin: 0; padding: 0; }
.posts > li { border-top: 1px solid var(--rule); padding-block: var(--space-m); }
.posts > li:last-child { border-bottom: 1px solid var(--rule); }
.posts h2 { font-size: 1.375rem; margin-block-end: var(--space-2xs); }
.posts h2 a { color: var(--fg); border: 0; }
.posts h2 a:hover { color: var(--accent); }
.posts p { color: var(--muted); margin-block-end: var(--space-2xs); }
.posts time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* --------------------------------------------------------------- print --- */

@media print {
  .sidenote, .marginnote {
    display: block; float: none; width: auto; margin-right: 0; font-size: 0.75rem;
  }
  .site-header, .site-footer, .skip-link { display: none; }
  .pullquote { background: transparent; color: var(--fg); border: 1px solid var(--rule); }
}