/* pages.css — about, venue, tickets and the corner (the pages lane, milestone 2r; the finish round). Sheet units: 1 unit = 1 CSS px at
   camera zoom 1; a phone shows these 560-unit columns at about 0.66, a laptop at 1.0. The type scale is the finish round's (23 / 21 / 19 /
   26 units: the smallest type reads at 12.6 px on the phone proxy), repeated here, scoped to these four sheets, so they read the same
   whether or not the core's scale has landed; secondary type is never fainter than 0.75. Every control a visitor taps is at least 68 units
   tall (45 CSS px on the phone at 0.661), or carries an ::after hit area that size centred on it, so the type never moves for it. Everything typed is the
   typewriter in the ink with the tooth (typed-ink); the hand-written lines are canvases the core paints into the data-hand elements; the
   drawings (Texas, the star, the stubs, the arrow) are canvases pages.js paints with the brush, multiplied into the paper like ink. */
.place.pg { --pg-gap: 18px; }
.place.pg [hidden] { display: none !important; }   /* a hidden line stays hidden even where a rule gives its kind a display (a written line is a block) */
.place.pg .t-body { font-size: 23px; line-height: 1.5; }
.place.pg .t-small { font-size: 21px; line-height: 1.45; }
.place.pg .t-tiny { font-size: 19px; line-height: 1.4; }
.place.pg .t-head { font-size: 26px; line-height: 1.2; }
.place.pg p { margin: 0 0 var(--pg-gap); }
.place.pg ul, .place.pg ol { margin: 0 0 var(--pg-gap); padding: 0; list-style: none; }
.place.pg a { color: inherit; }
/* the hand: a block line (p) or an inline line inside a link or a button; the core puts the canvas in */
.place.pg p.hand-line { display: block; }
.place.pg .hand-line { line-height: 1; }
.place.pg span.hand-line { display: inline-block; vertical-align: middle; }
.place.pg .hand-line canvas { display: block; }
.place.pg .pg-theme { margin: 4px 0 20px; }
.place.pg .pg-tba { margin: 2px 0 14px; }
.place.pg .pg-sub { margin: 34px 0 10px; }
.place.pg .pg-flag { opacity: 0.78; margin-bottom: 8px; }
.place.pg .pg-note { opacity: 0.78; margin-bottom: 8px; }
.place.pg .pg-foot { opacity: 0.78; margin: 10px 0 8px; }
.place.pg .panel-kicker { opacity: 0.78; margin: 0 0 18px; }
.place.pg .pg-sub-first { margin-top: 6px; }
.place.pg .pg-sub-small { margin-top: 26px; }
.place.pg .pg-ask { margin-top: 26px; }
.place.pg .typed-block { min-height: 3em; }
/* the typewriter's own arrows (replay when done, skip while typing) sit at the end of the block's last line, taking no line of their own */
.place.pg .tw-controls { display: flex !important; justify-content: flex-end; align-items: flex-start; height: 0; margin: 0 !important; position: relative; top: -34px; z-index: 2; pointer-events: none; }   /* over the next paragraph, whose ink mask stacks it above in-flow neighbours */
/* the arrow keeps its look; its button is 68 units square around it (45 CSS px on the phone), the negative margin keeps it where it was */
.place.pg .tw-controls button { pointer-events: auto; padding: 20px 24px !important; margin: -16px -20px !important; }
/* drawn things: the brush's canvases multiply into the paper like the rest of the ink */
.place.pg canvas.pg-draw { display: block; mix-blend-mode: multiply; pointer-events: none; }

/* ---- about: the editions as a hand-written column of years with their typed line beside each */
.pg-about .pg-editions { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
/* each row is one link to its year (the whole row is the target: 68 units, 45 CSS px on the phone) */
.pg-about .pg-editions a.ed { display: grid; grid-template-columns: 88px 1fr; align-items: center; column-gap: 12px; min-height: 68px; text-decoration: none; border: 0; color: inherit; }
.pg-about .pg-editions a.ed:hover .ed-line, .pg-about .pg-editions a.ed:focus-visible .ed-line { text-decoration: underline; text-decoration-color: rgba(21, 20, 26, 0.45); text-underline-offset: 3px; }
.pg-about .pg-editions a.ed:hover .year, .pg-about .pg-editions a.ed:focus-visible .year { opacity: 0.7; }
.pg-about .pg-editions .ed-line { opacity: 0.82; }
.pg-about .pg-editions li.virtual .ed-line { opacity: 0.75; font-style: italic; }
.pg-about .pg-editions li.now .ed-line { opacity: 1; }
.pg-about .pg-partners ul li { margin: 0 0 6px; }
.pg-about .pg-partners .tier { text-transform: lowercase; opacity: 0.78; margin-right: 6px; }
.pg-about .pg-partners .tier::after { content: ":"; }
.pg-about .pg-qa { margin: 0 0 6px; }
.pg-about .pg-q { margin: 16px 0 6px; }
.pg-about .pg-a { margin: 0 0 8px; }
.pg-about .pg-contact a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 68px; }

