/* Direction 5, "Ticket" (2026-10-28): each event as an admission ticket. The ticket's body carries the event and its
   fields (date, time, venue, address, speaker, host) in a printed-ticket monospace, with small round portraits; a
   perforated stub on the right (at the bottom on phones) holds the price and the "Get this ticket" button, which opens
   the form below. The morning page is a white ticket with a cobalt stub on cool grey; the lunch (class="lunch") is a
   white ticket with a red stub on near-black. Archivo for display, IBM Plex Mono for the ticket's fields. */

:root {
  --page: #e5e8ec;
  --page-ink: #121417;
  --page-muted: #5b616a;
  --ticket: #ffffff;
  --ink: #121417;
  --muted: #5f646c;
  --line: #d7dbe1;
  --stub: #2442a8;
  --stub-ink: #ffffff;
  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}
body.lunch {
  --page: #161618;
  --page-ink: #f2f1ee;
  --page-muted: #a9a8a3;
  --stub: #b4232c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: var(--page); color: var(--page-ink); font: 400 16px/1.5 var(--display); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--stub); outline-offset: 3px; }
.hp { display: none !important; }

.top { padding: 22px 20px 0; text-align: center; font: 600 12px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--page-muted); }

.ticket { position: relative; width: min(980px, 100% - 32px); margin: 24px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; background: var(--ticket); color: var(--ink); border-radius: 14px; box-shadow: 0 20px 44px rgba(0, 0, 0, .18); }
.main { padding: 30px 34px 28px; }
.admit { font: 600 12px/1.2 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--stub); }
.name { margin-top: 12px; font: 800 clamp(30px, 3.6vw, 46px)/1.02 var(--display); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.line { margin-top: 10px; font: 500 18px/1.4 var(--display); color: var(--muted); text-wrap: balance; }
.fieldset { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; }
.f small { display: block; font: 600 11.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.f b { display: block; margin-top: 5px; font: 600 14.5px/1.4 var(--mono); }
.faces { display: flex; align-items: center; gap: 10px; }
.faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* the stub, behind a perforation with a notch at each end */
.stub { position: relative; padding: 30px 24px 26px; border-left: 2px dashed var(--line); border-radius: 0 14px 14px 0; background: var(--stub); color: var(--stub-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.stub::before, .stub::after { content: ""; position: absolute; left: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--page); }
.stub::before { top: -13px; }
.stub::after { bottom: -13px; }
.stub .seat { font: 600 11.5px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.stub .amt { margin-top: 8px; font: 800 56px/1 var(--display); letter-spacing: -.02em; }
.stub .amt small { display: block; margin-top: 8px; font: 500 13.5px/1.35 var(--mono); letter-spacing: 0; opacity: .9; }
.get { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: var(--stub-ink); color: var(--stub); font: 700 13.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.stub .no { margin-top: 14px; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* the form, opened by the stub's button */
.signup { width: min(980px, 100% - 32px); margin: 18px auto 0; padding: 24px 28px; background: var(--ticket); color: var(--ink); border-radius: 14px; }
.signup h2 { font: 800 22px/1.1 var(--display); text-transform: uppercase; }
.signup form, .signup .done { margin-top: 14px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields .full { grid-column: 1 / -1; }
.fields label { display: grid; gap: 4px; font: 600 11.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fields input, .fields select { width: 100%; min-width: 0; padding: 11px 12px; font: 16px/1.3 var(--display); color: var(--ink); background: #f4f5f7; border: 1px solid var(--line); border-radius: 8px; }
.fields input:focus, .fields select:focus { outline: 2px solid var(--stub); outline-offset: 0; background: #fff; }
.fields input::placeholder { color: #8a9098; }
.fields select { appearance: none; -webkit-appearance: none; padding-right: 34px; background: #f4f5f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23121417' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
.fields select:invalid { color: #8a9098; }
.fields select option { color: #121417; }
.signup button[type="submit"] { width: 100%; margin-top: 14px; padding: 15px; border: 0; border-radius: 8px; background: var(--stub); color: #fff; font: 700 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.signup button[disabled] { opacity: .6; cursor: progress; }
.form-note { margin-top: 10px; font: 400 14px/1.4 var(--display); }
.form-note:empty { display: none; }
.done:focus { outline: none; }
.done-title { font: 800 26px/1.1 var(--display); text-transform: uppercase; }
.draft-note { margin-top: 8px; padding: 9px 11px; border: 1px dashed var(--line); border-radius: 8px; font: 400 13.5px/1.45 var(--display); color: var(--muted); }
.cal { margin-top: 10px; font: 600 14px/1.4 var(--display); }
.cal a { color: var(--stub); text-underline-offset: 3px; }
.fine { margin-top: 12px; font: 400 13px/1.45 var(--display); color: var(--muted); }

/* below the ticket */
.more { width: min(980px, 100% - 32px); margin: 34px auto 0; }
.more h2 { font: 600 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--page-muted); }
.more ol { list-style: none; counter-reset: p; margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.more li { counter-increment: p; font: 600 18px/1.4 var(--display); }
.more li::before { content: counter(p, decimal-leading-zero); display: block; margin-bottom: 8px; font: 600 13px/1 var(--mono); letter-spacing: .1em; color: var(--page-muted); }
.foot { width: min(980px, 100% - 32px); margin: 34px auto 0; padding: 18px 0 34px; border-top: 1px solid rgba(127, 127, 127, .3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font: 400 13.5px/1.5 var(--display); color: var(--page-muted); }
.foot a { color: var(--page-ink); text-underline-offset: 3px; }

@media (max-width: 820px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .main { padding: 24px 22px 22px; }
  .fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stub { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .55); border-radius: 0 0 14px 14px; }
  .stub::before, .stub::after { top: -14px; bottom: auto; }
  .stub::before { left: -13px; }
  .stub::after { left: auto; right: -13px; }
  .more ol { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .f small { font-size: 12px; }
}
.f.wide { grid-column: 1 / -1; }
.f.wide .faces b { margin-left: 4px; }

/* thanks.html (after payment) and pay.html (the step without JavaScript): the same ticket, with links in the stub */
.stub a.get { display: block; text-align: center; text-decoration: none; }
.stub .alt { display: block; margin-top: 12px; text-align: center; font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stub-ink); text-underline-offset: 3px; }
.back { width: min(980px, 100% - 32px); margin: 22px auto 40px; font: 500 14px/1.5 var(--display); color: var(--page-muted); }
.back a { color: var(--page-ink); text-underline-offset: 3px; }