/* conferos.eu, the commercial site: direction B2 in the transit take the owner
   approved for the portals on 2026-10-04 and for this site on 2026-10-07 (#440, .claude/rules/portal-design.md).

   The site keeps its wayfinding: lettered entrances, the overhead sign, the
   departures board, the money line, the fare table. Each device does the job
   it does in the real world. Signs are night and point somewhere; lines are
   indigo; wayfinding yellow marks the next thing to do and nothing else; print
   appears only on something issued, a pass. No monospace outside code, no
   capitals as a label style, no stamps, no microtext, no guilloche as
   wallpaper, no turquoise outside the mark. Archivo at its normal width. */

/* Fonts from the site's own folder, so no visitor's address reaches a font
   service. Latin and Latin Extended only; Chinese falls back to the system. */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --night: #0F1133;
  --indigo: #1B1F9E;
  /* Wayfinding yellow, as Schiphol signs what you do next. */
  --signal: #FFCD00;
  --signal-ink: #0F1133;
  --arrived: #128A55;
  --fault: #C23434;

  --canvas: #F3F5F9;
  --paper: #FFFFFF;
  --ink: #0F1133;
  --ink-2: #4E5375;
  --ink-3: #8A8FB0;
  --rule: rgba(15, 17, 51, .12);
  --rule-strong: #0F1133;
  --perf: rgba(15, 17, 51, .28);
  --print: #1B1F9E;

  /* Text on a sign. */
  --sign-text: #D1D2EC;
  --sign-muted: #9FA1D6;
  --sign-rule: rgba(255, 255, 255, .18);

  /* The console's own face, for the fragments that show the console. */
  --c-bright: #2A32D8;
  --c-violet: #6A1FE0;
  --ok-bg: #E3F5EC; --ok-fg: #14703F;
  --warn-bg: #FDF1DA; --warn-fg: #8A5A00;
  --grey-bg: #EEF0F5; --grey-fg: #4A5068;
  --ind-bg: #E6E7F7;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
