/* ===========================================================================
   landing-chapter-stack: nine names, one column, one form at a time
   ---------------------------------------------------------------------------
   The column is the whole composition at rest. Every name is set on one left
   edge with its mark hanging in a gutter beside it, set at the name's own size
   and on its own line, and the names are what the center of the page runs
   through; Timeline holds the weight, the readings run below it, and the
   companions stand above it in a lighter ink under their lettered marks.
   Pointing at a name brings that chapter's form out of the mesh on the left
   and its brief on the right, both at one fixed place, so the column never
   moves under the reader's eye.

   Titles share one left edge and marks share a fixed gutter. The complete
   column is centered on the page; each hover surface fits its own row.
   =========================================================================== */

.landing-enhanced.pill-field-enhanced .pill-drawer-dots{display:none}
.landing-enhanced.pill-field-enhanced .globe-chapter-description{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip-path:inset(50%)!important;opacity:0!important;pointer-events:none!important}

/* The name is the control. Its form stands elsewhere, so the link's own box
   takes no pointer and the name takes it instead. */
.landing-enhanced.pill-field-enhanced .pill-link,
.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  .pill-link[data-gravity-ready="true"]{pointer-events:none}
.landing-enhanced.pill-field-enhanced .pill-object{pointer-events:none!important}

/* Keep the original aligned title column and number gutter. Position every
   row from the full column measure, while its hover box fits its own text. */
.landing-enhanced.pill-field-enhanced .pill-chapter-label{
  --chapter-mark-gutter:calc(var(--chapter-mark-measure,34px) + var(--chapter-mark-gap,18px));
  left:50%;
  top:50%;
  display:grid;
  grid-template-columns:var(--chapter-mark-gutter) max-content;
  align-items:baseline;
  gap:0;
  box-sizing:border-box;
  width:max-content;
  min-height:0;
  max-width:none;
  padding:0;
  text-align:left;
  opacity:0;
  pointer-events:auto;
  transform:translate3d(calc((var(--chapter-mark-gutter) + var(--chapter-column-measure,190px)) / -2),-50%,0);
  transition:opacity .5s var(--landing-ease)}
.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  .pill-link[data-gravity-ready="true"] .pill-chapter-label{opacity:1}
/* The index also stands during the opening's three directions, one set of
   names at a time, revealed in the middle of the page at the coordinates it
   will still be using when the reader arrives. A name rises a fraction of its
   own height as it fades up, one row after the next down its set, so a set of
   five reads as arriving rather than as switched on, and nothing moves once
   it has arrived: the name is in that row when the reader reaches the index,
   so the last traverse of the page has no rearrangement in it. The rise is
   carried on `translate` rather than on the label's own transform, because the
   transform seats the name every frame and a transition on it would drag the
   row behind the page it is standing on. The interface stays inert until the
   reader is actually there, which is what the opening's own skip control is
   for. It holds at every width the opening runs at, since the directions now
   stand beside the names at all of them. */
.landing-enhanced.pill-field-enhanced .pill-chapter-label{
  translate:0 0;
  transition:opacity .5s var(--landing-ease),translate .5s var(--landing-ease)}
.landing-enhanced.pill-field-enhanced.landing-has-intro:not(.landing-chapters-visible)
  .pill-link:not([data-intro-shown="true"]) .pill-chapter-label{translate:0 .42em}
.landing-enhanced.pill-field-enhanced
  .pill-link[data-intro-shown="true"][data-gravity-ready="true"] .pill-chapter-label{
  opacity:1;
  transition:opacity .78s var(--landing-ease) calc(var(--intro-title-delay,250ms) + var(--intro-row,0) * 70ms),
    translate .96s cubic-bezier(.2,.72,.22,1) calc(var(--intro-title-delay,250ms) + var(--intro-row,0) * 70ms)}
/* A set that an earlier direction brought up stays standing and stands
   back, in ink, so each rest of the opening says one thing while the index
   it is assembling keeps everything it has already said. */
body.landing-intro-speaking
  .pill-link[data-intro-shown="true"]:not([data-intro-lit="true"]){
  --chapter-name-ink:34%;--chapter-mark-ink:26%}
