💄 Polish program cards and navigation

2026/index.html

@@ -18,7 +18,7 @@
       <div class="brand-panel">
         <img class="event-logo" src="assets/event/logo-MQSF-date_2026-1.png" alt="Munich Quantum Software Forum, 14–15 October 2026">
         <nav aria-label="Event navigation">
-          <a href="#program">Program</a>
+          <a href="program/">Program</a>
           <a href="#registration">Registration</a>
           <a href="#events">Previous Events</a>
           <a href="#sponsors">Organization &amp; Sponsors</a>

2026/program/index.html

@@ -9,7 +9,7 @@
     <link rel="apple-touch-icon" href="../../assets/images/brand/logo-q-light.png">
     <link rel="stylesheet" href="../../assets/brand.css?v=1">
     <link rel="stylesheet" href="../../assets/waves.css?v=3">
-    <link rel="stylesheet" href="./styles.css?v=16">
+    <link rel="stylesheet" href="./styles.css?v=21">
     <link rel="stylesheet" href="../meetups/styles.css?v=15">
     <script src="../meetups/config.js" defer></script>
     <script type="module" src="../meetups/app.mjs?v=13"></script>
@@ -55,7 +55,7 @@ <h1 id="agenda-heading">Program</h1>
             <article class="talk-card schedule-row pitch-card is-expanded" role="button" tabindex="0" aria-expanded="true" aria-controls="pitch-list-1" data-pitch-session="0"><div class="talk-time">10:25–11:10</div><div class="speaker-portrait portrait-violet" role="img" aria-label="Software pitches"><img class="speaker-image" src="../../assets/images/brand/logo-q-light.png" alt=""></div><div class="talk-details"><h3>Software Pitches</h3><p class="pitch-toggle">Hide presentations</p></div><small class="talk-duration">45 min</small><ol class="pitch-list" id="pitch-list-1"></ol></article>
             <div class="break-row"><span>11:10–11:40</span><span>Coffee Break</span><small>30 min</small></div>
             <article class="talk-card schedule-row"><div class="talk-time">11:40–12:15</div><div class="speaker-portrait portrait-blue" role="img" aria-label="Yehuda Naveh"><img class="speaker-image" src="../assets/speakers/yehuda.png" alt=""></div><div class="talk-details"><h3>Yehuda Naveh <span class="affiliation">(Classiq)</span></h3><p class="talk-title">AI-First Approach to Quantum Software</p></div><small class="talk-duration">35 min</small></article>
-            <article class="talk-card schedule-row"><div class="talk-time">12:15–12:50</div><div class="speaker-portrait portrait-pink" role="img" aria-label="Elie Gouzien"><img class="speaker-image" src="../assets/speakers/elie.jpg" alt=""></div><div class="talk-details"><h3>Elie Gouzien</h3><p class="speaker">Alice &amp; Bob</p></div><small class="talk-duration">35 min</small></article>
+            <article class="talk-card schedule-row"><div class="talk-time">12:15–12:50</div><div class="speaker-portrait portrait-pink" role="img" aria-label="Elie Gouzien"><img class="speaker-image" src="../assets/speakers/elie.jpg" alt=""></div><div class="talk-details"><h3>Elie Gouzien <span class="affiliation">(Alice &amp; Bob)</span></h3></div><small class="talk-duration">35 min</small></article>
             <article class="talk-card schedule-row pitch-card is-expanded" role="button" tabindex="0" aria-expanded="true" aria-controls="pitch-list-2" data-pitch-session="1"><div class="talk-time">12:50–13:35</div><div class="speaker-portrait portrait-violet" role="img" aria-label="Software pitches"><img class="speaker-image" src="../../assets/images/brand/logo-q-light.png" alt=""></div><div class="talk-details"><h3>Software Pitches</h3><p class="pitch-toggle">Hide presentations</p></div><small class="talk-duration">45 min</small><ol class="pitch-list" id="pitch-list-2"></ol></article>
             <div class="break-row"><span>13:35–15:05</span><span>Lunch Break</span><small>90 min</small></div>
             <article class="talk-card schedule-row speaker-card" role="button" tabindex="0" aria-expanded="false" aria-controls="martin-details"><div class="talk-time">15:05–15:40</div><div class="speaker-portrait portrait-violet" role="img" aria-label="Martin Kiffner"><img class="speaker-image" src="../assets/speakers/martin.png" alt=""></div><div class="talk-details"><h3>Martin Kiffner <span class="affiliation">(planqc)</span></h3><p class="talk-title">Everything Works at Eight Qubits: Building Quantum Algorithms That Scale</p></div><small class="talk-duration">35 min</small><div class="speaker-details" id="martin-details" hidden><h4>Abstract</h4><p>Quantum algorithms that work convincingly at small scale routinely fail at the scale where the underlying problems become interesting — often because the bottleneck limiting an algorithm at small sizes is not the one that limits it at relevant sizes.</p><p>This raises the central question the talk addresses: how to build algorithms that scale for a machine that does not yet exist and cannot be benchmarked against. planqc’s approach uses tensor networks to study problems at realistic sizes and with realistic structure entirely on classical computers, revealing where a method breaks down before we commit to it — I will show results from industrial optimisation problems. The second half of the problem is the algorithms themselves: I will present our work on making variational methods trainable at scale, which is what turns a classical insight into something a quantum computer can execute.</p><h4>Biography</h4><p>Martin Kiffner is Head of Quantum Solutions and Hardware Modelling at planqc, where he leads around 30 researchers working out where neutral-atom quantum computers will be genuinely useful. A theoretical physicist by training, he spent over a decade in research at Oxford and at the Centre for Quantum Technologies in Singapore and was among the first to apply tensor networks to fluid dynamics. His main interest lies at the boundary between classical and quantum methods.</p></div></article>