html:has(.line) { scroll-padding-top: 168px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 18px; line-height: 1.55; font-variant-numeric: tabular-nums; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1640px; margin: 0 auto; padding: 0 40px; }
.nw { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.bar :focus-visible, .sign :focus-visible, .board :focus-visible, .foot :focus-visible, .relay-modes :focus-visible, .entrance-sign :focus-visible { outline-color: #fff; }
.nextstep :focus-visible { outline-color: var(--signal-ink); }

/* ---------- The top bar: the first panel of the gantry ---------- */
.bar { background: var(--night); color: #fff; position: sticky; top: 0; z-index: 20; }
.bar .wrap { display: flex; align-items: center; gap: 34px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: #fff; }
.brand img { width: 28px; height: 28px; display: block; }
.bar nav { display: flex; gap: 26px; flex: 1; }
.bar nav a, .bar .signin { text-decoration: none; font-weight: 500; font-size: 15.5px; color: var(--sign-text); }
.bar nav a:hover, .bar .signin:hover { color: #fff; }
.bar nav a[aria-current="page"] { color: #fff; box-shadow: 0 2px 0 #fff; }
.bar nav .m-only { display: none; }
/* Sign in: one door per product, under the same letters as the entrances. */
.signin-gate { position: relative; }
.signin-gate summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.signin-gate summary::-webkit-details-marker { display: none; }
.signin-gate summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.signin-gate[open] summary { color: #fff; }
.signin-gate[open] summary::after { transform: translateY(2px) rotate(225deg); }
.gate-panel { position: absolute; right: -14px; top: calc(100% + 20px); width: 330px; background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: 0 0 0 1px var(--rule), 0 34px 60px -26px rgba(4, 5, 30, .75); overflow: hidden; }
.gate-panel-head { display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 14px 18px 10px; }
.gate-panel a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 12px 18px; text-decoration: none; border-top: 1px solid var(--rule); }
.gate-panel a:hover, .gate-panel a:focus-visible { background: var(--canvas); }
.gate-panel .letter { grid-row: span 2; font-size: 30px; font-weight: 650; line-height: 1; color: var(--indigo); text-align: center; }
.gate-panel b { font-weight: 640; font-size: 17px; line-height: 1.2; }
.gate-panel small { font-size: 14px; color: var(--ink-2); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; border-radius: 6px; padding: 8px 12px; font: inherit; font-size: 15px; font-weight: 600; }

/* ---------- Buttons: yellow for the next step, night for the rest ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 6px; font-weight: 640; font-size: 17px; line-height: 1.2; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.next { background: var(--signal); color: var(--signal-ink); }
.btn.next:hover { background: #FFD633; }
.btn.night { background: var(--night); color: #fff; }
.btn.quiet, .btn.line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-strong); background: transparent; }
.btn.quiet:hover, .btn.line:hover { background: rgba(15, 17, 51, .05); }
/* The console's own primary, inside a console fragment. */
.btn.indigo { background: var(--indigo); color: #fff; }
.bar .btn { min-height: 42px; padding: 0 16px; font-size: 15.5px; }

/* ---------- The overhead sign: three entrances, each pointing the way it lies ---------- */
.sign { background: var(--night); color: #fff; border-top: 1px solid var(--sign-rule); }
.sign .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sign a { display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 0 28px; text-decoration: none; border-left: 1px solid var(--sign-rule); }
.sign a:last-child { border-right: 1px solid var(--sign-rule); }
.sign a:hover { background: rgba(255, 255, 255, .06); }
.sign .letter { font-size: 50px; font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.sign .dest { font-size: 27px; font-weight: 620; letter-spacing: -.01em; }
.sign .way { width: 30px; height: 30px; margin-left: auto; color: #fff; flex: none; }

/* The hero: five slides, the owner's choice of 2026-10-07 (#450). They come in
   a fresh order on each visit, each with time to read, and stop while a
   pointer or the keyboard is on them. A slide moves only the first time it
   shows. Under them the index: a number, a pictogram and a short title per
   slide, and a line that fills for as long as the slide stays. */
.lede { font-size: 21px; line-height: 1.5; max-width: 31em; margin: 28px 0 0; color: var(--ink-2); }
.ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.slider { padding: 0 0 26px; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; min-width: 0; }
.slider.js .slide { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.slider.js .slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.slider.js .slide.is-active.arriving .hx { animation: slide-in .6s ease-out both; }
@keyframes slide-in { from { transform: translateY(14px); } to { transform: none; } }
.slider:not(.js) .slides { display: block; }
.slider:not(.js) .slide + .slide { border-top: 1px solid var(--rule); }
.slider:not(.js) .slides-index { display: none; }

.hx { padding: 44px 0 30px; height: 100%; }
.hx-title { margin: 0; font-weight: 640; font-stretch: 104%; letter-spacing: -.032em; line-height: .97; font-size: clamp(44px, 4.9vw, 78px); max-width: 11em; color: var(--ink); }
.hx-copy .lede { max-width: 30em; }
.hx-arrivals, .hx-receipt, .hx-inbox, .hx-website { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.hx-arrivals { grid-template-columns: minmax(0, .92fr) minmax(0, 1.25fr); gap: 48px; }
.hx-website { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: 40px; }
.hx-inbox .hx-title { font-size: clamp(40px, 4.2vw, 64px); }

/* The index under the slides. */
.slides-index { display: flex; align-items: stretch; gap: 10px; margin-top: 6px; }
.slide-tabs { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.slide-tab { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0 10px; padding: 16px 4px 6px; background: none; border: 0; font: inherit; text-align: left; color: var(--ink-2); cursor: pointer; }
.slide-tab:hover { color: var(--ink); }
.slide-tab .n { font-size: 17px; font-weight: 650; color: inherit; }
.slide-tab svg { width: 20px; height: 20px; color: var(--indigo); }
.slide-tab .t { font-size: 15px; font-weight: 560; line-height: 1.25; }
.slide-tab[aria-selected="true"] { color: var(--ink); }
.slide-tab[aria-selected="true"] .t { font-weight: 650; }
.slide-tab .run { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rule); overflow: hidden; }
.slide-tab .run i { display: block; width: 0; height: 100%; background: var(--indigo); }
.slide-tab[aria-selected="true"] .run i { animation: slide-run var(--dur, 16s) linear forwards; }
.slider.held .slide-tab[aria-selected="true"] .run i { animation-play-state: paused; }
@keyframes slide-run { from { width: 0; } to { width: 100%; } }
.slides-pause { flex: none; align-self: flex-end; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--rule); }
.slides-pause:hover { box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.slides-pause svg { width: 16px; height: 16px; }
.slides-pause .i-play, .slides-pause[aria-pressed="true"] .i-pause { display: none; }
.slides-pause[aria-pressed="true"] .i-play { display: block; }

/* Arrivals: the exhibitors coming into the hall, on the board a station hangs over its platforms. */
.arrivals .board-title { font-size: 15px; }
.arrivals .board-row { grid-template-columns: 52px minmax(0, .95fr) minmax(0, 1fr) 162px; gap: 14px; padding: 11px 20px; }
.arrivals .board-row.head { padding-top: 12px; padding-bottom: 8px; }
.arrivals .board-row .t { font-size: 16.5px; }
.arrivals .board-row .d { font-size: 17.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrivals .board-row .g { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arrivals .state { font-size: 14.5px; }
.arrivals .state.ok { color: #fff; }
.arrivals .state.ok::before { background: #3DD68C; }
/* A flap turning over, as a board's cells do when a line changes. */
[data-flap] { display: inline-flex; transform-origin: 50% 50%; backface-visibility: hidden; }
.board-row .g[data-flap] { display: block; }
.flip { animation: flap .34s ease-in-out; }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }

/* Loop line: the conference year as a circle line, the words inside the loop. */
.hx-loop { padding: 18px 0 14px; }
.loop-stage { position: relative; }
.loop-map { display: block; width: 100%; height: auto; overflow: visible; }
.loop-track { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 13; }
.loop-run { fill: none; stroke: var(--indigo); stroke-width: 11; stroke-linecap: round; }
.loop-run.draw { animation: loop-draw 1.8s ease-out .2s both; }
@keyframes loop-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.loop-stops circle { transform-box: fill-box; transform-origin: center; }
.loop-stops.pop circle { animation: stop-pop .45s ease-out both; }
@keyframes stop-pop { from { transform: scale(0); } to { transform: scale(1); } }
.loop-stops .passed { fill: var(--night); }
.loop-stops .ahead { fill: var(--canvas); stroke: var(--ink-3); stroke-width: 2.5; stroke-dasharray: 2 3.3; }
.loop-stops .next { fill: var(--signal); stroke: var(--night); stroke-width: 2.5; }
.loop-stops .here { fill: var(--paper); stroke: var(--night); stroke-width: 7; }
.loop-labels text { font-family: Archivo, system-ui, sans-serif; fill: var(--ink); }
.loop-labels .n { font-size: 17px; font-weight: 640; }
.loop-labels .w { font-size: 14px; fill: var(--ink-2); }
.loop-labels .here-n { fill: var(--indigo); }
.loop-copy { position: absolute; left: 17.5%; right: 20.5%; top: 18%; bottom: 18%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.loop-copy .hx-title { font-size: clamp(34px, 3.45vw, 54px); max-width: 15em; }
.loop-copy .lede { margin-top: 18px; max-width: 36em; font-size: 18.5px; }
.loop-copy .ctas { justify-content: center; margin-top: 24px; }
.loop-list { display: none; }

/* Receipt: a sale as the payer's receipt prints it. Print only because it is issued. */
.receipt-col { display: flex; justify-content: center; padding: 6px 0 16px; }
.receipt { position: relative; width: min(100%, 460px); background: var(--paper); padding: 58px 26px 26px; border-radius: 6px 6px 0 0; box-shadow: 0 0 0 1px var(--rule), 0 34px 60px -38px rgba(15, 17, 51, .55); font-size: 15px; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 10px repeat-x; }
.receipt .print { border-radius: 6px 6px 0 0; }
.receipt.printing .print { animation: print-in .9s ease-out both; }
@keyframes print-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.receipt.printing .r-line, .receipt.printing .r-head, .receipt.printing .r-route { animation: line-in .45s ease-out both; }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.r-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--rule-strong); }
.r-head b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.r-head span { font-size: 13.5px; color: var(--ink-2); }
.r-line { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 9px 0; border-bottom: 1px dotted var(--perf); }
.r-line > span:first-child { color: var(--ink-2); }
.r-line b { font-weight: 640; text-align: right; }
.r-line.big { padding: 14px 0 12px; }
.r-line.big > span:first-child { color: var(--ink); font-weight: 600; }
.r-line.big b { font-size: 26px; letter-spacing: -.02em; }
.r-line .state { font-size: 14px; }
.r-route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; font-size: 13px; font-weight: 600; text-align: center; }
.r-route::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 8px; height: 5px; background: var(--indigo); }
.r-route span { position: relative; padding-top: 26px; }
.r-route span::before { content: ""; position: absolute; left: 50%; top: 0; width: 21px; height: 21px; margin-left: -10.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 5px var(--indigo); }

/* Inbox: the questions an organizer answers by email, each sent where it belongs. */
.mails { border-top: 2px solid var(--rule-strong); }
.mail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 10px 4px; border-bottom: 1px solid var(--rule); font-size: 16px; }
.mail.head { font-size: 14px; color: var(--ink-2); padding: 10px 4px 9px; }
.mail .subj { font-weight: 600; transition: color .3s; }
.mail .to { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); transition: opacity .35s, transform .35s; }
.mail .to b { color: var(--indigo); font-size: 18px; font-weight: 700; min-width: 16px; }
.mail .to svg { width: 16px; height: 16px; color: var(--indigo); flex: none; align-self: center; margin-right: 1px; }
.mail.done .subj { color: var(--ink-2); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(15, 17, 51, .45); }
.mails.live .mail:not(.head):not(.done) .to { opacity: 0; transform: translateX(-14px); }

/* Website: the organizer's own site, in its own face, fed by one line from ConferOS. */
.feed { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); align-items: center; }
.feed-source { display: grid; justify-items: center; gap: 4px; padding: 14px 12px; background: var(--night); color: #fff; border-radius: 6px; text-align: center; font-size: 12px; color: var(--sign-text); }
.feed-source img { width: 30px; height: 30px; }
.feed-source b { font-size: 15px; color: #fff; font-weight: 650; }
.feed-line { position: relative; height: 6px; background: var(--indigo); }
.feed-line::after { content: ""; position: absolute; right: -9px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 5px var(--indigo); }
.feed-line i { position: absolute; left: 0; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--night); opacity: 0; }
.feed.flowing .feed-line i { animation: feed-pulse 1.4s ease-in-out 3; }
@keyframes feed-pulse { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.site-frame { background: #FBF8F2; color: #22242E; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #E6DECF, 0 26px 50px -32px rgba(0, 0, 0, .5); font-size: 12px; line-height: 1.35; }
.sf-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #EFE9DE; color: #6C6456; font-size: 11.5px; }
.sf-bar i { width: 8px; height: 8px; border-radius: 50%; background: #D6CDBE; }
.sf-head { display: flex; align-items: baseline; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #E6DECF; font-size: 12px; color: #6C6456; }
.sf-head b { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; color: #22242E; margin-right: auto; }
.sf-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "agenda speakers" "agenda sponsors" "directory directory"; gap: 12px 16px; padding: 14px 16px 16px; }
.sf-part { min-width: 0; }
.sf-agenda { grid-area: agenda; }
.sf-speakers { grid-area: speakers; }
.sf-sponsors { grid-area: sponsors; }
.sf-directory { grid-area: directory; }
.sf-part h6 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 7px; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-weight: 700; color: #22242E; }
.sf-part h6 em { display: inline-flex; align-items: center; gap: 5px; font-family: Archivo, system-ui, sans-serif; font-style: normal; font-size: 11px; font-weight: 600; color: var(--indigo); }
.sf-part h6 em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); }
.feed.flowing .sf-part h6 em::before { animation: live-blink 1.2s ease-in-out 2; }
@keyframes live-blink { 50% { box-shadow: 0 0 0 5px rgba(27, 31, 158, .2); } }
.feed.flowing .sf-part { animation: part-in .5s ease-out both; }
.feed.flowing .sf-agenda { animation-delay: .5s; }
.feed.flowing .sf-speakers { animation-delay: .8s; }
.feed.flowing .sf-sponsors { animation-delay: 1.1s; }
.feed.flowing .sf-directory { animation-delay: 1.4s; }
@keyframes part-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ag { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 4px; }
.ag-h { font-size: 10.5px; color: #8A8272; font-weight: 600; }
.ag-t { font-size: 10.5px; color: #8A8272; padding-top: 5px; }
.ag-s { display: block; min-height: 48px; padding: 5px 6px; background: #fff; border-left: 3px solid #7A3E12; border-radius: 3px; font-size: 10.5px; color: #6C6456; box-shadow: inset 0 0 0 1px #ECE5D8; }
.ag-s b { display: block; font-size: 11px; color: #22242E; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.ag-s small, .spk small { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--indigo); }
.ag-slot { min-height: 48px; }
.ag-move.moving { transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.ag-move.flash, .logo-tile.flash, .dir-row.flash, .spk.flash { animation: sf-flash 1.2s ease-out; }
@keyframes sf-flash { from { background-color: #E6E7F7; } }
.spk { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; font-size: 10.5px; color: #6C6456; }
.spk b { display: block; font-size: 11.5px; color: #22242E; }
.spk .ph { width: 30px; height: 34px; border-radius: 3px; background: #E6DECF; display: grid; place-items: end center; overflow: hidden; }
.spk .ph svg { width: 26px; height: 29px; fill: #B9AE99; }
.spk .ph-new { background: #D9E2F4; }
.spk .ph-new svg { fill: #7F8DB8; }
.tier { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 10.5px; color: #8A8272; }
.tier > span:first-child { width: 46px; flex: none; }
.tier .logo-tile { width: 26px; height: 26px; border-radius: 5px; font-size: 10px; }
.tier .logo-tile.big { width: 34px; height: 34px; font-size: 12px; }
.tier .logo-tile.small { width: 22px; height: 22px; font-size: 9px; }
.sp-new.arrive { animation: sp-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes sp-pop { from { transform: scale(0); } to { transform: scale(1); } }
.dir-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.dir-search { display: inline-flex; align-items: center; gap: 5px; min-width: 130px; padding: 4px 8px; background: #fff; border-radius: 4px; box-shadow: inset 0 0 0 1px #D6CDBE; color: #22242E; font-size: 11px; }
.dir-search svg { width: 12px; height: 12px; color: #8A8272; }
.dir-search .q::after { content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 1px; background: #22242E; vertical-align: -1px; opacity: 0; }
.dir-search .q.typing::after { opacity: 1; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chip-f { padding: 2px 7px; border-radius: 3px; background: #EFE9DE; color: #6C6456; font-size: 10.5px; }
.chip-f.on { background: #7A3E12; color: #fff; }
.sort { margin-left: auto; font-size: 10.5px; color: #8A8272; }
.dir-row { display: grid; grid-template-columns: 22px minmax(0, 205px) minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid #ECE5D8; font-size: 10.5px; color: #6C6456; overflow: hidden; max-height: 40px; transition: max-height .45s ease, opacity .35s ease, padding .45s ease; }
.dir-row b { color: #22242E; font-size: 11px; }
.dir-row > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-row .logo-tile { width: 22px; height: 22px; border-radius: 4px; font-size: 9px; }
.dir-row.gone { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; }
/* The site as it was before the changes, set back without being seen to move. */
.sf-part .pending { visibility: hidden; }
.sf-part .sp-new.pending { visibility: visible; transform: scale(0); }
.feed.instant, .feed.instant * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .slider.js .slide, .slider.js .slide.is-active { transition: none; }
  .slide-tab[aria-selected="true"] .run i { animation: none; width: 100%; }
}
@media (max-width: 1100px) {
  .hx-arrivals, .hx-receipt, .hx-inbox, .hx-website { grid-template-columns: 1fr; gap: 40px; }
  .loop-copy { left: 16%; right: 19%; top: 19%; bottom: 19%; }
  .loop-copy .hx-title { font-size: 34px; }
  .loop-copy .lede { font-size: 16.5px; }
  .slide-tab { grid-template-columns: auto auto minmax(0, 1fr); }
  .slide-tab .t { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; }
}
@media (max-width: 860px) {
  .loop-map { display: none; }
  .loop-copy { position: static; text-align: left; align-items: flex-start; }
  .loop-copy .ctas { justify-content: flex-start; }
  .loop-list { display: block; list-style: none; margin: 32px 0 0; padding: 0; }
  .loop-list li { position: relative; display: grid; padding: 6px 0 6px 38px; font-size: 14px; color: var(--ink-2); }
  .loop-list li b { font-size: 16.5px; font-weight: 640; color: var(--ink); }
  .loop-list li::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; border-left: 2px dotted var(--ink-3); }
  .loop-list li.passed::before { left: 11px; width: 5px; border: 0; background: var(--indigo); }
  .loop-list li.here::before { left: 11px; width: 5px; bottom: 50%; border: 0; background: var(--indigo); }
  .loop-list li::after { content: ""; position: absolute; left: 6px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--ink-3); }
  .loop-list li.passed::after { background: var(--night); box-shadow: none; }
  .loop-list li.here::after { left: 2px; top: 9px; width: 22px; height: 22px; background: var(--paper); box-shadow: inset 0 0 0 5px var(--night); }
  .loop-list li.next::after { background: var(--signal); box-shadow: inset 0 0 0 2px var(--night); }
  .loop-list li:first-child::before { top: 20px; }
  .feed { grid-template-columns: 1fr; }
  .feed-source, .feed-line { display: none; }
}
@media (max-width: 760px) {
  /* On a phone a slide takes its own height, so the index never sits under empty space. */
  .slider.js .slide:not(.is-active) { display: none; }
  .hx { padding: 32px 0 28px; }
  .hx-title, .loop-copy .hx-title, .hx-inbox .hx-title { font-size: 38px; }
  .slides-index { margin-top: 0; }
  .slide-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; }
  .slide-tabs::-webkit-scrollbar { display: none; }
  .slide-tab { flex: 0 0 132px; scroll-snap-align: start; }
  .arrivals .board-row { grid-template-columns: 50px minmax(0, 1fr); gap: 2px 12px; padding: 11px 14px; }
  .arrivals .board-row.head span:nth-child(n+3) { display: none; }
  .arrivals .board-row .g, .arrivals .board-row .state { grid-column: 2; }
  .arrivals .board-title span:last-child { display: none; }
  .r-line { flex-wrap: wrap; gap: 2px 14px; }
  .receipt { padding: 52px 18px 22px; }
  .mail { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .mail.head span:last-child { display: none; }
  .sf-body { grid-template-columns: 1fr; grid-template-areas: "agenda" "speakers" "sponsors" "directory"; }
  .sf-head span { display: none; }
  .dir-row { grid-template-columns: 22px minmax(0, 1fr); }
  .dir-row > span:last-child { display: none; }
}

/* The four promises on a night band that closes the hero (the owner's choice,
   2026-10-07): a pictogram in the sign's own colour, a line and a sentence. */
.promises { list-style: none; margin: 0; padding: 26px 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--night); color: #fff; border-radius: 6px; }
.promises li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 14px; padding: 0 26px; align-content: start; }
.promises li + li { border-left: 1px solid var(--sign-rule); }
.promises svg, .promises .glyph { grid-row: span 2; width: 30px; height: 30px; color: #fff; margin-top: 1px; }
.promises .glyph { font-size: 31px; font-weight: 700; line-height: 30px; text-align: center; }
.promises b { font-weight: 640; font-size: 19px; line-height: 1.2; }
.promises li > span:last-child { font-size: 15.5px; color: var(--sign-text); line-height: 1.45; }

/* ---------- Sections ---------- */
.sec { padding: 96px 0; }
.sec.tight { padding: 64px 0; }
.sec-head { margin-bottom: 40px; max-width: 1000px; }
.sec h2, .h2 { font-weight: 640; font-stretch: 102%; font-size: clamp(38px, 4.6vw, 68px); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; color: var(--ink); }
.sec .intro { font-size: 20px; max-width: 36em; margin: 0; color: var(--ink-2); }
.label { display: block; font-size: 17px; font-weight: 560; color: var(--ink-2); margin-bottom: 12px; }

/* ---------- States: a mark and a word, the marks a route draws ---------- */
.state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; box-sizing: border-box; }
.state.ok::before { background: var(--arrived); }
.state.done::before { background: currentColor; }
.state.going::before { box-shadow: inset 0 0 0 2px currentColor; }
.state.ahead { color: var(--ink-2); }
.state.ahead::before { border: 1.5px dotted currentColor; }
.state.you::before { background: var(--signal); box-shadow: inset 0 0 0 1px rgba(15, 17, 51, .3); }
.state.fault { color: var(--fault); }
.state.fault::before { background: var(--fault); }
/* The next action on its row: the portal's yellow button, small. */
.act { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.act.next { background: var(--signal); color: var(--signal-ink); }
.act.quiet { box-shadow: inset 0 0 0 1.25px var(--rule-strong); }

/* ---------- The relay: one save in the Exhibitor Portal, three places updated ---------- */
/* Sized to what it shows: on a wide screen it keeps its width and leaves the rest of the row empty. */
.relay { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; max-width: 1280px; }
/* The two stories, as the panels of a small sign: the one shown is lit. */
.relay-modes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; padding: 8px 8px 0; background: var(--night); border-radius: 8px 8px 0 0; }
.relay-modes button { display: flex; align-items: center; height: 50px; padding: 0 22px; background: rgba(255, 255, 255, .07); border: 0; border-radius: 6px 6px 0 0; color: #fff; font-family: inherit; font-weight: 620; font-size: 17px; cursor: pointer; }
.relay-modes button:hover { background: rgba(255, 255, 255, .12); }
.relay-modes button[aria-selected="true"] { background: var(--canvas); color: var(--ink); }
.relay-modes-note { margin-left: auto; align-self: center; padding: 0 16px 8px; font-size: 14.5px; color: var(--sign-muted); }
/* How it went before, as a note in the margin. */
.relay-before { padding-top: 34px; }
.relay-before > div { border-left: 2px solid var(--rule-strong); padding-left: 18px; }
.relay-tag { display: block; font-weight: 640; font-size: 16.5px; }
.relay-before ol { list-style: none; padding: 0; margin: 8px 0 0; }
.relay-before li { padding: 6px 0; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(15, 17, 51, .45); text-decoration-thickness: 1.5px; }
.retired { display: grid; margin: 18px 0 0 20px; font-size: 15.5px; line-height: 1.35; color: var(--ink-2); }
.retired b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.retired span:last-child { color: var(--ink); font-weight: 600; }
.relay-stage { position: relative; display: grid; grid-template-columns: minmax(280px, 330px) minmax(0, 600px); column-gap: 80px; padding: 24px 0 20px; align-items: center; }
.relay-src, .relay-dests { position: relative; z-index: 1; }
.relay-dests { display: grid; gap: 14px; }
.relay-cap { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15.5px; font-weight: 620; }
.relay-cap .letter { font-size: 24px; font-weight: 650; line-height: 1; color: var(--indigo); min-width: 18px; }
.relay-cap svg { width: 20px; height: 20px; color: var(--indigo); flex: none; }
.relay-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.relay-lines .track { fill: none; stroke: var(--indigo); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.relay-lines .dot { fill: var(--paper); stroke: var(--night); stroke-width: 4; opacity: 0; }
/* Level with the console's caption at the top right, so the stage needs no row of its own for it. */
.relay-replay { position: absolute; top: 16px; right: 0; z-index: 2; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px; text-decoration: underline; text-underline-offset: 4px; }
.relay-replay:hover { color: var(--ink); }

/* The portal card, filled in by the exhibitor, in the portal's own face. */
.rp { font-size: 13.5px; padding: 18px 20px 16px; }
.rp-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.rp-head b { display: block; font-size: 16px; font-weight: 650; line-height: 1.2; }
.rp-head small { color: var(--ink-2); font-size: 12.5px; }
.logo-tile { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; font-weight: 750; font-size: 21px; background: var(--c-bg, var(--night)); color: var(--c-fg, #fff); }
.rp-history { padding: 10px 0 9px; border-bottom: 1px solid var(--rule); }
.rp-history > span, .rp-field > span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; }
/* The editions a company exhibited at, as stations: past ones filled, the new one a ring. */
.rp-history .ev { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.3; padding: 2px 0; }
.rp-history .ev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.rp-history .ev.new { font-weight: 650; }
.rp-history .ev.new::before { width: 11px; height: 11px; margin-left: -2px; background: var(--paper); box-shadow: inset 0 0 0 3px var(--ink); }
.relay[data-mode="first"] .rp-history { display: none; }
.rp-field { padding: 11px 0 10px; border-bottom: 1px solid var(--rule); }
.rp-field p { margin: 0; line-height: 1.4; min-height: 2.8em; }
.rp-staff { display: flex; gap: 6px; min-height: 30px; }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--ind-bg); color: var(--indigo); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.rp-save { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.rp-save b { font-weight: 650; color: var(--ink); }
.rp-save .btn-mini { background: var(--night); color: #fff; border-radius: 5px; padding: 5px 12px; font-weight: 650; font-size: 12.5px; }

/* The console's exhibitor list, in the console's face. */
.rc { font-size: 13px; padding: 11px 14px 4px; }
.rc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 46px auto 82px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid #EEF0F5; }
.rc-row .logo-tile { width: 30px; height: 30px; border-radius: 5px; font-size: 12.5px; }
.rc-row .nm { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row .bt { font-size: 12.5px; color: var(--ink-2); }
/* The list follows its own width rather than the screen's: narrow, the booth number goes, since the card and the website show it. */
.rc { container-type: inline-size; }
@container (max-width: 540px) {
  .rc-row { grid-template-columns: 30px minmax(0, 1fr) auto 82px; }
  .rc-row .bt { display: none; }
}
.chips { display: flex; gap: 4px; }
.chip { font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--grey-bg); color: #9AA0B8; }
.chip.on { background: var(--ok-bg); color: var(--ok-fg); }
.rc-row .pill { justify-self: end; }

/* The organizer's own website, which reads the same record, in its own face. */
.rw { background: #FBF8F2; color: #22242E; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #E6DECF, 0 22px 44px -30px rgba(0, 0, 0, .45); }
.rw-bar { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: #EFE9DE; font-size: 12px; color: #6C6456; }
.rw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D6CDBE; }
.rw-body { padding: 10px 14px 14px; }
.rw-body h5 { margin: 0 0 8px; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 18px; letter-spacing: -.01em; }
/* The new listing takes the wide column; the two already listed stand beside it. */
.rw-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
.rw-card:first-child { grid-row: span 2; }
/* The logo beside the name, as listings set it, so a card is no taller than its text. */
.rw-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; align-content: start; background: #fff; border-radius: 6px; padding: 10px 11px; box-shadow: inset 0 0 0 1px #ECE5D8; font-size: 12.5px; line-height: 1.4; }
.rw-card .logo-tile { grid-row: span 2; width: 30px; height: 30px; border-radius: 5px; font-size: 12px; }
.rw-card b { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 15px; line-height: 1.15; }
.rw-card small { color: #8A8272; font-size: 11.5px; }
.rw-card p, .rw-card .demo, .rw-card .staff { grid-column: 1 / -1; }
.rw-card p { margin: 6px 0 0; }
.rw-card .demo { margin-top: 8px; padding-top: 7px; border-top: 1px dashed #E2D9C8; }
.rw-card .demo em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 12.5px; color: #7A3E12; display: block; }
.rw-card .staff { display: flex; gap: 4px; margin-top: 8px; }
.rw-card .staff .av { width: 22px; height: 22px; font-size: 9px; }
.rw-card.dim { opacity: .55; }

/* What the animation moves. Without script, or with reduced motion, everything shows. */
.relay [data-f] { transition: opacity .35s, background-color .6s; }
.relay.live [data-f]:not(.on) { opacity: 0; }
.relay.live .rp-field:not(.on) p, .relay.live .rp-field:not(.on) .rp-staff { opacity: 0; }
.relay.live .rp-field:not(.on) { opacity: 1; }
.relay.live .rp-field:not(.on) > span::after { content: "Not added yet"; margin-left: 10px; color: var(--ink-3); font-weight: 500; }
.relay .rp-field.on.fresh, .relay .rc-row.fresh, .relay .rw-card.fresh { background-color: #EEF0FD; }
.relay .rp-field p, .relay .rp-staff { transition: opacity .35s; }
.relay .rc-row[data-f] { transition: opacity .35s, background-color .8s; }
.relay .av { transition: transform .25s, opacity .25s; }
.relay.live .av:not(.on) { transform: scale(.4); opacity: 0; }
.relay .hit { animation: relay-hit .9s ease-out; }
@keyframes relay-hit { from { box-shadow: 0 0 0 4px var(--indigo), 0 18px 36px -24px rgba(15, 17, 51, .35); } to { box-shadow: 0 0 0 0 rgba(27, 31, 158, 0), 0 18px 36px -24px rgba(15, 17, 51, .35); } }
/* Narrower, the note on how it went before moves above the stage; narrower still, the stage stacks. */
@media (max-width: 1240px) {
  .relay { grid-template-columns: minmax(0, 1fr); }
  .relay-before { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; padding-top: 28px; }
  .relay-before ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); column-gap: 28px; }
  .retired { margin: 0 0 6px; }
}
@media (max-width: 1000px) {
  .relay-stage { grid-template-columns: minmax(0, 600px); row-gap: 22px; padding-bottom: 52px; }
  .relay-lines { display: none; }
  .relay-replay { top: auto; bottom: 10px; }
}
@media (max-width: 760px) {
  .relay-before { grid-template-columns: minmax(0, 1fr); }
  .retired { margin: 18px 0 0 20px; }
}

/* ---------- Product fragments: each keeps the face of the product it shows ---------- */
.frag { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 16px 18px; font-size: 13.5px; box-shadow: 0 0 0 1px var(--rule), 0 18px 36px -24px rgba(15, 17, 51, .35); position: relative; }
.frag.flat { box-shadow: 0 0 0 1px var(--rule); }
.frag h4 { margin: 0 0 8px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; font-weight: 650; }
.frag h4 small { color: var(--ink-2); font-weight: 500; }
.rows > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); align-items: center; }
.pill { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.ind { background: var(--ind-bg); color: var(--indigo); }
.pill.grey { background: var(--grey-bg); color: var(--grey-fg); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.kpis > div { background: #F4F6FA; border-radius: 8px; padding: 10px 12px; }
.kpis b { display: block; font-size: 22px; letter-spacing: -.02em; }
.kpis span { color: var(--ink-2); font-size: 11.5px; }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.bar-row .v { color: var(--ink-2); }
.meter { grid-column: 1 / -1; height: 6px; background: #EEF0F5; border-radius: 3px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--indigo); border-radius: 3px; }
.qr { width: 72px; height: 72px; display: block; color: var(--ink); }
/* The confirmation a returning exhibitor sees, closing its card. */
.confirm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1.5px solid var(--rule-strong); }
.confirm .state { font-size: 14px; }
.confirm span:last-child { color: var(--ink-2); font-size: 12.5px; }

/* ---------- Records ---------- */
.record { background: var(--paper); color: var(--ink); border-radius: 8px; padding: 18px 20px 20px; box-shadow: 0 0 0 1px var(--rule), 0 26px 50px -34px rgba(15, 17, 51, .45); }
.rec-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.rec-holder { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: center; }
.rec-photo { width: 58px; height: 70px; border-radius: 3px; background: #DADDEE; display: grid; place-items: end center; overflow: hidden; }
.rec-photo svg { width: 52px; height: 58px; }
.rec-logo { width: 58px; height: 58px; border-radius: 8px; background: var(--night); color: #fff; display: grid; place-items: center; font-weight: 750; font-size: 24px; }
.rec-fields span { display: block; font-size: 12.5px; color: var(--ink-2); }
.rec-fields .name { font-size: 22px; font-weight: 650; letter-spacing: -.015em; line-height: 1.1; margin-bottom: 6px; }
.rec-fields .pair { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 26px; }
.rec-fields .pair b { font-weight: 650; font-size: 14.5px; }

/* A carnet of passes, one per edition: printed once issued, punched at the door. */
.carnet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 18px 0 0; padding: 0; }
.pass { position: relative; min-height: 208px; padding: 52px 12px 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--rule); display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.pass:first-child { border-radius: 6px 0 0 6px; }
.pass:last-child { border-radius: 0 6px 6px 0; }
.pass + .pass { border-left: 1.5px dashed var(--perf); }
.pass:not(:last-child)::before, .pass:not(:last-child)::after { content: ""; position: absolute; right: -7px; z-index: 2; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.pass:not(:last-child)::before { top: -7px; }
.pass:not(:last-child)::after { bottom: -7px; }
/* Print: engraved stock, on something issued. */
.print { position: absolute; left: 0; right: 0; top: 0; height: 40px; overflow: hidden; color: var(--print); border-bottom: 1px solid rgba(27, 31, 158, .35); }
.print svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.frag.ticket { padding-top: 56px; overflow: hidden; }
.pass:first-child .print { border-top-left-radius: 6px; }
.pass:last-child .print { border-top-right-radius: 6px; }
.pass b { font-size: 16.5px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.pass .punch { position: absolute; right: 12px; top: 13px; width: 15px; height: 15px; border-radius: 50%; background: var(--canvas); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4), 0 0 0 2.5px var(--paper); z-index: 1; }
.pass .qr { width: 58px; height: 58px; margin-top: auto; }

/* An exhibitor's editions as a line: reached stations filled, a ring where it stands. */
.record p.editions-name { margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.editions { list-style: none; margin: 0; padding: 0; }
.editions li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 7px 0; font-size: 13px; color: var(--ink-2); }
.editions li b { grid-column: 2; font-size: 15.5px; font-weight: 650; color: var(--ink); line-height: 1.25; }
.editions li span { grid-column: 2; }
/* The line into each station and out of it: solid where travelled, dotted ahead. */
.editions li::before, .editions li::after { content: ""; position: absolute; left: 11px; width: 5px; background: var(--ink); }
.editions li::before { top: 0; height: 17px; }
.editions li::after { top: 17px; bottom: 0; }
.editions li:first-child::before, .editions li:last-child::after { display: none; }
.editions li.now::after, .editions li.ahead::before, .editions li.ahead::after { left: 12.5px; width: 0; border-left: 2px dotted var(--ink-3); background: none; }
.editions li i { position: absolute; z-index: 1; left: 7px; top: 10.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.editions li.now i { left: 3px; top: 6.5px; width: 21px; height: 21px; background: var(--paper); box-shadow: inset 0 0 0 5px var(--ink); }
.editions li.ahead i { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-3); }

/* ---------- The departures board: a screen in the hall ---------- */
.board { background: var(--night); color: #fff; border-radius: 6px; overflow: hidden; }
.board-title { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--sign-rule); font-size: 15.5px; color: var(--sign-text); }
.board-title b { color: #fff; font-weight: 640; }
.board-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 230px 140px; gap: 20px; align-items: center; padding: 15px 24px; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.board-row:last-child { border-bottom: 0; }
.board-row.head { font-size: 14px; color: var(--sign-muted); padding-top: 14px; padding-bottom: 10px; }
.board-row .t { font-weight: 620; font-size: 21px; color: #fff; letter-spacing: -.005em; }
.board-row .d { font-weight: 620; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.board-row .g { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; color: var(--sign-text); }
.board-row .g b { font-size: 21px; font-weight: 650; color: #fff; min-width: 16px; }
.board .state { font-size: 15px; font-weight: 600; color: #fff; }
.board .state::before { width: 11px; height: 11px; }
.board .state.ahead { color: var(--sign-text); }
/* Half-width boards: four columns in about six hundred pixels. */
.board.compact .board-row { grid-template-columns: 58px minmax(0, 1fr) 150px 112px; gap: 14px; padding: 13px 18px; }
.board.compact .board-title { padding: 12px 18px; }
.board.compact .board-row .t { font-size: 17px; }
.board.compact .board-row .d { font-size: 19px; }
.board.compact .board-row .g { font-size: 14px; }

/* A board printed on the page: a heavy rule over it, ruled rows, no card. */
.ledger { border-top: 2px solid var(--rule-strong); }
.ledger > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.ledger .t { font-size: 15px; color: var(--ink-2); }
.ledger .d { font-size: 19px; font-weight: 620; }
.ledger .d a { color: var(--indigo); text-decoration-thickness: 1.5px; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* ---------- Two-column feature with a visual ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split h2 { margin-bottom: 20px; }
.split p { font-size: 19px; margin: 0 0 16px; max-width: 32em; }
.split p.muted { color: var(--ink-2); }

/* ---------- The money line: a line diagram with two services ---------- */
.lines { padding: 6px 0 0; }
.route { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 8px; }
.route::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 17px; height: 8px; border-radius: 4px; background: var(--indigo); }
.route.paper::before { height: 0; top: 19px; background: none; border-top: 3px dashed var(--indigo); border-radius: 0; }
.stop { position: relative; text-align: center; padding: 0 8px; }
.stop i { display: block; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; background: var(--paper); border: 7px solid var(--indigo); }
.route.paper .stop i { border-width: 4px; width: 34px; height: 34px; margin-top: 4px; }
.stop b { display: block; font-weight: 640; font-size: 19px; line-height: 1.2; }
.stop span { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.route-name { font-size: 16px; font-weight: 620; margin: 0 0 18px; display: flex; align-items: center; gap: 12px; }
.route-name::before { content: ""; width: 30px; height: 8px; border-radius: 4px; background: var(--indigo); }
.route-name.paper::before { height: 0; border-radius: 0; border-top: 3px dashed var(--indigo); background: none; }
.lines hr { border: 0; border-top: 1px solid var(--rule); margin: 26px 0; }

/* ---------- Page titles: where you are, the title, a heavy rule ---------- */
.hero { padding: 0; }
.title { padding: 56px 0 44px; border-bottom: 2px solid var(--rule-strong); }
.where { margin: 0 0 14px; font-size: 17px; color: var(--ink-2); }
.title h1 { margin: 0; font-size: clamp(44px, 5.8vw, 88px); line-height: .98; font-weight: 640; font-stretch: 104%; letter-spacing: -.03em; max-width: 12em; }
.title .ctas { margin-top: 30px; }

/* The page's sections as stations on a line, a ring for where you are. */
.line { position: sticky; top: 68px; z-index: 10; background: var(--canvas); border-bottom: 1px solid var(--rule); }
.stations { position: relative; display: flex; list-style: none; margin: 0; padding: 28px 0 0; overflow-x: auto; scrollbar-width: none; }
.stations::-webkit-scrollbar { display: none; }
.stations li { position: relative; flex: 1 0 auto; }
.stations a { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px 14px; color: var(--ink-2); font-size: 15px; white-space: nowrap; text-decoration: none; }
.stations a:hover { color: var(--ink); }
.stations a::before, .stations a::after { content: ""; position: absolute; top: 9px; height: 5px; background: var(--indigo); }
.stations a::before { left: 0; right: 50%; }
.stations a::after { left: 50%; right: 0; }
.stations li:first-child a::before, .stations li:last-child a::after { display: none; }
.stations .tick { position: relative; z-index: 1; width: 5px; height: 11px; margin: 14px 0 9px; background: var(--indigo); }
.stations a[aria-current] { color: var(--ink); font-weight: 650; }
.stations a[aria-current] .tick { width: 23px; height: 23px; margin: 0 0 6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 5px var(--ink); }
.stations .you { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -3px); font-size: 12.5px; font-weight: 600; color: var(--indigo); white-space: nowrap; }

/* ---------- The feature sections ---------- */
.gate { display: grid; grid-template-columns: 190px minmax(0, 1fr) 440px; gap: 40px; padding: 56px 0; border-top: 1px solid var(--rule); align-items: start; }
.gate.no-visual { grid-template-columns: 190px minmax(0, 1fr); }
.gate:first-of-type { border-top: 0; }
.gate .no { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 620; padding-top: 9px; }
.gate .no .tick { width: 5px; height: 15px; background: var(--indigo); flex: none; }
.gate h3 { margin: 0 0 14px; font-size: 36px; font-weight: 640; line-height: 1.06; letter-spacing: -.025em; }
.gate p { margin: 0 0 14px; font-size: 18.5px; max-width: 34em; }
.gate ul.detail { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; max-width: 42em; }
.gate ul.detail li { font-size: 15.5px; padding-left: 20px; position: relative; color: var(--ink-2); }
.gate ul.detail li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 3px; background: var(--indigo); }

/* ---------- Entrances on the home page: a sign over each door ---------- */
.entrance { margin-bottom: 64px; }
.entrance:last-child { margin-bottom: 0; }
.entrance-sign { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 24px; padding: 18px 28px; background: var(--night); color: #fff; border-radius: 6px; }
.entrance-sign .letter { font-size: 64px; font-weight: 650; line-height: .9; letter-spacing: -.03em; }
.entrance-sign .label { color: var(--sign-muted); margin: 0 0 2px; font-size: 16px; font-weight: 500; }
.entrance-sign h3 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 640; line-height: 1.04; letter-spacing: -.025em; }
.entrance-sign .way { width: 38px; height: 38px; color: #fff; }
.entrance-body { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 56px; padding-top: 30px; align-items: start; }
.entrance-body p { margin: 0; font-size: 19.5px; max-width: 30em; }
.go { display: inline-flex; align-items: center; gap: 8px; margin: 18px 26px 0 0; font-weight: 640; color: var(--indigo); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ---------- Pricing as a fare table ---------- */
.fares { border-top: 2px solid var(--rule-strong); }
.fare { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px 200px; gap: 24px; align-items: center; padding: 24px 4px; border-bottom: 1px solid var(--rule); }
.fare.head { font-size: 14.5px; color: var(--ink-2); padding: 14px 4px 12px; }
.fare .zone { display: flex; align-items: center; gap: 14px; font-weight: 640; font-size: 24px; letter-spacing: -.015em; }
.fare .zone svg { width: 44px; height: 44px; flex: none; }
.zone-map circle { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.zone-map .reach { fill: var(--indigo); stroke: none; }
.fare .size { font-weight: 620; font-size: 21px; }
.fare .size span { display: block; font-weight: 400; font-size: 15.5px; color: var(--ink-2); margin-top: 2px; }
.fare .price { font-size: 15px; color: var(--ink-2); }
.fare .price b { display: block; font-weight: 640; font-size: 20px; color: var(--ink); }
.fare .go { margin: 0; text-decoration: none; }
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--rule-strong); }
.included li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.included li::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; background: var(--indigo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zM6.4 12.4l2-2 2.6 2.6 4.8-4.8 2 2-6.8 6.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zM6.4 12.4l2-2 2.6 2.6 4.8-4.8 2 2-6.8 6.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
.included li b { display: block; font-weight: 640; }
.included li span { color: var(--ink-2); font-size: 15.5px; }

/* ---------- Questions ---------- */
.faq { border-top: 2px solid var(--rule-strong); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--rule); padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 640; font-size: 21px; letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font-size: 28px; font-weight: 400; color: var(--indigo); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 22px; font-size: 17.5px; max-width: 46em; color: var(--ink-2); }
.faq a { color: var(--indigo); }

/* ---------- The next step, on a yellow sign ---------- */
.nextstep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 30px; padding: 34px 36px; background: var(--signal); color: var(--signal-ink); border-radius: 8px; }
.nextstep .way { width: 64px; height: 64px; border-radius: 6px; background: var(--signal-ink); color: var(--signal); display: grid; place-items: center; align-self: start; }
.nextstep .way svg { width: 32px; height: 32px; }
.nextstep h2 { margin: 0 0 8px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 640; line-height: 1.02; letter-spacing: -.026em; color: var(--signal-ink); }
.nextstep p { margin: 0; font-size: 18.5px; max-width: 40em; }
.next-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.nextstep .btn.next { background: var(--signal-ink); color: #fff; }
.nextstep .btn.quiet { color: var(--signal-ink); box-shadow: inset 0 0 0 1.5px var(--signal-ink); }
.nextstep .btn.quiet:hover { background: rgba(15, 17, 51, .07); }

/* ---------- Forms ---------- */
.form { background: var(--paper); border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); padding: 34px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-weight: 640; font-size: 15.5px; margin-bottom: 6px; }
.field > span small { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16.5px; padding: 12px 14px; border-radius: 6px; border: 1.5px solid rgba(15, 17, 51, .3); background: #fff; color: var(--ink); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(27, 31, 158, .18); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .fine { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 20px; }
.form .fine a, .contact-aside a { color: var(--indigo); }
.form-status { margin-top: 18px; padding: 14px 16px; border-left: 3px solid; font-size: 16px; display: none; }
.form-status.ok { display: block; border-color: var(--arrived); background: var(--ok-bg); color: var(--ok-fg); }
.form-status.err { display: block; border-color: var(--fault); background: #FCE7E7; color: #9E2A2A; }

/* What happens after the request, as a route: the first station is next. */
.steps { list-style: none; margin: 0 0 30px; padding: 0; border-top: 2px solid var(--rule-strong); }
.steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0; font-size: 18.5px; font-weight: 600; line-height: 1.35; }
.steps li::before { content: ""; position: absolute; left: 13.5px; top: 0; bottom: 0; border-left: 2px dotted var(--ink-3); }
.steps li:first-child::before { top: 50%; }
.steps li:last-child::before { bottom: 50%; }
.steps li::after { content: ""; position: absolute; left: 7px; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--ink-3); }
.steps li:first-child::after { left: 3px; top: calc(50% - 12px); width: 24px; height: 24px; background: var(--paper); box-shadow: inset 0 0 0 5px var(--ink); }
.steps li span { grid-column: 2; }

/* ---------- Prose pages ---------- */
.prose { max-width: 820px; }
.prose h2 { font-weight: 640; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 48px 0 14px; }
.prose h3 { font-weight: 640; font-size: 22px; margin: 30px 0 8px; }
.prose p, .prose li { font-size: 17.5px; color: #2B2F4A; }
.prose a { color: var(--indigo); }
.prose ul { padding-left: 22px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 16px 0; border-top: 2px solid var(--rule-strong); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.prose .where { margin-bottom: 10px; }

/* ---------- Footer ---------- */
.foot { background: var(--night); color: var(--sign-text); }
.foot .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; padding: 56px 0 40px; }
.foot h4 { margin: 0 0 12px; font-weight: 620; font-size: 15px; color: var(--sign-muted); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0 0 8px; }
.foot a { text-decoration: none; font-size: 15.5px; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot .about p { font-size: 15.5px; margin: 14px 0 0; max-width: 24em; }
.foot .base { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: var(--sign-muted); flex-wrap: wrap; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .promises { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .promises li:nth-child(3) { border-left: 0; }
  .entrance-body { grid-template-columns: 1fr; gap: 32px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .gate, .gate.no-visual { grid-template-columns: 150px minmax(0, 1fr); }
  .gate > .frag, .gate > .record, .gate > .visual { grid-column: 2; }
  .board-row { grid-template-columns: 110px minmax(0, 1fr) 130px; }
  .board-row .g { display: none; }
  .board.compact .board-row { grid-template-columns: 58px minmax(0, 1fr) 112px; }
  .fare { grid-template-columns: 170px minmax(0, 1fr) 190px; }
  .fare .go { grid-column: 2 / -1; }
  .fare.head span:last-child { display: none; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .nextstep { grid-template-columns: auto minmax(0, 1fr); }
  .next-actions { grid-column: 2; justify-content: flex-start; }
}
/* The bar's links and buttons need about 830 pixels; below 860 the menu button holds them. */
@media (max-width: 860px) {
  .bar nav, .bar .signin-gate, .bar .btn { display: none; }
  .menu-btn { display: block; }
  .bar.open nav { display: flex; flex-direction: column; gap: 0; position: absolute; top: 68px; left: 0; right: 0; background: var(--night); padding: 8px 16px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
  .bar.open nav a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .bar.open nav .m-only { display: block; }
  .bar.open nav a[aria-current="page"] { box-shadow: inset 3px 0 0 #fff; padding-left: 12px; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  html:has(.line) { scroll-padding-top: 88px; }
  .wrap { padding: 0 16px; }
  .sign .wrap { grid-template-columns: 1fr; padding: 0; }
  .sign a { min-height: 64px; padding: 0 16px; border-left: 0; border-right: 0 !important; border-bottom: 1px solid var(--sign-rule); }
  .sign a:last-child { border-bottom: 0; }
  .sign .letter { font-size: 36px; }
  .sign .dest { font-size: 22px; }
  .sign .way { width: 24px; height: 24px; }
  .lede { font-size: 19px; }
  .ctas .btn { flex: 1 1 100%; justify-content: center; }
  .promises { grid-template-columns: 1fr; padding: 4px 0; row-gap: 0; border-radius: 0; margin: 0 -16px; }
  .promises li, .promises li + li { padding: 16px; border-left: 0; }
  .promises li + li { border-top: 1px solid var(--sign-rule); }
  .sec { padding: 64px 0; }
  .sec h2, .h2 { font-size: 36px; }
  .title { padding: 32px 0 30px; }
  .title h1 { font-size: 40px; }
  .line { position: static; }
  .line .wrap { padding: 0 4px; }
  .stations { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .stations li { flex: none; }
  .stations a { padding: 0 13px 12px; font-size: 14.5px; }
  /* .no-visual named too: its own two columns would otherwise win here and squeeze the text to 154px. */
  .gate, .gate.no-visual { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 40px 0; }
  .gate > .frag, .gate > .record, .gate > .visual { grid-column: 1; }
  .gate h3 { font-size: 29px; }
  .gate ul.detail { grid-template-columns: 1fr; }
  .entrance { margin-bottom: 48px; }
  .entrance-sign { padding: 14px 16px; gap: 0 14px; }
  .entrance-sign .letter { font-size: 46px; }
  .entrance-sign .label { font-size: 14.5px; }
  .entrance-sign h3 { font-size: 26px; }
  .entrance-sign .way { width: 26px; height: 26px; }
  .entrance-body { padding-top: 22px; }
  .entrance-body p { font-size: 18px; }
  .board-title { padding: 12px 16px; font-size: 14.5px; }
  .board-row { grid-template-columns: 74px minmax(0, 1fr); gap: 4px 12px; padding: 13px 16px; }
  .board-row .state { grid-column: 2; }
  .board-row.head span:nth-child(n+3) { display: none; }
  .board-row .t { font-size: 17px; }
  .board-row .d { font-size: 18.5px; }
  .board.compact .board-row { grid-template-columns: 52px minmax(0, 1fr); padding: 13px 16px; }
  .route::before { left: 18%; right: 18%; }
  .stop b { font-size: 16px; }
  .stop span { font-size: 13px; }
  .fare { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .fare.head { display: none; }
  .fare .go { grid-column: 1; }
  .included { grid-template-columns: 1fr; }
  .nextstep { grid-template-columns: 1fr; padding: 26px 20px; }
  .nextstep .way { width: 52px; height: 52px; }
  .next-actions { grid-column: 1; }
  .next-actions .btn { flex: 1 1 100%; justify-content: center; }
  .form { padding: 22px 18px; }
  .form .row2 { grid-template-columns: 1fr; gap: 0; }
  .foot .cols { grid-template-columns: 1fr; gap: 28px; }
  .prose table { display: block; overflow-x: auto; }
  .relay-modes { padding: 6px 6px 0; }
  .relay-modes button { flex: 1 1 0; justify-content: center; padding: 0 10px; font-size: 15px; height: 46px; }
  .relay-modes-note { display: none; }
  .relay-before ol { grid-template-columns: 1fr; }
  .relay-stage { padding: 24px 0 52px; }
  .rc-row { grid-template-columns: 30px minmax(0, 1fr) 76px; }
  .rc-row .bt, .rc-row .chips { display: none; }
  .rw-grid { grid-template-columns: 1fr; }
  .rw-card.dim { display: none; }
  .relay-replay { bottom: 10px; }
  .carnet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pass { min-height: 196px; padding: 46px 8px 10px; font-size: 11.5px; }
  .pass b { font-size: 14px; }
  .pass .print { height: 34px; }
  .pass .punch { right: 8px; top: 10px; width: 13px; height: 13px; }
  .pass .qr { width: 46px; height: 46px; }
}