/* ---- venue: the outline of Texas with the star at Austin (pages.js paints it; the aspect keeps the flow height known before it does) */
.pg-venue .pg-texas { position: relative; margin: 0 0 8px; width: 100%; aspect-ratio: 488 / 452; }
.pg-venue .pg-texas canvas.pg-draw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pg-venue .pg-texas .pg-austin { position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); pointer-events: none; }
.pg-venue .pg-texas figcaption { position: absolute; left: 0; bottom: 0; opacity: 0.78; }

/* ---- tickets: two stubs lying on the paper, a little turned; the arrow to the real link */
.pg-tickets .pg-stubs { display: flex; flex-direction: column; gap: 30px; margin: 14px 0 26px; }
.pg-tickets .pg-stub { position: relative; display: grid; grid-template-columns: 1fr 104px; min-height: 196px; padding: 0; -webkit-user-select: none; user-select: none; }
.pg-tickets .pg-stub:nth-child(1) { margin-right: 18px; }
.pg-tickets .pg-stub:nth-child(2) { margin-left: 18px; }
.pg-tickets .pg-stub { z-index: 1; }
.pg-tickets .pg-stub::before { content: ""; position: absolute; inset: 1px; border-radius: 7px; background: var(--paper, #f1ece2); opacity: 0.94; }   /* a stub is a card of paper: what it is moved over does not read through it */
.pg-tickets .pg-stub canvas.pg-draw { position: absolute; left: -10px; top: -10px; width: calc(100% + 20px); height: calc(100% + 20px); }
.pg-tickets .pg-stub-body { position: relative; padding: 22px 18px 18px 26px; }
.pg-tickets .pg-stub-body p { margin: 0 0 6px; }
.pg-tickets .pg-stub-class { margin-bottom: 4px; }
.pg-tickets .pg-stub-phase, .pg-tickets .pg-stub-next { opacity: 0.8; }
.pg-tickets .pg-stub-price { font-size: 44px; line-height: 1.1; margin: 8px 0 6px !important; letter-spacing: 0.01em; }
.pg-tickets .pg-stub-tear { position: relative; display: flex; align-items: center; justify-content: center; }
.pg-tickets .pg-stub-tear span { display: block; transform: rotate(90deg); white-space: nowrap; opacity: 0.78; }
.pg-tickets .pg-register { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; }
.pg-tickets canvas.pg-arrow { width: 118px; height: 58px; flex: none; }
.pg-tickets .pg-reg-link { display: inline-flex; align-items: center; min-height: 68px; text-decoration: none; border: 0; }
.pg-tickets .pg-reg-link:hover, .pg-tickets .pg-reg-link:focus-visible { opacity: 0.72; }
html[data-arranging] .pg-tickets .pg-stub, .pg-tickets .pg-stub.lifted, .pg-tickets .pg-stub.held { z-index: 6; }
.pg-tickets .pg-stub.lifted canvas.pg-draw { filter: drop-shadow(0 7px 9px rgba(21, 20, 26, 0.24)); }   /* held like the mark: lifted a little, a soft shadow while in the hand */

/* ---- the corner: hand-written actions, each at least 44 CSS px tall and wide on the phone (68 units at its zoom), a typed line under each */
.pg-corner .pg-act-row { margin: 10px 0 4px; }
.pg-corner .pg-act { display: inline-flex; align-items: center; min-height: 68px; min-width: 68px; box-sizing: border-box; padding: 6px 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pg-corner .pg-act:hover, .pg-corner .pg-act:focus-visible { opacity: 0.7; }
.pg-corner .pg-act .pg-arrowhead { flex: none; margin-right: 8px; opacity: 0.8; mix-blend-mode: multiply; }
.pg-corner .pg-act:focus-visible { outline: 1.5px dashed var(--chrome, rgba(40, 34, 28, 0.62)); outline-offset: 3px; }
.pg-corner .pg-act-note { margin: -6px 0 6px; opacity: 0.78; }
.pg-corner .pg-link-ways { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 0 0 8px 18px; }
.pg-corner .pg-link-ways[hidden] { display: none; }
.pg-corner .pg-small { min-height: 68px; }
.pg-corner .pg-linkbox { display: block; width: 100%; min-height: 68px; box-sizing: border-box; font: 19px/1.4 var(--type); color: inherit; background: transparent; border: 1px dashed rgba(21, 20, 26, 0.35); padding: 8px; margin: 0 0 12px; }
.pg-corner .pg-mine { margin-top: 26px; }
.pg-corner .pg-empty { opacity: 0.8; }
.pg-corner .pg-sheets li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; border-bottom: 1px solid rgba(21, 20, 26, 0.12); padding: 4px 0; }
.pg-corner .pg-sheets li .pg-sheet-name { min-width: 150px; }
.pg-corner .pg-sheets li .pg-sheet-name a { text-decoration: none; border-bottom: 1px solid rgba(21, 20, 26, 0.3); display: inline-flex; align-items: center; min-height: 68px; }
.pg-corner .pg-sheets li .pg-count { opacity: 0.78; margin-left: 8px; }
.pg-corner .pg-picks li { padding: 8px 0; border-bottom: 1px solid rgba(21, 20, 26, 0.12); }
.pg-corner .pg-picks li .when { display: block; opacity: 0.78; font-size: 19px; }
.pg-corner .pg-picks li .clash { display: block; font-size: 19px; opacity: 0.85; }
.pg-corner .pg-picks li a { display: flex; align-items: center; min-height: 68px; text-decoration: none; border: 0; }
.pg-corner .pg-picks li a span { border-bottom: 1px solid rgba(21, 20, 26, 0.3); }
.pg-corner .pg-later { margin-top: 30px; }
.pg-corner .pg-soon { opacity: 0.78; margin-top: -4px; }
.pg-corner .pg-offer { margin-bottom: 8px; }
.pg-corner .pg-for { opacity: 0.78; }
.pg-corner [data-row="fresh"] { margin-top: 36px; }

/* with JavaScript off: the typed text stays (the hand-written lines show as type), the drawings are absent */
html:not(.js) .place.pg canvas.pg-draw, html:not(.js) .pg-corner .pg-act-row, html:not(.js) .pg-corner .pg-link-ways { display: none; }
@media (prefers-reduced-motion: reduce) { .place.pg * { transition: none !important; } }

/* ---- tap targets for links in running type (the finish round): an inline link keeps its place in the line and gets an invisible 68-unit
   hit area centred on it (45 CSS px on the phone proxy), so the line never moves to make room; the asks are their own lines */
.place.pg p a:not(.pg-act) { position: relative; display: inline-block; }   /* one box (a link never breaks across lines), so its hit area is centred on it */
.place.pg p a:not(.pg-act)::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 68px; transform: translateY(-50%); }
.place.pg .pg-ask a { display: inline-flex; align-items: center; min-height: 68px; }
.place.pg .pg-ask a::after { display: none; }
/* one layout on every device (the paper's coordinates are shared, so nothing inside a sheet reflows for a phone): the asks stand one under the other */
.place.pg .pg-ask { display: flex; flex-direction: column; align-items: flex-start; }
.place.pg .pg-ask .pg-ask-sep { display: none; }
.pg-corner [data-slot="no-pdf"] { margin: 4px 0 10px; }
.pg-corner .pg-archived { margin-top: 10px; }
.pg-corner .pg-archived .pg-sheets li { border-bottom-style: dashed; }

/* ---- on paper (print.html and the browser's print): the corner keeps its title and the visitor's picks; the controls, the lists of
   things to press and the notes for Zpryme mean nothing on a printed poster. The typewriter's arrows never print. */
html[data-print="on"] .place.pg .tw-controls { display: none !important; }
html[data-print="on"] .pg-corner .pg-act-row, html[data-print="on"] .pg-corner .pg-link-ways, html[data-print="on"] .pg-corner .pg-linkbox,
html[data-print="on"] .pg-corner .pg-keeps, html[data-print="on"] .pg-corner .pg-drawings, html[data-print="on"] .pg-corner .pg-later,
html[data-print="on"] .pg-corner [data-slot="no-pdf"], html[data-print="on"] .pg-corner [data-slot="calendar"], html[data-print="on"] .pg-corner [data-slot="no-picks"] { display: none !important; }
html[data-print="on"] .pg-tickets .pg-stub.lifted canvas.pg-draw { filter: none; }
@media print {
  .place.pg .tw-controls { display: none !important; }
  .pg-corner .pg-act-row, .pg-corner .pg-link-ways, .pg-corner .pg-linkbox, .pg-corner .pg-keeps, .pg-corner .pg-drawings, .pg-corner .pg-later,
  .pg-corner [data-slot="no-pdf"], .pg-corner [data-slot="calendar"], .pg-corner [data-slot="no-picks"] { display: none !important; }
}