/* The glossary: the directory (/glossary/) and each term's page (assets/bodies-glossary.js). Every glossary page opens
   on one picture: a page held up in an archive, first person, with the page's own words printed on that page (the
   directory's name, or the term's). The scroll brings the page up close until it fills the screen, and the directory,
   or the entry, is read on that paper: the A to Z rail that stays with you, the find field, the four kinds of term and
   each letter set large beside its terms; or the term, its definition and the terms it leads to. */

/* the hero: the picture keeps its painted shape and covers the hero (so the page in it has a known place, whatever the
   screen), and the words box is the same box, its padding drawn in to the page. The page's place is in the picture's
   own fractions: left, top, width, height, and its usable height (down to where the thumbs reach it). A wide screen
   takes the wide painting, a tall one the tall painting (tools/standalone/art.cjs) */
.t-hero.is-sheet { container-type: size; --ar: 1.7762; --pl: .3365; --pt: .1519; --pw: .327; --ph: .7291; --pu: .548; }
@media (max-aspect-ratio: 1/1) { .t-hero.is-sheet { --ar: .563; --pl: .2034; --pt: .2695; --pw: .5915; --ph: .4575; --pu: .4095; } }
.t-hero.is-sheet :is(.t-img, .t-hero-text) { --gw: max(100cqw, 100cqh * var(--ar)); --gh: calc(var(--gw) / var(--ar)); position: absolute; left: calc(50% - var(--gw) / 2); top: calc(50% - var(--gh) / 2); right: auto; bottom: auto; width: var(--gw); height: var(--gh); }
.t-hero.is-sheet .t-img { background-size: 100% 100%; }
.t-hero.is-sheet .t-media::after { content: none; }   /* (the shade over other paintings would grey the paper) */
.t-hero.is-sheet .t-shade { background: var(--sys-ice); }
.t-hero.is-sheet .t-hero-text { --pp: calc(var(--gw) * var(--pw)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--gh) * var(--pt) + var(--pp) * .08) calc(var(--gw) * (1 - var(--pl) - var(--pw)) + var(--pp) * .09) calc(var(--gh) * (1 - var(--pt) - var(--pu)) + var(--pp) * .07) calc(var(--gw) * var(--pl) + var(--pp) * .09); }
/* one word on the page, set like a title page in the serif italic, as ink: no shadow, and it takes the paper's own
   grain and light (multiply) */
