/* Manifesto v9 — original PNG cover first, title beneath. */
.manifesto-title-block{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.manifesto-title-block .manifesto-cover{
  order:1;
  margin:0 auto;
}
.manifesto-title-block h1{
  order:2;
  margin-top:34px;
}
.manifesto-title-block .manifesto-title-subtitle{
  order:3;
}
.manifesto-title-block .manifesto-epigraph{
  order:4;
}

@media(max-width:560px){
  .manifesto-title-block .manifesto-cover{
    width:min(330px,86%);
    margin:0 auto;
  }
  .manifesto-title-block h1{
    margin-top:26px;
  }
}

/* Manifesto v10 — cleaner index group headings. */
.manifesto-index-group-label{
  gap:0;
  font-size:10.5px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:.13em;
}
.manifesto-index-group-label::before{
  display:none!important;
  content:none!important;
}

@media(max-width:900px){
  .manifesto-index-group-label{
    margin-bottom:14px;
    padding-bottom:11px;
    font-size:11.5px;
  }
}

/* Manifesto v11 — ideal-effect desktop reading bar + TXT-style margin ruler. */
:root{
  --manifesto-margin-left:11.5%;
  --manifesto-margin-right:11.5%;
}

.manifesto-desktop-controls{display:none}

@media(min-width:901px){
  .manifesto-topbar{
    display:grid;
    grid-template-columns:max-content max-content minmax(28px,1fr) max-content;
    align-items:center;
    justify-content:initial;
    column-gap:0;
  }
  .manifesto-topbar>strong{
    grid-column:1;
  }
  .manifesto-topbar>.manifesto-links{
    grid-column:2;
    margin-left:48px;
    gap:34px;
    align-self:center;
  }
  .manifesto-actions{
    grid-column:4;
    display:flex;
    align-items:center;
    gap:40px;
    margin-left:auto;
  }
  .manifesto-desktop-controls{
    display:flex;
    align-items:center;
    gap:66px;
    color:var(--reader-muted);
    font-family:"IBM Plex Mono",monospace;
  }
  .top-reader-step{
    display:grid;
    grid-template-columns:32px 24px 48px 24px;
    align-items:center;
    min-height:34px;
  }
  .top-reader-key{
    color:var(--reader-muted);
    font:300 13px/1 "IBM Plex Mono",monospace;
    text-align:left;
    opacity:.72;
  }
  .top-reader-step button{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--reader-muted);
    width:24px;
    height:30px;
    padding:0;
    font:300 15px/1 "IBM Plex Mono",monospace;
  }
  .top-reader-step button:hover,
  .top-reader-step button:focus-visible{
    color:var(--reader-text);
    outline:none;
  }
  .top-reader-value{
    color:var(--reader-faint);
    font:300 12px/1 "IBM Plex Mono",monospace;
    text-align:center;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  .manifesto-document,
  .manifesto-measure-guide{
    width:auto!important;
    max-width:none!important;
    margin-left:var(--manifesto-margin-left)!important;
    margin-right:var(--manifesto-margin-right)!important;
  }
  .manifesto-document{
    padding-bottom:250px;
  }
}

.manifesto-reader-tools{display:none!important}

/* Manifesto v13 — TXT attachment-viewer ruler language.
   Equal ticks, smaller diamond, longer stem and a paper fade instead of a hard mask. */
.manifesto-margin-ruler{
  position:absolute;
  z-index:24;
  left:var(--manifesto-index-w);
  right:0;
  bottom:0;
  height:116px;
  color:var(--reader-line-strong);
  background:transparent;
  pointer-events:none;
  user-select:none;
  overflow:hidden;
}

/* The text fades into the paper before it reaches the ruler rather than being
   clipped abruptly by a fully opaque block. */
.manifesto-margin-ruler::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb,var(--reader-paper) 12%,transparent) 18%,
    color-mix(in srgb,var(--reader-paper) 34%,transparent) 34%,
    color-mix(in srgb,var(--reader-paper) 64%,transparent) 51%,
    color-mix(in srgb,var(--reader-paper) 88%,transparent) 66%,
    var(--reader-paper) 79%,
    var(--reader-paper) 100%
  );
}

/* Main measure line. */
.manifesto-margin-ruler::before{
  content:"";
  position:absolute;
  z-index:1;
  left:48px;
  right:48px;
  bottom:27px;
  height:1px;
  background:currentColor;
  opacity:.72;
}

/* TXT viewer style: every graduation has exactly the same height and crosses
   the horizontal line through its centre. */
.margin-ruler-ticks{
  position:absolute;
  z-index:1;
  left:48px;
  right:48px;
  bottom:20px;
  height:14px;
  pointer-events:none;
  opacity:.48;
  background-image:linear-gradient(to right,currentColor 0 1px,transparent 1px 100%);
  background-size:5% 100%;
  background-position:left top;
  background-repeat:repeat-x;
}

.margin-ruler-cap{
  position:absolute;
  z-index:1;
  bottom:20px;
  width:1px;
  height:14px;
  background:currentColor;
  opacity:.62;
}
.margin-ruler-cap.is-left{left:48px}
.margin-ruler-cap.is-right{right:48px}

/* A deliberately generous hit target around the very small visual handle. */
.margin-ruler-handle{
  appearance:none;
  position:absolute;
  z-index:2;
  bottom:2px;
  width:24px;
  height:56px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--reader-line-strong);
  pointer-events:auto;
  cursor:ew-resize;
  touch-action:none;
  outline:none;
}
.margin-ruler-handle.is-left{
  left:var(--manifesto-margin-left);
  transform:translateX(-50%);
}
.margin-ruler-handle.is-right{
  right:var(--manifesto-margin-right);
  transform:translateX(50%);
}

/* Long vertical stem, copied from the lean TXT-reader geometry. */
.margin-ruler-handle::before{
  content:"";
  position:absolute;
  left:50%;
  top:2px;
  bottom:2px;
  width:1px;
  transform:translateX(-.5px);
  background:currentColor;
  opacity:.76;
}

/* The diamond is now only 7px and sits exactly on the horizontal measure line. */
.margin-ruler-handle::after{
  content:"";
  position:absolute;
  left:50%;
  top:31px;
  width:7px;
  height:7px;
  border:1px solid currentColor;
  background:var(--reader-paper);
  transform:translate(-50%,-50%) rotate(45deg);
}

.margin-ruler-handle:hover,
.margin-ruler-handle:focus-visible,
.margin-ruler-handle.is-dragging{
  color:var(--reader-text);
}
.margin-ruler-handle:focus-visible::after,
.margin-ruler-handle.is-dragging::after{
  box-shadow:0 0 0 3px var(--reader-shadow);
}
.manifesto-margin-ruler.is-dragging::before,
.manifesto-margin-ruler.is-dragging .margin-ruler-ticks{
  opacity:.78;
}

@media(max-width:1500px) and (min-width:901px){
  .manifesto-topbar>.manifesto-links{margin-left:30px;gap:20px}
  .manifesto-actions{gap:24px}
  .manifesto-desktop-controls{gap:34px}
  .reader-tone-track-wrap{width:138px}
  .top-reader-step{grid-template-columns:28px 22px 42px 22px}
}

@media(max-width:1180px) and (min-width:901px){
  .manifesto-topbar>.manifesto-links{
    margin-left:20px;
    gap:14px;
    font-size:10.5px;
  }
  .manifesto-actions{gap:16px}
  .manifesto-desktop-controls{gap:18px}
  .reader-tone-track-wrap{width:112px}
}

@media(max-width:900px){
  .manifesto-desktop-controls{display:none}
  .manifesto-margin-ruler{display:none}
}