.landing-enhanced.pill-field-enhanced .pill-chapter-title,
.landing-enhanced.pill-field-enhanced .pill-chapter-number{transition:color .72s var(--landing-ease)}
/* The opening's own reveals are authored at a higher specificity than the
   sheet's reduced-motion block below, so they have to withdraw themselves. */
@media(prefers-reduced-motion:reduce){
  .landing-enhanced.pill-field-enhanced .pill-chapter-label,
  .landing-enhanced.pill-field-enhanced
    .pill-link[data-intro-shown="true"][data-gravity-ready="true"] .pill-chapter-label,
  .landing-enhanced.pill-field-enhanced .pill-chapter-title,
  .landing-enhanced.pill-field-enhanced .pill-chapter-number{transition:none}
  .landing-enhanced.pill-field-enhanced.landing-has-intro:not(.landing-chapters-visible)
    .pill-link:not([data-intro-shown="true"]) .pill-chapter-label{translate:0 0}
}

/* Role, in weight and in ink. One size for every name in the column and one
   for every mark beside it: the entrance carries the weight, a reading is the
   plain face, and a companion is lighter and quieter because it stands beside
   the argument rather than inside it. Nine names set at four sizes read as a
   ranked list of nine things; set at one, they read as one archive with an
   entrance, and the three companions are already told apart by their lettered
   marks without a second face being brought in to say it again. */
.landing-enhanced.pill-field-enhanced .pill-chapter-title{
  position:relative;
  grid-column:2;
  display:block;
  font-size:var(--chapter-title-size,27px);
  font-weight:var(--chapter-title-weight,400);
  font-style:var(--chapter-title-style,normal);
  line-height:1.16;
  letter-spacing:-.032em;
  color:color-mix(in srgb,var(--landing-ink) var(--chapter-name-ink,74%),var(--landing-paper));
  transform:none;
  transition:color .25s ease}
/* The mark is back in the flow, and the specificity is not decoration: the
   drawer this study stands down still ships `position:absolute` on the mark
   at three classes, and a rule of one class underneath it left every number
   hanging off an authored twelve-pixel offset while the row it belonged to
   was being set on a baseline it had already left. */
.landing-enhanced.pill-field-enhanced .pill-chapter-number{
  position:static;
  grid-column:1;
  top:auto;
  right:auto;
  bottom:auto;
  margin:0;
  padding-right:var(--chapter-mark-gap,18px);
  /* The mark is the name's equal, at the name's size and on the name's line.
     Tracking is not carried up with the size: .085em is the archive's label
     setting at ten pixels, and the same figure at twenty-seven opens `00` by
     five pixels and reads as a gap rather than as a numeral. */
  font-size:var(--chapter-title-size,27px);
  line-height:1.16;
  letter-spacing:.005em;
  text-align:right;
  color:color-mix(in srgb,var(--landing-ink) var(--chapter-mark-ink,50%),var(--landing-paper));
  transform:none;
  transition:color .25s ease}
/* Every state of this column is a pair of ink steps rather than a weight or a
   wrapper's opacity, which is the archive's own rule: an opacity on the box
   multiplies against whatever alpha the ink already carries, the token system
   cannot see the result, and here it took a ten-pixel mark to a fifth of the
   page's ink while every token involved still looked compliant. */
.pill-link{--chapter-name-ink:74%;--chapter-mark-ink:50%}
.pill-link[data-chapter-role="entrance"]{--chapter-title-weight:600;--chapter-name-ink:100%}
.pill-link[data-chapter-role="companion"]{--chapter-title-weight:360;--chapter-name-ink:54%}

/* The archive's own link affordance, which every standalone control in this
   project resolves to: the chapter's field at fifteen per cent, a hairline
   and a two-pixel lift. It is drawn on the row rather than on the name, so a
   chapter's mark is lit with its title instead of standing outside the thing
   the reader is pointing at; and the arrow is gone with it, because an arrow
   set against a left-ranged column lands in a different place on every row
   and points at the white rather than along the column.

   The surface is a layer behind the row rather than padding on it, so the
   whole component can be taken without a name leaving the edge it was set
   on, and it carries the lift itself so the row moves as one piece. */
.pill-chapter-label::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-11px -22px;
  border:1px solid transparent;
  border-radius:999px;
  background:color-mix(in srgb,var(--chapter-accent,var(--mhc-accent)) 15%,transparent);
  opacity:0;
  transform:translateY(0);
  transition:opacity .25s ease,border-color .25s ease,
    transform .3s var(--mhc-link-ease,cubic-bezier(.22,1,.36,1))}