2026/program/styles.css

@@ -48,13 +48,12 @@ h1, h2 { margin-bottom: 0; }
 .day-heading { display: flex; align-items: baseline; gap: var(--space-16); margin: var(--space-32) 0 var(--space-8); padding-left: var(--space-24); color: var(--muted); }
 .day-heading time { color: var(--ink); font-size: var(--font-heading); font-weight: var(--weight-heading); }
 .day-heading:first-child { margin-top: 0; }
-.talk-card { display: grid; grid-template-columns: 100px 62px minmax(0, 1fr) auto; gap: var(--space-16); align-items: center; min-height: 128px; padding: var(--space-16) var(--space-24); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(8px); transition: background .25s ease, border-color .25s ease; }
+.talk-card { display: grid; grid-template-columns: 100px 62px minmax(0, 1fr) auto; gap: var(--space-16); align-items: center; align-content: start; padding: var(--space-16) var(--space-24); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(8px); transition: background .25s ease, border-color .25s ease; }
 .talk-card:hover { background: var(--brand-navy); border-color: var(--accent); }
 :root[data-theme="light"] .talk-card:hover { background: var(--surface-alt); }
 :root[data-theme="light"] .side-events-ui .intro { --accent: var(--brand-blue); color: var(--brand-charcoal); }
 .pitch-card, .speaker-card { cursor: pointer; }
 .pitch-card:focus-visible, .speaker-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
-.pitch-card.is-expanded, .speaker-card.is-expanded { align-items: start; }
 .pitch-toggle { display: inline-flex; align-items: center; gap: .45rem; margin: .45rem 0 0; color: var(--cyan); font-size: var(--font-small); letter-spacing: .1em; text-transform: uppercase; }
 .pitch-toggle::after { width: .45rem; height: .45rem; content: ""; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.15rem); transition: transform .2s ease; }
 .pitch-card.is-expanded .pitch-toggle::after { transform: rotate(225deg) translate(-.12rem, -.12rem); }
@@ -64,17 +63,17 @@ h1, h2 { margin-bottom: 0; }
 .pitch-list strong { color: var(--ink); font-weight: var(--weight-body); }
 .talk-time { color: var(--cyan); font-size: var(--font-body); }
 .talk-duration { align-self: center; justify-self: end; color: var(--muted); font-size: var(--font-small); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
-.pitch-card.is-expanded .talk-duration, .speaker-card.is-expanded .talk-duration { align-self: start; }
 .speaker-portrait { position: relative; display: grid; width: 62px; height: 62px; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; color: rgba(255,255,255,.9); font-size: var(--font-body); letter-spacing: -.04em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
 .speaker-image { position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: cover; object-position: center; }
 .portrait-blue, .portrait-pink, .portrait-violet, .portrait-cyan { background: linear-gradient(145deg, var(--cyan), #14709e 75%); }
 .talk-details h3 { margin-bottom: var(--space-8); color: var(--ink); font-size: var(--font-heading); font-weight: var(--weight-body); line-height: var(--leading-heading); }
+.talk-details > :last-child { margin-bottom: 0; }
 .affiliation { color: var(--muted); }
 .speaker { margin: 0; color: var(--muted); font-size: var(--font-heading); }
 .talk-title { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; color: var(--muted); font-size: var(--font-body); line-height: var(--leading-body); }
-.talk-title::after { width: .45rem; height: .45rem; flex-shrink: 0; content: ""; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg) translateY(-.15rem); transition: transform .2s ease; }
-.speaker-card.is-expanded .talk-title::after { transform: rotate(225deg) translate(-.12rem, -.12rem); }
-.talk-card:not(.speaker-card) .talk-title::after { display: none; }
+.speaker-card .talk-duration { display: inline-flex; align-items: center; gap: var(--space-8); }
+.speaker-card .talk-duration::before { width: .45rem; height: .45rem; flex-shrink: 0; content: ""; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg) translateY(-.15rem); transition: transform .2s ease; }
+.speaker-card.is-expanded .talk-duration::before { transform: rotate(225deg) translate(-.12rem, -.12rem); }
 .speaker-details { grid-column: 3 / -1; color: var(--muted); font-size: var(--font-small); line-height: var(--leading-body); }
 .speaker-details h4 { margin: var(--space-8) 0; color: var(--ink); font-size: var(--font-small); font-weight: var(--weight-heading); letter-spacing: .08em; text-transform: uppercase; }
 .speaker-details p { margin-bottom: var(--space-16); }
@@ -93,16 +92,15 @@ h1, h2 { margin-bottom: 0; }
   .register-link { display: none; }
   .content { padding-top: calc(96px + var(--space-24)); }
   .day-switch { margin-top: var(--space-16); }
-  .talk-card { grid-template-columns: 64px 48px minmax(0, 1fr); gap: var(--space-8); min-height: 108px; padding: var(--space-16) var(--space-8); }
-  .break-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-8); padding: var(--space-16) var(--space-8); }
-  .agenda-list::before { left: 73px; }
+  .talk-card { grid-template-columns: 56px 48px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-16) var(--space-8); }
+  .break-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-8); padding: var(--space-16) var(--space-8); }
+  .agenda-list::before { left: 65px; }
   .talk-time { font-size: var(--font-small); }
