/* The inner pages' side panel (Bea, 2026-10-11). Its own file: style.css and
   components.css are not touched. Markup and data: _side.php (Settings > Side
   panels). Phone first: the panel follows the words; from 1024px it sits beside
   them across the full width of the container, sticky under the header.
   Every inner page takes it through _sidebar.php (Felix, 2026-10-11): pages,
   offerings, posts, the journal, videos, booking, thank-you and not found.
   No inner page narrows itself: the container is the width, and the two
   columns give the words their measure. */
.doc-aside{display:grid;gap:16px;align-content:start;margin-top:48px}
.side-card{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:var(--card-pad);background:var(--white)}
.side-title{margin:0 0 8px;max-width:none;font:400 1.35rem/1.25 var(--serif);color:var(--ink);text-wrap:balance}
.side-text{margin:0 0 16px;font-size:.95rem;line-height:1.55;color:var(--ink-soft)}
.side-actions{display:grid;gap:10px}
.side-book .btn{width:100%;text-align:center}
.side-facts{margin:18px 0 0}
.side-facts>div{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--rule)}
.side-facts dt{font:600 var(--fs-label)/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.side-facts dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink)}
.side-h{margin:0 0 6px;max-width:none;font:600 var(--fs-small)/1.3 var(--sans);color:var(--ink)}
.side-links{list-style:none;margin:0;padding:0}
.side-links li{margin:0}
.side-links a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-top:1px solid var(--rule-soft);font:500 .95rem/1.3 var(--sans);color:var(--accent);text-decoration:none}
.side-links a:hover{text-decoration:underline;text-underline-offset:.2em}
.side-links a::after{content:"\2192";margin-left:auto;padding-left:12px;flex:none}
.side-links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (min-width:1024px){
  .doc-inner.has-side .doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:56px;align-items:start}
  .doc-aside{margin-top:0;position:-webkit-sticky;position:sticky;top:calc(var(--head) + var(--bar) + 24px)}
  .doc-inner.has-side .vgrid.vgrid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* a short watch page already has two columns (video, words): the panel joins
   them only once there is room for three, and follows them until then */
@media (min-width:1024px) and (max-width:1199px){
  .vpage-short.has-side .doc-grid{display:block}
  .vpage-short .doc-aside{position:static;margin-top:48px}
}
/* phones and tablets, pages and offerings (.book-first, Wren 2026-10-16, port of
   MindMorph's phone book card): the book card comes up under the title, its
   facts folded behind "See details" except the age (21+) and the scope line,
   which always show (_side.php). The rest of the panel still follows the words.
   Folding needs the script (html.js), so without it the whole card shows.
   1023px: below that the panel already sits under the words here. */
.side-fold{display:none}
@media (max-width:1023px){
  .doc-grid.book-first{display:flex;flex-direction:column}
  .doc-grid.book-first>.doc-aside{display:contents}
  .doc-grid.book-first .side-book{order:-1;margin-bottom:32px}
  .doc-grid.book-first>.doc-aside>:not(.side-book){margin-top:16px}
  .doc-grid.book-first>.doc-aside>.side-book+*{margin-top:48px}
  .js .book-first .side-book:not(.is-open) .side-fact-more{display:none}
  .js .book-first .side-fold{display:flex;align-items:center;gap:8px;min-height:44px;margin:8px auto -8px;padding:0 12px;background:none;border:0;
    font:500 var(--fs-small)/1.2 var(--sans);color:var(--accent);cursor:pointer}
  .side-fold svg{transition:transform .2s ease}
  .side-book.is-open .side-fold svg{transform:rotate(180deg)}
  .side-fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-pill)}
}
@media (prefers-reduced-motion:reduce){.side-fold svg{transition:none}}
/* the finder's "Ask about this page" pill between the title and the page body
   (Eric, 2026-10-17: "the tightness between these elements"): room above it
   from the title and below it before the book card or the words */
.doc-inner .fdr-pageask{margin:24px 0 36px}
/* phones, inside the photo header: the pill sits closer under the title and the
   caption's own 24px padding is its bottom room, not 36px more (Nora, 2026-10-17) */
@media (max-width:767px){.pg-hero-cap .fdr-pageask{margin:20px 0 0}}
/* phones and tablets: the title clear of the book card when the page has no Ask
   pill (/scope-of-services was 0px); with the pill, the title's margin is its top room */
@media (max-width:1023px){
  .doc-inner > h1{margin-bottom:28px}
  .doc-inner > h1 + .fdr-pageask{margin-top:0}
}