/* doc.css: the primitives every long-form inner page shares, scoped to .doc.
   Case study pages and the legal pages both carry .doc on their <main>, so the shell,
   the type scale and the reveal behave identically on each. Page-specific layout lives
   in case.css and legal.css; nothing page-specific belongs here. */

/* ---- shared type ---- */
.doc .mono{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:10px; color:var(--ink-faint); }
.doc .disp{ font-family:var(--font-display); font-weight:400; color:var(--ink); line-height:1.12; }
.doc .prose{ font-size:clamp(13.5px,.4rem + .5vw,15px); color:var(--ink-soft); line-height:1.75; }
.doc .prose + .prose{ margin-top:.85rem; }
.doc .rule{ height:.5px; background:var(--line); }

/* ---- shell: same 1100px container as .sec on the homepage ---- */
.doc .wrap{ max-width:var(--shell); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
/* Back link as a pill. It was a bare line of 10px mono that read as a caption
   rather than a control. The pill borrows the header nav's geometry so it sits in
   the same family, and the arrow slides on hover instead of the whole chip moving,
   which is the quieter gesture. */
.doc .back{ display:inline-flex; align-items:center; gap:.65em;
  text-decoration:none; color:var(--ink-soft);
  padding:.7em 1.35em .7em 1.15em; border-radius:999px;
  background:rgba(251,250,246,.6);
  border:1px solid rgba(26,26,23,.13);
  box-shadow:0 1px 2px rgba(26,26,23,.03);
  transition:color .3s ease, border-color .3s ease, background .3s ease,
             box-shadow .3s ease, transform .3s ease; }
.doc .back::before{ content:"\2190"; font-family:var(--font-body); font-size:1.1em;
  line-height:1; transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.doc .back:hover{ color:var(--ink); border-color:rgba(122,48,48,.55);
  background:rgba(122,48,48,.05); transform:translateY(-1px);
  box-shadow:0 12px 24px -18px rgba(122,48,48,.5); }
.doc .back:hover::before{ transform:translateX(-.28em); }
.doc .back:focus-visible{ outline:2px solid var(--maroon); outline-offset:3px; }

/* On the homepage .rv is a container whose .rvi children stagger in. Here whole
   sections reveal as one block, the way the prototypes did it. Same .on class, so
   the observer in page-system.js drives both without knowing the difference. */
.doc .rv{ opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.doc .rv.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .doc .rv{ opacity:1; transform:none; transition:none; }
}