Simplify hero header and strip extra copy

Replace dark cover with a light header (Q mark + title + OSU NLP byline
link), drop subtitle/release tagline, and remove "Section 02/03 ·" prefixes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -267,105 +267,55 @@ gradio-app > div {
   white-space: pre-wrap !important;
 }
 
-/* === Quest-style hero cover ============================================== */
-.quest-cover {
-  position: relative;
-  border: 1px solid var(--q-line);
-  border-radius: var(--q-radius-xl);
-  background: var(--q-cover-bg);
-  box-shadow: var(--q-shadow);
-  padding: 14px;
+/* === Quest-style header ================================================= */
+.quest-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 18px 22px;
   margin: 8px 0 24px;
-  color: #F1F5F9;
-  overflow: hidden;
+  border: 1px solid var(--q-line);
+  border-radius: var(--q-radius-lg);
+  background: var(--q-paper);
+  box-shadow: var(--q-shadow-card);
 }
-.quest-cover-inner {
+.quest-header-mark {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-}
-.quest-cover-panel {
-  padding: 18px 20px;
-  border: 1px solid rgba(255, 255, 255, 0.07);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.04);
-  min-height: 110px;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: var(--q-text);
+  color: #FFFFFF;
+  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
+  font-weight: 700;
+  font-size: 1.55rem;
 }
-.quest-cover-panel.wide {
-  grid-column: span 3;
-  min-height: 220px;
+.quest-header-text {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  background:
-    radial-gradient(ellipse at top right, rgba(190, 91, 43, 0.22), transparent 48%),
-    radial-gradient(ellipse at bottom left, rgba(11, 158, 138, 0.18), transparent 48%),
-    rgba(255, 255, 255, 0.04);
-}
-.quest-cover-kicker {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: rgba(255, 255, 255, 0.55);
-  font-size: 0.68rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  gap: 4px;
+  min-width: 0;
 }
-.quest-cover-kicker .dot {
-  width: 8px; height: 8px; border-radius: 999px;
-  background: var(--q-accent);
-  box-shadow: 0 0 0 3px rgba(190, 91, 43, 0.22);
-}
-.quest-cover-title {
+.quest-header-title {
+  margin: 0;
   font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
   font-weight: 600;
-  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
-  line-height: 1.05;
-  letter-spacing: -0.02em;
-  color: #FFFFFF;
-  margin: 14px 0 8px;
-  max-width: 26ch;
-}
-.quest-cover-subtitle {
-  color: rgba(255, 255, 255, 0.72);
-  font-size: 1rem;
-  line-height: 1.6;
-  max-width: 48ch;
-}
-.quest-cover-panel span.label {
-  display: block;
-  margin-bottom: 8px;
-  color: rgba(255, 255, 255, 0.45);
-  font-size: 0.66rem;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-.quest-cover-panel strong.headline {
-  display: block;
-  font-family: "Source Serif 4", "Source Serif Pro", ui-serif, Georgia, serif;
-  font-weight: 600;
-  font-size: 1.15rem;
-  line-height: 1.15;
-  color: #FFFFFF;
-  max-width: 20ch;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--q-text);
 }
-.quest-cover-byline {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 6px 14px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 999px;
-  color: rgba(255, 255, 255, 0.82);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.04em;
+.quest-header-byline {
+  color: var(--q-muted);
+  font-size: 0.9rem;
+  font-weight: 500;
   text-decoration: none;
   width: fit-content;
+  transition: color 140ms ease;
 }
-.quest-cover-byline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
+.quest-header-byline:hover { color: var(--q-accent); }
 
 /* === Cards (section-card) =============================================== */
 .section-card {
@@ -1608,43 +1558,16 @@ with gr.Blocks(
     css=CUSTOM_CSS,
     fill_width=True,
 ) as demo:
-    # --- Quest-style hero cover (mirrors the Quest paper microsite cover) ---
+    # --- Quest-style header (Q mark + title + byline) ---
     gr.HTML(
         """
-<section class="quest-cover" aria-label="Quest hero">
-  <div class="quest-cover-inner">
-    <div class="quest-cover-panel wide">
-      <div class="quest-cover-kicker">
-        <span class="dot" aria-hidden="true"></span>
-        <span>Quest &nbsp;·&nbsp; OSU NLP Group</span>
-      </div>
-      <div>
-        <h1 class="quest-cover-title">Deep Research Agent, live in your browser.</h1>
-        <p class="quest-cover-subtitle">
-          A fully open recipe for training deep research agents &mdash; now
-          hosted as an interactive Space. Ask a question, watch the agent
-          search, read, and reason across sources, then return a grounded
-          answer.
-        </p>
-      </div>
-      <a class="quest-cover-byline" href="https://nlp.osu.edu/" target="_blank" rel="noopener noreferrer">
-        <span>Built by OSU NLP &rarr;</span>
-      </a>
-    </div>
-    <div class="quest-cover-panel">
-      <span class="label">Data synthesis</span>
-      <strong class="headline">Objective and open-ended tasks</strong>
-    </div>
-    <div class="quest-cover-panel">
-      <span class="label">Memory management</span>
-      <strong class="headline">Structured long-horizon reasoning</strong>
-    </div>
-    <div class="quest-cover-panel">
-      <span class="label">Training recipe</span>
-      <strong class="headline">Mid-training, SFT, and RL</strong>
-    </div>
+<header class="quest-header">
+  <span class="quest-header-mark" aria-hidden="true">Q</span>
+  <div class="quest-header-text">
+    <h1 class="quest-header-title">Quest: A Fully Open Recipe for Training Search Agents</h1>
+    <a class="quest-header-byline" href="https://x.com/osunlp" target="_blank" rel="noopener noreferrer">built by OSU NLP Group</a>
   </div>
-</section>
+</header>
 """
     )
 
@@ -1655,7 +1578,6 @@ with gr.Blocks(
                 gr.HTML(
                     '<div class="section-heading">Ask the agent</div>'
                     '<div class="hero-heading">What can I research for you?</div>'
-                    '<p class="hero-subtitle">Describe a question, claim, or open-ended prompt. The agent will search the web, visit sources, and synthesize a grounded answer.</p>'
                 )
                 question = gr.Textbox(
                     show_label=False,
@@ -1669,7 +1591,7 @@ with gr.Blocks(
 
             with gr.Group(elem_classes="section-card"):
                 gr.HTML(
-                    '<div class="section-heading">Section 02 · Try examples</div>'
+                    '<div class="section-heading">Try examples</div>'
                     '<div class="example-note">Each prompt shows the kind of query it represents. Click one to auto-fill.</div>'
                 )
                 with gr.Column(elem_classes="example-buttons"):
@@ -1679,7 +1601,7 @@ with gr.Blocks(
                     ]
 
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-heading">Section 03 · Output</div>')
+                gr.HTML('<div class="section-heading">Output</div>')
                 with gr.Tabs():
                     with gr.TabItem("Result"):
                         answer = gr.Markdown(label="Final Answer")
@@ -1691,7 +1613,6 @@ with gr.Blocks(
                 gr.HTML(
                     f"""
 <div class="section-heading">Open release</div>
-<div class="hero-heading" style="font-size:1.2rem;margin-bottom:12px;">Data, code, and weights &mdash; all public.</div>
 <div class="icon-grid">
   <a class="icon-link" href="{PAPER_URL}" target="_blank" rel="noopener noreferrer">Paper</a>
   <a class="icon-link" href="{CODE_URL}" target="_blank" rel="noopener noreferrer">Code</a>