/* the till: a visible section without JS, a native dialog with it. It fades up in lamplight. */
.till { max-width: 34rem; margin: 0 auto; padding: var(--s-8) var(--gutter); background: var(--ivory) url(../img/tex/paper-512.webp) 0 0 / 512px; color: var(--ink); }
.till p { color: var(--ink); max-width: 30em; }
.till .sc { color: var(--oxblood); }
.till h2:focus { outline: none; } /* the title takes focus when the dialog opens; it is not a control */
.till h2 { color: var(--ink); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.till-head { display: flex; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); }
.till-cover { width: 96px; height: auto; border: 1px solid var(--brass); flex: none; }
.till-links { margin: var(--s-5) 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.till-links li { border-bottom: 1px solid var(--rule); }
.till-links a { display: flex; align-items: center; min-height: 52px; color: var(--ink); font: 500 1.125rem var(--f-display); text-decoration-color: var(--oxblood); }
.till-links a:focus-visible, .till .btn:focus-visible { outline-color: var(--oxblood); }
.till-recap { margin-bottom: var(--s-3); }
.till-sign { font: italic 400 1.375rem/1.3 var(--f-display); color: var(--oxblood); margin: 0 0 var(--s-5); }
.till .btn { background: var(--night); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .till .btn:hover { background: var(--bottle); color: var(--ivory); } }

.till-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; overflow: auto; color: var(--ink); }
.till-dialog:not([open]) { display: none; }
.till-dialog::backdrop { background: rgba(7, 8, 6, 0.8); }
.till-dialog .till { position: relative; margin-block: var(--s-5); max-width: min(34rem, calc(100vw - 32px)); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 5px; box-shadow: 0 0 140px 20px rgba(242, 199, 122, 0.22); }
.till-dialog .till::before { /* the pool of lamplight the panel rises into */
  content: ""; position: absolute; inset: -40% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 199, 122, 0.3), transparent 100%); opacity: 1; transition: opacity 700ms var(--ease-candle);
}
.till-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--s-4) 0; }
.till-dialog, .till-dialog::backdrop { transition: opacity 360ms var(--ease-candle), display 360ms allow-discrete, overlay 360ms allow-discrete; opacity: 1; }
.till-dialog .till { transition: transform 420ms var(--ease-candle), opacity 420ms var(--ease-candle); }
@starting-style {
  .till-dialog[open], .till-dialog[open]::backdrop { opacity: 0; }
  .till-dialog[open] .till { opacity: 0; transform: translateY(14px); }
  .till-dialog[open] .till::before { opacity: 0; }
}
.till-dialog:not([open]), .till-dialog:not([open])::backdrop { opacity: 0; transition-duration: 180ms; }
.till-dialog, .pagebox { inset: 0; margin: 0; overscroll-behavior: contain; }
html.locked { overflow: hidden; } /* phones: no Lenis, so the page is held still behind a dialog */