.t-hero.is-sheet .t-title, .t-hero.is-sheet.is-settled .t-title { text-shadow: none; }
.t-hero.is-sheet .t-title { font: italic 400 max(30px, calc(var(--pp) * var(--tk, .2)))/1.02 var(--sys-accent); letter-spacing: .022em; color: #15181d; mix-blend-mode: multiply; text-wrap: balance; }   /* (the reveal sets each letter in its own box, which loses the font's kerning: open, so no pair such as r and y meets) */

/* the room is alive (placed by tools/standalone/glossary.cjs; they live in the picture, so they move with it). Each
   lamp's light swings on its own time: up into a warm halo that spills onto the shelves, down to dimmer than painted
   (a shade over its bulb). Comets cross the window's sky, drawn through a mask of it (bodies-glossary.js makes them).
   One set for each painting, shown with it */
.gl-life { position: absolute; inset: 0; pointer-events: none;
  /* (the page is in front of the room: no lamp's halo is drawn over it) */
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, calc(var(--pl) * 100%) calc(var(--pt) * 100%), calc(var(--pl) * 100%) calc((var(--pt) + var(--ph)) * 100%), calc((var(--pl) + var(--pw)) * 100%) calc((var(--pt) + var(--ph)) * 100%), calc((var(--pl) + var(--pw)) * 100%) calc(var(--pt) * 100%), calc(var(--pl) * 100%) calc(var(--pt) * 100%)); }
.gl-life.is-tall { display: none; }
@media (max-aspect-ratio: 1/1) { .gl-life.is-wide { display: none; } .gl-life.is-tall { display: block; } }
.gl-lamp { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%; }
.gl-lamp::before, .gl-lamp::after { content: ""; position: absolute; border-radius: 50%; }
.gl-lamp::before { inset: -45%; opacity: .5; background: radial-gradient(closest-side, rgba(255, 214, 158, .62), rgba(255, 178, 104, .26) 42%, rgba(255, 150, 80, .08) 70%, rgba(255, 150, 80, 0)); }
.gl-lamp::after { inset: 18%; opacity: .2; background: radial-gradient(closest-side, rgba(14, 10, 12, .8), rgba(14, 10, 12, .45) 55%, rgba(14, 10, 12, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .gl-lamp::before { animation: gl-lamp-up var(--t) ease-in-out var(--o) infinite; }
  .gl-lamp::after { animation: gl-lamp-down var(--t) ease-in-out var(--o) infinite; }
}
@keyframes gl-lamp-up { 0%, 100% { opacity: .06; } 50% { opacity: 1; } }
@keyframes gl-lamp-down { 0%, 100% { opacity: .78; } 50% { opacity: 0; } }
.gl-sky { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); overflow: hidden;
  -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
/* a comet: a thin streak, its head bright, its tail going to nothing (its size, way and speed are set as it is made) */
.gl-comet { position: absolute; left: 0; top: 0; border-radius: 3px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(255, 206, 190, 0), rgba(255, 226, 214, calc(var(--b, 1) * .45)) 72%, rgba(255, 248, 242, var(--b, 1))); }

/* while the page comes up close the header steps aside, and comes back once the paper fills the screen: it never
   stands half over the room and half over the page */
html.gl-pushing .bar { opacity: 0; visibility: hidden; transition: opacity .3s var(--sys-ease), visibility 0s linear .3s; }
html:not(.gl-pushing) .bar { transition: opacity .45s var(--sys-ease), visibility 0s; }

/* on the glossary's light ground the header's own band runs solid a little further down, so a line that comes to rest
   under the search field is covered there instead of showing through it */
:is([data-topic="glossary"], [data-topic="glossary-term"]) .bar::before { background: linear-gradient(180deg, var(--sys-ice) 0%, var(--sys-ice) 70%, rgba(237, 241, 244, 0) 100%); }

/* the rail that stays with you */
.b-gl-az { position: sticky; top: 64px; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin: 0; padding: 12px var(--gutter) 10px; background: #edf1f4; }
.b-gl-az::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(#edf1f4, rgba(237, 241, 244, 0)); }
.b-gl-az :is(a, span) { display: inline-grid; place-items: center; width: 30px; height: 34px; font: 300 17px/1 var(--sys-display); color: #2b333d; border-radius: 3px; transition: color .2s var(--sys-ease), background-color .2s var(--sys-ease); }
.b-gl-az span, .b-gl-az a.is-empty { color: #b3bbc3; pointer-events: none; }
.b-gl-az a:hover { color: #9a2b3c; }
.b-gl-az a.is-here { color: #9a2b3c; box-shadow: inset 0 -2px 0 #9a2b3c; border-radius: 0; }

/* the book: one column down the middle of the page */
.b-gl-book { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); }
.b-gl-list { padding-bottom: 8vh; }

/* the tools: find, and the kinds */
.b-gl-tools { padding: 9vh 0 3vh; text-align: left; }
.b-gl-find input { width: 100%; padding: 12px 2px 14px; border: 0; border-bottom: 1px solid rgba(13, 17, 23, .26); background: none; color: var(--sys-graphite); font: 200 clamp(30px, 3vw, 50px)/1.1 var(--sys-display); letter-spacing: -.01em; }
.b-gl-find input::placeholder { color: #8a939d; }
.b-gl-find input:focus { outline: none; border-bottom-color: var(--sys-graphite); }
.b-gl-find input:focus-visible { outline: 2px solid #2f6f9a; outline-offset: 8px; }
.b-gl-find input::-webkit-search-cancel-button { display: none; }
.b-gl-cats { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 4vh; }
.b-gl-cats button { padding: 6px 0; border: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; color: #5b6570; font: italic 400 clamp(17px, 1.3vw, 21px)/1.2 var(--sys-accent); cursor: pointer; transition: color .25s var(--sys-ease), background-size .35s var(--sys-ease); }
.b-gl-cats button:hover { color: var(--sys-graphite); }
.b-gl-cats button.is-on { color: #9a2b3c; background-size: 100% 1px; }
.b-gl-none { padding: 8vh 0; font: italic 400 24px/1.3 var(--sys-accent); color: #5b6570; }

/* each letter: set large, holding its place while its terms go by */
.b-gl-letter[hidden] { display: none; }
.b-gl-letter { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); column-gap: 3.4vw; padding: 7vh 0 2vh; scroll-margin-top: 130px; }
.b-gl-big { position: sticky; top: 140px; align-self: start; font: 200 clamp(72px, 7.4vw, 132px)/.9 var(--sys-display); letter-spacing: -.02em; color: #9a2b3c; }
.b-gl-terms li + li { border-top: 1px solid rgba(13, 17, 23, .09); }
.b-gl-terms a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; padding: 22px 0; color: inherit; }
.b-gl-name { grid-column: 1; font: 300 clamp(21px, 1.7vw, 27px)/1.2 var(--sys-display); letter-spacing: -.01em; transition: transform .35s var(--sys-ease), color .25s var(--sys-ease); }
.b-gl-aka { font: italic 400 .8em/1 var(--sys-accent); color: #535c66; }
.b-gl-sum { grid-column: 1; margin-top: 8px; max-width: 60ch; font: 400 15px/1.55 var(--sys-body); color: #46505b; }
.b-gl-cat { grid-column: 2; grid-row: 1; align-self: baseline; font: italic 400 15px/1.2 var(--sys-accent); color: #56606b; white-space: nowrap; }
@media (hover: hover) { .b-gl-terms a:hover .b-gl-name { transform: translateX(6px); color: #9a2b3c; } }
.b-gl-terms a:focus-visible { outline: 2px solid #2f6f9a; outline-offset: 4px; border-radius: 2px; }

/* a term's own page, read on the paper: the term again at the head of the entry (the hero's print of it has gone by),
   then the definition, the longer explanation and the terms it leads to, in one column down the middle */
.b-gt-spread { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.b-gt-entry { padding: 13vh 0 12vh; text-align: left; }
.b-gt-head { margin-bottom: 6vh; }
.b-gt-word { font: italic 400 clamp(44px, 4.8vw, 84px)/1.02 var(--sys-accent); letter-spacing: .01em; color: #15181d; text-wrap: balance; }
.b-gt-kind { margin-top: 14px; font: italic 400 clamp(19px, 1.5vw, 24px)/1.3 var(--sys-accent); color: #56606b; }
.b-gt-sum { max-width: 26ch; font: 300 clamp(26px, 2.4vw, 42px)/1.22 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-gt-entry .b-p { max-width: 54ch; margin: 26px 0 0; }
.b-gt-entry .b-gt-sum + .b-p { margin-top: 6vh; }
.b-gt-rel { max-width: 46ch; margin-top: 6vh; font: 300 clamp(19px, 1.5vw, 24px)/1.5 var(--sys-display); letter-spacing: -.008em; color: #2b333d; }
.b-gt-rel a { color: var(--sys-graphite); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: color .2s var(--sys-ease); }
.b-gt-rel a:hover { color: #9a2b3c; }
/* the ending says where the term stands in the alphabet, as a sentence; the way on below it is the next term, as a
   line of type (every term opens on the same picture, so no picture is carried into itself; the line is set in
   topic-bodies.css) */
.b-gt-close .b-h { max-width: 30ch; margin: 0 auto; font-size: clamp(30px, 3vw, 54px); line-height: 1.1; }
.b-gt-close .b-h .accent { font-size: 1.04em; }

@media (max-width: 760px) {
  .b-gl-az { padding: 10px var(--gutter) 8px; }
  .b-gl-az :is(a, span) { width: 24px; height: 30px; font-size: 15px; }
  .b-gl-book { padding: 0; }
  .b-gl-list { padding: 0 var(--gutter) 6vh; }
  .b-gl-tools { padding: 5vh 0 2vh; }
  .b-gl-letter { grid-template-columns: 1fr; }
  .b-gl-big { position: static; font-size: 84px; margin-bottom: 2vh; }
  .b-gl-terms a { grid-template-columns: 1fr; }
  .b-gl-cat { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .b-gt-entry { padding: 9vh 0 8vh; }
  .b-gt-word { font-size: clamp(36px, 10vw, 48px); }
  .b-gt-close .b-h { font-size: clamp(28px, 7.6vw, 36px); }
}

/* the index's close on a short phone: its heading drops the browser's default margins (the build moves the close out of
   .b, past the margin reset), so the ending is one screen; taller screens keep the signed-off spacing */
@media (max-width: 760px) and (max-height: 700px) { [data-topic="glossary"] .t-end > .b-close .b-h { margin: 0; } }