-  .talk-duration { grid-column: 3; justify-self: start; margin-top: calc(-1 * var(--space-8)); font-size: var(--font-small); }
+  .talk-duration { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin: 0; font-size: var(--font-small); }
   .speaker-portrait { width: 48px; height: 48px; font-size: var(--font-small); }
   .talk-title { font-size: var(--font-small); }
-  .speaker-card .talk-title::after { position: absolute; right: var(--space-24); bottom: var(--space-24); transform: rotate(45deg); }
-  .speaker-card.is-expanded .talk-title::after { transform: rotate(225deg); }
-  .speaker-card.is-expanded .talk-duration { grid-row: 3; margin-top: 0; }
+  .talk-details { grid-column: 3; grid-row: 1; }
+  .talk-details h3 { padding-right: 5.5rem; overflow-wrap: anywhere; }
   .speaker-card.is-expanded .speaker-details { grid-row: 2; }
   .speaker-details { grid-column: 2 / -1; font-size: var(--font-small); }
   .pitch-list { grid-column: 2 / -1; padding-left: var(--space-16); font-size: var(--font-small); }

backend/check-calendar.mjs

@@ -27,10 +27,19 @@ for (const directory of ["2026/", "assets/", "background/", "logos/"]) checkLink
 const home = readFileSync(new URL("index.html", root), "utf8");
 assert.match(home, /http-equiv="refresh" content="0; url=2026\/"/);
 assert(existsSync(new URL("2026/index.html", root)));
+const event = readFileSync(new URL("2026/index.html", root), "utf8");
+assert.match(event, /<nav aria-label="Event navigation">\s*<a href="program\/">Program<\/a>/, "Event navigation opens the full program directly");
 
 const programStyles = readFileSync(new URL("2026/program/styles.css", root), "utf8");
-assert.match(programStyles.slice(programStyles.indexOf("@media (max-width: 680px)")), /\.agenda-list::before \{ left: 73px; \}/, "Mobile timeline stays between the 64px time column and break text");
-assert.match(programStyles.slice(programStyles.indexOf("@media (max-width: 680px)")), /\.speaker-card \.talk-title::after \{ position: absolute; right: var\(--space-24\); bottom: var\(--space-24\);/, "Mobile speaker arrows have equal right and bottom insets");
+assert.match(programStyles, /\.talk-card \{[^}]*align-items: center; align-content: start;/, "Card headers stay aligned when details expand");
+assert.doesNotMatch(programStyles, /\.is-expanded[^}]*align-items: start/);
+assert.doesNotMatch(programStyles, /\.talk-card \{[^}]*min-height:/, "Content-sized cards keep top and bottom padding balanced");
+assert.match(programStyles, /\.talk-details > :last-child \{ margin-bottom: 0; \}/, "Card text has no trailing margin");
+assert.match(programStyles.slice(programStyles.indexOf("@media (max-width: 680px)")), /\.talk-card \{ grid-template-columns: 56px 48px minmax\(0, 1fr\);/, "Mobile portraits use the narrower time column");
+assert.match(programStyles.slice(programStyles.indexOf("@media (max-width: 680px)")), /\.agenda-list::before \{ left: 65px; \}/, "Mobile timeline stays between the 56px time column and break text");
+assert.match(programStyles, /\.speaker-card \.talk-duration \{ display: inline-flex; align-items: center; gap: var\(--space-8\);/, "Speaker arrows and minutes stay together");
+assert.match(programStyles, /\.speaker-card \.talk-duration::before \{/, "The folding arrow appears before the minutes");
+assert.match(programStyles.slice(programStyles.indexOf("@media (max-width: 680px)")), /\.talk-duration \{ grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin: 0;/, "Every mobile card places its minutes on the heading row");
 const meetupStyles = readFileSync(new URL("2026/meetups/styles.css", root), "utf8");
 assert.match(meetupStyles, /\.side-events-ui \.intro-text \{[^}]*border: 1px solid var\(--line\);[^}]*background: var\(--surface\);/, "Meet-up introduction uses a bordered light panel");
 const brandStyles = readFileSync(new URL("assets/brand.css", root), "utf8");