/* The plate is the row's highlight in its chapter's own color, so the
   archive cursor's light joins it rather than setting it aside, falling
   inside the plate in that color as it does on the chapter index leaf. */
.pill-chapter-label{--mhc-lumen-hover:keep;--mhc-lumen-tint:var(--chapter-accent,var(--mhc-accent))}
.pill-chapter-label:hover,
.pill-link:focus-visible .pill-chapter-label{--chapter-name-ink:100%;--chapter-mark-ink:78%}
.pill-chapter-label:hover::before,
.pill-link:focus-visible .pill-chapter-label::before{
  opacity:1;
  border-color:color-mix(in srgb,var(--landing-ink) 16%,transparent);
  transform:translateY(-2px)}
.pill-link:focus-visible .pill-chapter-label::before{
  border-color:color-mix(in srgb,var(--landing-ink) 42%,transparent)}
.pill-chapter-label:active::before{transform:translateY(0) scale(.995)}

/* While one name is being pointed at, the rest of the column stands back, so
   the page says one thing at a time. It stands back in ink rather than in
   opacity, for the reason given above. The test is on the label rather than on
   the link around it, because the link takes no pointer in this composition
   and a box that is not hit-tested is not a reliable subject for `:hover`. */
.landing-enhanced.pill-field-enhanced.landing-chapters-visible
  [data-pointing="true"] .pill-link[data-gravity-ready="true"]:not(:focus-within)
  .pill-chapter-label:not(:hover){--chapter-name-ink:32%;--chapter-mark-ink:24%}

/* The brief, opposite the form, at one fixed place. It carries the reading
   alone. The mark it used to print above that reading named the chapter the
   reader's own cursor was resting on, and set the same two characters twice
   inside one composition. */
.chapter-brief{
  position:absolute;
  z-index:6;
  left:var(--brief-x,74%);
  top:var(--slot-y,50%);
  display:grid;
  gap:9px;
  width:min(310px,24vw);
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .34s var(--landing-ease)}
body.landing-chapters-visible .chapter-brief[data-brief-open="true"]{opacity:1}
.chapter-brief-body{
  margin:0;
  padding:0;
  border:0;
  color:color-mix(in srgb,var(--landing-ink) 76%,var(--landing-paper));
  font:450 15px/1.55 var(--landing-sans);
  letter-spacing:-.006em;
  text-wrap:pretty;
  hyphens:none}

/* The drawer's full medication record has no place in a composition that
   shows one form at a time beside its own name. What the form owes the reader
   is what it is and what it is for, and it says that in two lines under
   itself, in the archive's own notation at the sizes the record already uses:
   the fact in the medium weight, the reading of it in the plain one, both in
   mono because every measurement and every identifier in this archive is. */
.pill-specimen{display:none!important}
.chapter-form-caption{
  position:absolute;
  z-index:6;
  left:var(--slot-x,25%);
  top:var(--form-bottom,60%);
  display:grid;
  gap:2px;
  width:clamp(215px,var(--form-width,235px),290px);
  margin:0;
  text-align:center;
  opacity:var(--form-reveal,0);
  pointer-events:none;
  transform:translateX(-50%)}
.chapter-form-name{
  color:color-mix(in srgb,var(--landing-ink) 66%,var(--landing-paper));
  font:500 11px/1.5 var(--landing-mono);
  letter-spacing:-.005em}
.chapter-form-use{
  color:color-mix(in srgb,var(--landing-ink) 50%,var(--landing-paper));
  font:400 11px/1.5 var(--landing-mono);
  letter-spacing:.005em;
  text-wrap:balance}

@media(max-width:1180px){
  .pill-link{--chapter-title-size:21px}
  .landing-enhanced.pill-field-enhanced .pill-chapter-label{--chapter-mark-gap:14px}
  .pill-chapter-label::before{inset:-9px -17px}
  .chapter-brief{width:min(260px,26vw)}
  .chapter-brief-body{font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .chapter-brief,.pill-chapter-label,.pill-chapter-title,
  .pill-chapter-number,.pill-chapter-label::before{transition:none}
  .pill-chapter-label:hover::before,
  .pill-link:focus-visible .pill-chapter-label::before{transform:none}
}