Spaces:

evalstate
/

__test_space_1

Running

App Files Files Community

evalstate commited on 14 days ago

Commit

361428e

1 Parent(s): 4056e95

Update punny cat-diorama newspaper front page

Browse files

Files changed (4) hide show

assets/story1-rocket.webp +0 -0
assets/story2-mars-gps.webp +0 -0
assets/story3-dark-galaxy.webp +0 -0
news.html +472 -265

assets/story1-rocket.webp ADDED Viewed

assets/story2-mars-gps.webp ADDED Viewed

assets/story3-dark-galaxy.webp ADDED Viewed

news.html CHANGED Viewed

@@ -3,381 +3,588 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>The Daily Purr-ograph — Top Headlines</title>
   <style>
     :root{
-      --paper:#f6f0e4;
-      --ink:#111;
-      --muted:#3b3b3b;
-      --rule:#2a2a2a;
-      --soft-rule:rgba(0,0,0,.18);
-      --accent:#8b0000;
     }
-    *{box-sizing:border-box;}
     body{
       margin:0;
-      background:radial-gradient(1200px 700px at 30% 15%, #fff7e8 0%, var(--paper) 55%, #efe6d6 100%);
       color:var(--ink);
-      font-family: Georgia, "Times New Roman", Times, serif;
-      line-height:1.45;
-    }
-    a{color:inherit; text-decoration-thickness: .08em; text-underline-offset: .14em;}
-    a:hover{color:var(--accent)}
-    .page{
-      max-width:1120px;
-      margin:26px auto;
-      padding:22px 22px 34px;
-      border:1px solid var(--soft-rule);
       background:
-        linear-gradient(to bottom, rgba(0,0,0,.035), rgba(0,0,0,0) 110px),
-        var(--paper);
-      box-shadow:
-        0 20px 55px rgba(0,0,0,.18),
-        0 2px 0 rgba(255,255,255,.7) inset;
       position:relative;
-      overflow:hidden;
     }
-    /* subtle “print” speckle */
-    .page:before{
       content:"";
-      position:absolute;
-      inset:0;
-      background-image:
-        radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
-      background-size: 17px 17px;
-      opacity:.18;
       pointer-events:none;
       mix-blend-mode:multiply;
     }
-    header{
-      position:relative;
-      z-index:1;
-      border-bottom:4px double var(--rule);
-      padding-bottom:12px;
-      margin-bottom:12px;
     }
-    .topline{
       display:flex;
       align-items:flex-end;
       justify-content:space-between;
-      gap:16px;
-      padding-bottom:10px;
-      border-bottom:1px solid var(--soft-rule);
-      margin-bottom:10px;
-      font-size:12.5px;
-      letter-spacing:.02em;
-      color:var(--muted);
-      text-transform:uppercase;
     }
-    .mast{
-      display:grid;
-      grid-template-columns: 1fr auto 1fr;
-      gap:14px;
-      align-items:end;
     }
-    .mast .tag{
-      font-style:italic;
-      color:var(--muted);
-      font-size:13px;
-      text-align:left;
-      padding-bottom:6px;
-      border-bottom:1px solid var(--soft-rule);
     }
-    h1{
-      margin:0;
-      font-size:56px;
-      line-height:1;
-      letter-spacing:-.02em;
       text-align:center;
     }
-    .mast .price{
-      font-size:13px;
-      color:var(--muted);
-      text-align:right;
-      padding-bottom:6px;
-      border-bottom:1px solid var(--soft-rule);
     }
-    .breaking{
-      margin-top:12px;
       display:flex;
-      gap:10px;
       align-items:center;
-      border:1px solid var(--rule);
-      padding:8px 10px;
-      background:rgba(255,255,255,.35);
-    }
-    .breaking .label{
-      background:var(--accent);
-      color:white;
-      font-weight:700;
-      padding:4px 8px;
-      letter-spacing:.08em;
-      text-transform:uppercase;
-      font-size:12px;
     }
-    .breaking .text{
-      font-size:14px;
-      color:var(--muted);
     }
-    main{
-      position:relative;
-      z-index:1;
-    }
-    .grid{
       display:grid;
-      grid-template-columns: 1.2fr .8fr;
-      gap:18px;
-      margin-top:14px;
     }
-    .panel{
-      border:1px solid var(--soft-rule);
-      background:rgba(255,255,255,.22);
-      padding:14px;
     }
     .story{
-      border-top:3px solid var(--rule);
-      padding-top:12px;
-      margin-top:10px;
     }
-    .story:first-child{border-top:0; padding-top:0; margin-top:0;}
-    .kicker{
-      font-size:12px;
-      letter-spacing:.12em;
-      text-transform:uppercase;
-      color:var(--accent);
-      font-weight:700;
-      margin-bottom:6px;
     }
     .headline{
-      font-size:28px;
-      line-height:1.15;
-      margin:0 0 6px;
     }
-    .subhead{
-      font-size:15px;
-      margin:0 0 12px;
-      color:var(--muted);
-      font-style:italic;
     }
-    .meta{
       display:flex;
       flex-wrap:wrap;
-      gap:10px 14px;
-      font-size:12.5px;
-      color:var(--muted);
-      margin:0 0 10px;
     }
-    .meta span{white-space:nowrap;}
-    .lede{
-      font-size:15.5px;
-      margin:0;
-    }
-    .lede:first-letter{
-      float:left;
-      font-size:52px;
-      line-height:.9;
-      padding:6px 8px 0 0;
-      font-weight:700;
-      color:#0f0f0f;
     }
     figure{
-      margin:12px 0 0;
-      border:1px solid var(--soft-rule);
-      padding:8px;
-      background:rgba(255,255,255,.35);
     }
     figure img{
       width:100%;
       height:auto;
       display:block;
-      border:1px solid rgba(0,0,0,.15);
     }
     figcaption{
-      margin-top:7px;
-      font-size:12.5px;
-      color:var(--muted);
     }
-    .two-up{
-      display:grid;
-      grid-template-columns: 1fr 1fr;
-      gap:18px;
-      margin-top:18px;
     }
-    .small .headline{font-size:20px;}
-    .small .lede{font-size:14.5px;}
-    .sidebar h2{
-      margin:0 0 8px;
-      font-size:18px;
-      letter-spacing:.06em;
-      text-transform:uppercase;
-      border-bottom:1px solid var(--soft-rule);
-      padding-bottom:6px;
     }
-    .briefs{
-      list-style:none;
-      padding:0;
-      margin:0;
       display:grid;
       gap:10px;
-      font-size:14px;
-      color:var(--muted);
     }
-    .briefs li{
-      padding-left:10px;
-      border-left:3px solid rgba(139,0,0,.35);
     }
-    .source{
-      font-size:12.5px;
-      color:var(--muted);
-      margin-top:10px;
     }
-    footer{
-      position:relative;
-      z-index:1;
-      margin-top:22px;
-      padding-top:12px;
-      border-top:4px double var(--rule);
       display:flex;
       flex-wrap:wrap;
       justify-content:space-between;
-      gap:10px;
-      color:var(--muted);
-      font-size:12.5px;
     }
-    .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
-    @media (max-width: 980px){
-      h1{font-size:44px;}
-      .grid{grid-template-columns: 1fr;}
-      .two-up{grid-template-columns: 1fr;}
-      .mast{grid-template-columns: 1fr;}
-      .mast .tag,.mast .price{border-bottom:0; padding-bottom:0; text-align:center;}
     }
   </style>
 </head>
 <body>
-  <div class="page" role="document">
-    <header>
-      <div class="topline">
-        <div>Independent • Slightly Opinionated • Mostly Well-Groomed</div>
-        <div class="mono">VOL. 1 • NO. 57</div>
-        <div>Thursday, Feb 26, 2026</div>
-      </div>
-      <div class="mast">
-        <div class="tag">All the news that’s fit to <em>print</em>… and occasionally sit on.</div>
-        <h1>The Daily Purr-ograph</h1>
-        <div class="price">One shiny penny • Delivered nine lives a week</div>
       </div>
-      <div class="breaking" aria-label="Breaking news">
-        <div class="label">Breaking Mews</div>
-        <div class="text">Top 3 headlines, illustrated as tiny cat dioramas — because reality needed a scale model.</div>
       </div>
     </header>
-    <main>
-      <div class="grid">
-        <section class="panel">
-          <article class="story">
-            <div class="kicker">Courts &amp; Border Policy</div>
-            <h2 class="headline">Trump administration’s ‘third country’ deportation policy is unlawful, judge rules</h2>
-            <p class="subhead">A due-<strong>purr</strong>-cess moment: the court says “you can’t just move the goalposts — or the cats.”</p>
-            <p class="meta"><span><strong>Filed:</strong> Feb 25, 2026</span><span><strong>Beat:</strong> Immigration</span><span><strong>Vibe:</strong> Legal hairball, coughed up</span></p>
-            <p class="lede">A federal judge ruled that a policy allowing deportations to “third countries” must be set aside, saying migrants deserve meaningful notice and a chance to object before they’re removed to a nation they have no ties to. The decision is paused for 15 days to allow time for an appeal.</p>
             <figure>
-              <img src="news-assets/story1-court.webp" alt="A miniature courtroom diorama with cats in suits and a sign referencing third-country deportations." />
-              <figcaption><strong>Miniature scene:</strong> “The Court of Paws.” Map wall, paw-print gavel, and very serious tiny suits.</figcaption>
             </figure>
-            <p class="source">Source: <a href="https://apnews.com/article/148cee2906dc7286b074116d3eec6fd4" target="_blank" rel="noreferrer">AP News</a></p>
-          </article>
-          <div class="two-up">
-            <article class="story small">
-              <div class="kicker">Health &amp; Money</div>
-              <h2 class="headline">Vance says administration is pausing some Medicaid funding to Minnesota because of fraud concerns</h2>
-              <p class="subhead">Minnesota’s funding gets put in the <strong>litter</strong> box — temporarily on hold.</p>
-              <p class="meta"><span><strong>Filed:</strong> Feb 25, 2026</span><span><strong>Figure:</strong> $259.5M</span></p>
-              <p class="lede">The administration says it will temporarily withhold $259.5 million in Medicaid funding to Minnesota while the state submits a corrective plan addressing fraud concerns. State officials pushed back, calling the move politically motivated and warning it could affect services for people who rely on the program.</p>
-              <figure>
-                <img src="news-assets/story2-medicaid.webp" alt="A miniature office diorama with cats in glasses reviewing paperwork labeled Medicaid, with a Minnesota outline on the wall." />
-                <figcaption><strong>Miniature scene:</strong> “Audit Cats at Work.” Tiny glasses, tiny forms, very large seriousness.</figcaption>
-              </figure>
-              <p class="source">Source: <a href="https://apnews.com/article/47b160fd664cdfeef355ae00ca5fecc0" target="_blank" rel="noreferrer">AP News</a></p>
-            </article>
-            <article class="story small">
-              <div class="kicker">Diplomacy &amp; Security</div>
-              <h2 class="headline">US and Iran are holding a third round of nuclear talks as more American forces deploy to the Mideast</h2>
-              <p class="subhead">Everyone’s at the table — claws sheathed, <strong>paws</strong> crossed.</p>
-              <p class="meta"><span><strong>Filed:</strong> Feb 26, 2026</span><span><strong>Where:</strong> Geneva</span></p>
-              <p class="lede">Indirect negotiations in Geneva — mediated by Oman — resume as the U.S. increases its military presence in the region. The talks focus on Iran’s nuclear program amid wider tensions, with both sides signaling diplomacy remains preferable even as pressure builds.</p>
-              <figure>
-                <img src="news-assets/story3-geneva.webp" alt="A miniature diplomatic roundtable diorama with cats as delegates, with Geneva scenery and U.S. and Iran flags behind." />
-                <figcaption><strong>Miniature scene:</strong> “Geneva, but Make It Meow.” Delegates, nameplates, and one tiny olive branch.</figcaption>
-              </figure>
-              <p class="source">Source: <a href="https://apnews.com/article/c1eb17f570b059f34071937c3f310fb6" target="_blank" rel="noreferrer">AP News</a></p>
-            </article>
           </div>
-        </section>
-        <aside class="panel sidebar" aria-label="Sidebar">
-          <h2>Mews, in Brief</h2>
-          <ul class="briefs">
-            <li><strong>Trend:</strong> Big policies, bigger paperwork. Small cats, huge binders.</li>
-            <li><strong>Editor’s note:</strong> If you can’t fix the news, at least you can build it at 1:12 scale.</li>
-            <li><strong>How we illustrated:</strong> Each headline got a “cat diorama” prompt — miniature craft textures, macro depth-of-field, and maximum whisker gravitas.</li>
-          </ul>
-          <div class="story" style="margin-top:14px;">
-            <div class="kicker">Puns Desk</div>
-            <p class="lede" style="font-size:14.5px;">Today’s pun quota has been met, exceeded, and then knocked off the table. You’re welcome.</p>
           </div>
-        </aside>
-      </div>
     </main>
-    <footer>
-      <div>Built for you on <span class="mono">news.html</span> • Local images in <span class="mono">news-assets/</span></div>
-      <div>Tip line: If you see a typo, please <em>paw</em>se and let us know.</div>
     </footer>
   </div>
 </body>
 </html>

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>The Daily Purr‑ograph — Cat Diorama Headlines</title>
+  <meta name="description" content="A pun-packed newspaper-style homepage featuring recent, non-offensive headlines—each reimagined as a tiny cat diorama." />
+  <!-- Distinctive editorial type pairing (avoid generic system-only look) -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
   <style>
     :root{
+      --paper:#f4efdf;
+      --paper2:#efe6cf;
+      --ink:#14110f;
+      --muted:#4a403a;
+      --rule:#2a2420;
+      --accent:#a13a2a;     /* vintage red */
+      --accent2:#2a5a7a;    /* inky blue */
+      --shadow: rgba(10,8,7,.18);
+      --serif: "Crimson Text", Georgia, serif;
+      --display: "IM Fell English SC", "Crimson Text", serif;
+      --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      --radius: 18px;
     }
+    *{ box-sizing:border-box; }
+    html,body{ height:100%; }
     body{
       margin:0;
       color:var(--ink);
+      font-family:var(--serif);
       background:
+        radial-gradient(1200px 700px at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
+        radial-gradient(900px 650px at 90% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
+        linear-gradient(180deg, var(--paper), var(--paper2));
       position:relative;
+      overflow-x:hidden;
     }
+    /* paper grain */
+    body::before{
       content:"";
+      position:fixed;
+      inset:-80px;
       pointer-events:none;
+      background:
+        repeating-linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 6px),
+        repeating-linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 7px);
       mix-blend-mode:multiply;
+      opacity:.18;
+      filter: blur(.15px);
+      transform: rotate(-.25deg);
     }
+    a{ color:inherit; text-decoration:none; }
+    a:hover{ text-decoration:underline; text-underline-offset:3px; }
+    .page{
+      max-width: 1160px;
+      margin: 0 auto;
+      padding: 18px 18px 56px;
     }
+    .topbar{
       display:flex;
+      gap:12px;
       align-items:flex-end;
       justify-content:space-between;
+      padding: 8px 2px 14px;
+      border-bottom: 2px solid var(--rule);
     }
+    .meta{
+      display:flex;
+      flex-wrap:wrap;
+      gap:10px;
+      align-items:center;
+      color:var(--muted);
+      font-size: 14px;
+      letter-spacing:.2px;
     }
+    .pill{
+      font-family:var(--mono);
+      font-size:12px;
+      padding: 6px 10px;
+      border: 1px solid rgba(20,17,15,.35);
+      border-radius: 999px;
+      background: rgba(255,255,255,.35);
+      box-shadow: 0 8px 22px rgba(0,0,0,.06);
+      white-space:nowrap;
     }
+    .masthead{
       text-align:center;
+      padding: 18px 10px 10px;
     }
+    .masthead h1{
+      font-family:var(--display);
+      font-weight: 400;
+      margin: 0;
+      font-size: clamp(44px, 6.6vw, 86px);
+      letter-spacing: .6px;
+      line-height: 1;
+      text-shadow: 0 10px 24px rgba(0,0,0,.08);
+    }
+    .tagline{
+      margin: 8px 0 0;
+      font-style: italic;
+      color: var(--muted);
+      font-size: 16px;
     }
+    .rule-row{
       display:flex;
+      gap:12px;
       align-items:center;
+      justify-content:space-between;
+      margin: 12px 0 18px;
+      padding: 10px 6px;
+      border-top: 1px solid rgba(20,17,15,.5);
+      border-bottom: 1px solid rgba(20,17,15,.5);
     }
+    .rule-row .kicker{
+      font-family: var(--mono);
+      text-transform: uppercase;
+      letter-spacing:.14em;
+      font-size: 12px;
+      color: var(--muted);
     }
+    .rule-row .kicker b{ color: var(--ink); }
+    .layout{
       display:grid;
+      grid-template-columns: 1.25fr .75fr;
+      gap: 18px;
+      align-items:start;
     }
+    @media (max-width: 980px){
+      .layout{ grid-template-columns: 1fr; }
     }
+    .card{
+      background: rgba(255,255,255,.38);
+      border: 1px solid rgba(20,17,15,.22);
+      border-radius: var(--radius);
+      box-shadow: 0 18px 40px var(--shadow);
+      overflow:hidden;
+    }
+    .card .inner{ padding: 16px 16px 18px; }
     .story{
+      border-bottom: 1px dashed rgba(20,17,15,.35);
     }
+    .story:last-child{ border-bottom:0; }
+    .story-head{
+      display:flex;
+      gap: 12px;
+      align-items:flex-start;
+      justify-content:space-between;
+      padding: 16px;
+      border-bottom: 1px solid rgba(20,17,15,.18);
+      background:
+        radial-gradient(900px 220px at 10% 20%, rgba(161,58,42,.11), rgba(161,58,42,0) 60%),
+        radial-gradient(700px 220px at 90% 60%, rgba(42,90,122,.10), rgba(42,90,122,0) 55%);
+    }
+    .section-label{
+      font-family: var(--mono);
+      font-size: 12px;
+      letter-spacing:.16em;
+      text-transform: uppercase;
+      color: var(--accent2);
     }
     .headline{
+      font-size: clamp(26px, 2.25vw, 36px);
+      line-height: 1.06;
+      margin: 6px 0 8px;
+      font-weight: 600;
     }
+    .deck{
+      margin:0;
+      color: var(--muted);
+      font-size: 17px;
+      line-height: 1.35;
+      max-width: 70ch;
     }
+    .byline{
+      margin-top: 10px;
       display:flex;
       flex-wrap:wrap;
+      gap:8px;
+      align-items:center;
+      color: var(--muted);
+      font-size: 13px;
     }
+    .byline .dot{ opacity:.6; }
+    .btn{
+      display:inline-flex;
+      align-items:center;
+      gap:8px;
+      font-family: var(--mono);
+      font-size: 12px;
+      padding: 8px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(20,17,15,.35);
+      background: rgba(255,255,255,.35);
+      transition: transform .12s ease, background .12s ease;
+      white-space:nowrap;
+    }
+    .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.55); text-decoration:none; }
+    .art{
+      display:grid;
+      grid-template-columns: 1fr;
+      gap: 0;
     }
     figure{
+      margin:0;
+      position:relative;
+      background: #111;
     }
     figure img{
       width:100%;
       height:auto;
       display:block;
+      filter: contrast(1.02) saturate(1.03);
     }
     figcaption{
+      position:absolute;
+      left: 12px;
+      bottom: 12px;
+      right: 12px;
+      padding: 10px 12px;
+      border-radius: 14px;
+      background: rgba(20,17,15,.62);
+      color: rgba(255,255,255,.92);
+      backdrop-filter: blur(6px);
+      border: 1px solid rgba(255,255,255,.14);
+      box-shadow: 0 10px 30px rgba(0,0,0,.35);
+      font-size: 13px;
+      line-height: 1.25;
     }
+    .copy{
+      padding: 14px 16px 18px;
     }
+    .columns{
+      column-count: 2;
+      column-gap: 22px;
+      font-size: 17px;
+      line-height: 1.55;
+      color: var(--ink);
+    }
+    @media (max-width: 760px){
+      .columns{ column-count: 1; }
     }
+    .columns p{ margin: 0 0 12px; }
+    .columns p:first-child::first-letter{
+      float:left;
+      font-family: var(--display);
+      font-size: 56px;
+      line-height: 1;
+      padding: 2px 10px 0 0;
+      color: var(--accent);
+      text-shadow: 0 8px 18px rgba(0,0,0,.14);
+    }
+    .side{
+      position:sticky;
+      top: 12px;
+    }
+    @media (max-width: 980px){
+      .side{ position:relative; top:auto; }
+    }
+    .side h3{
+      font-family: var(--display);
+      letter-spacing: .3px;
+      font-size: 24px;
+      margin: 0 0 10px;
+    }
+    .side .box{
+      padding: 14px 14px 16px;
+      border-top: 1px dashed rgba(20,17,15,.35);
+    }
+    .side .box:first-child{ border-top:0; }
+    .mini{
       display:grid;
       gap:10px;
     }
+    .mini .item{
+      display:flex;
+      gap:10px;
+      align-items:flex-start;
+      padding: 10px 10px;
+      border-radius: 14px;
+      border: 1px solid rgba(20,17,15,.18);
+      background: rgba(255,255,255,.32);
     }
+    .mini .badge{
+      width: 32px;
+      height: 32px;
+      border-radius: 10px;
+      display:grid;
+      place-items:center;
+      border: 1px solid rgba(20,17,15,.25);
+      background: rgba(161,58,42,.12);
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--accent);
+      flex: 0 0 auto;
     }
+    .mini .item b{ display:block; }
+    .mini .item span{ color:var(--muted); font-size: 13px; line-height: 1.25; }
+    .fineprint{
+      color: var(--muted);
+      font-size: 12px;
+      line-height: 1.35;
+    }
+    .footer{
+      margin-top: 18px;
+      padding-top: 14px;
+      border-top: 2px solid rgba(20,17,15,.7);
       display:flex;
       flex-wrap:wrap;
+      gap: 12px;
       justify-content:space-between;
+      align-items:flex-start;
     }
+    .sources{
+      display:flex;
+      flex-direction:column;
+      gap:6px;
+      max-width: 72ch;
+    }
+    .sources a{
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    @media (prefers-reduced-motion: reduce){
+      *{ transition:none !important; scroll-behavior:auto !important; }
     }
   </style>
 </head>
 <body>
+  <div class="page">
+    <div class="topbar">
+      <div class="meta">
+        <span class="pill">VOL. CXLII · NO. 57</span>
+        <span class="pill">PRICE: 3 TUNA‑TOKENS</span>
+        <span class="pill">EDITION: EXTRA WHISKERS</span>
       </div>
+      <div class="meta" style="justify-content:flex-end; text-align:right;">
+        <span class="pill">Thursday, February 26, 2026</span>
       </div>
+    </div>
+    <header class="masthead">
+      <h1>THE DAILY PURR‑OGRAPH</h1>
+      <p class="tagline">All the news that’s fit to purr‑int — now with dioramas, drama, and a suspicious amount of cardboard.</p>
     </header>
+    <div class="rule-row">
+      <div class="kicker"><b>BREAKING:</b> scientists confirm gravity still works, despite several cats’ best efforts.</div>
+      <div class="kicker">today’s sections: <b>Space &amp; Whiskers</b> · <b>Tech Meow‑tters</b> · <b>Arts &amp; Crafts‑trophysics</b></div>
+    </div>
+    <main class="layout">
+      <!-- MAIN STORIES -->
+      <section class="card" aria-label="Top stories">
+        <!-- Story 1 -->
+        <article class="story">
+          <div class="story-head">
+            <div>
+              <div class="section-label">Space &amp; Whiskers</div>
+              <h2 class="headline">Artemis II Gets a Pit‑Stop: Moon Rocket Rolls Back for Repairs (a.k.a. a Meow‑chanics Visit)</h2>
+              <p class="deck">NASA says the Artemis II rocket returned for repairs—because even moon‑bound hardware sometimes needs a little… paw‑lish.</p>
+              <div class="byline">
+                <span>By the Purr‑sociated Press (Desk Cat)</span><span class="dot">•</span>
+                <span>Filed: Feb 25, 2026</span><span class="dot">•</span>
+                <a class="btn" href="https://www.nasa.gov/blogs/artemis/2026/02/25/nasa-artemis-ii-rocket-returns-for-repairs/" target="_blank" rel="noopener">Read NASA story <span aria-hidden="true">↗</span></a>
+              </div>
+            </div>
+          </div>
+          <div class="art">
             <figure>
+              <img src="assets/story1-rocket.webp" alt="A miniature diorama of cats guiding a large orange-and-white rocket into a hangar." loading="lazy" />
+              <figcaption><b>Cat Diorama:</b> The Artemis II ‘roll‑back’ — tiny safety cones, big rocket energy, and enough pawprints to qualify as a new kind of telemetry.</figcaption>
             </figure>
+            <div class="copy">
+              <div class="columns">
+                <p>In today’s installment of <i>Space, But Make It Craft</i>, NASA’s Artemis II rocket headed back for repairs. Think of it as a scheduled nap for a very large, very expensive orange‑and‑white “tube of zoom.”</p>
+                <p>Our newsroom’s expert meow‑chanics report that rollbacks are a normal part of the rocket’s road trip: if a component looks even slightly “hiss‑y,” it’s better to bring it in for a tune‑up now than to discover the issue mid‑moon.</p>
+                <p>Meanwhile, the feline ground crew has already issued a statement: “We did not chew the cables. We merely inspected them with our teeth.”</p>
+              </div>
+            </div>
           </div>
+        </article>
+        <!-- Story 2 -->
+        <article class="story">
+          <div class="story-head">
+            <div>
+              <div class="section-label">Tech Meow‑tters</div>
+              <h2 class="headline">Purr‑severance Gets a Mars ‘GPS’: No More “Are We There Meow?”</h2>
+              <p class="deck">A GPS‑like boost from orbit could help the Perseverance rover know where it is on Mars—so it can stop asking for directions like a lost kitten in a big red parking lot.</p>
+              <div class="byline">
+                <span>By Rover &amp; Order (Field Unit)</span><span class="dot">•</span>
+                <span>Filed: Feb 23, 2026</span><span class="dot">•</span>
+                <a class="btn" href="https://www.space.com/space-exploration/mars-rovers/perseverance-rover-gets-mars-gps-from-space" target="_blank" rel="noopener">Read Space.com <span aria-hidden="true">↗</span></a>
+              </div>
+            </div>
           </div>
+          <div class="art">
+            <figure>
+              <img src="assets/story2-mars-gps.webp" alt="A handmade diorama of a cat astronaut guiding a small Mars rover with a map and an overhead satellite." loading="lazy" />
+              <figcaption><b>Cat Diorama:</b> Mission Control’s newest navigation system: one satellite, one map, and one cat who insists the shortest route is “straight through the couch.”</figcaption>
+            </figure>
+            <div class="copy">
+              <div class="columns">
+                <p>Mars navigation can be tricky: no street signs, no coffee shops, and absolutely no helpful strangers to point dramatically at the horizon. That’s why a GPS‑like approach—using signals from orbit—can be a big deal for rover positioning.</p>
+                <p>Our feline analysts call it “Global Paws‑itioning,” a system designed to reduce wrong turns, wasted wheel tracks, and awkward moments when the rover has to pretend it <i>meant</i> to loop around that rock five times.</p>
+                <p>In unrelated news, our office cat has demanded the same upgrade for the living room, citing “insufficient satellite coverage” whenever it can’t find its favorite sunbeam.</p>
+              </div>
+            </div>
+          </div>
+        </article>
+        <!-- Story 3 -->
+        <article class="story">
+          <div class="story-head">
+            <div>
+              <div class="section-label">Arts &amp; Crafts‑trophysics</div>
+              <h2 class="headline">Hubble Finds One of the Darkest Known Galaxies: A Real Cat‑astrophe of Light (or Lack Thereof)</h2>
+              <p class="deck">A new Hubble result highlights an exceptionally dark galaxy—proof that even the universe occasionally forgets to turn on the lamp.</p>
+              <div class="byline">
+                <span>By The Stellar Desk (Night Shift)</span><span class="dot">•</span>
+                <span>Filed: Feb 18, 2026</span><span class="dot">•</span>
+                <a class="btn" href="https://science.nasa.gov/missions/hubble/hubble-identifies-one-of-darkest-known-galaxies/" target="_blank" rel="noopener">Read NASA Science <span aria-hidden="true">↗</span></a>
+              </div>
+            </div>
+          </div>
+          <div class="art">
+            <figure>
+              <img src="assets/story3-dark-galaxy.webp" alt="A moody diorama of two cats with tiny telescopes and notebooks looking at a nearly invisible dark galaxy display." loading="lazy" />
+              <figcaption><b>Cat Diorama:</b> Two astronomers, one tiny telescope, and a galaxy that’s basically a stealth mode loaf. Visibility: meow‑nimal.</figcaption>
+            </figure>
+            <div class="copy">
+              <div class="columns">
+                <p>When Hubble points at something described as “one of the darkest known galaxies,” it’s not being dramatic. It’s more like: “Hello, I brought a telescope, and the universe brought a blackout curtain.”</p>
+                <p>Dark galaxies—faint, elusive, and hard to spot—are a reminder that not everything cosmic is a sparkling postcard. Some parts of space are more like a cat at night: present, powerful, and determined not to be photographed.</p>
+                <p>Luckily, our diorama reconstruction team has reproduced the scene with museum‑grade seriousness and craft‑store glitter, because science demands accuracy… and also tiny props.</p>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+      <!-- SIDEBAR -->
+      <aside class="card side" aria-label="Sidebar">
+        <div class="inner">
+          <h3>Extra! Extra! Read All About Mews</h3>
+          <p class="fineprint">A pun‑forward, non‑offensive front page. Dioramas are AI‑generated recreations inspired by the linked reporting — no actual cats were launched, lost, or asked to file expense reports.</p>
+        </div>
+        <div class="box">
+          <div class="mini">
+            <div class="item">
+              <div class="badge">CAT</div>
+              <div>
+                <b>Cat‑Cast Weather</b>
+                <span>Mostly sunny with scattered laser‑pointer activity. Chance of hairballs: 12% (but feels like 100%).</span>
+              </div>
+            </div>
+            <div class="item">
+              <div class="badge">PUN</div>
+              <div>
+                <b>Market Meows</b>
+                <span>Tuna futures up, cardboard derivatives stable, and the Yarn Index continues to unravel.</span>
+              </div>
+            </div>
+            <div class="item">
+              <div class="badge">PSA</div>
+              <div>
+                <b>Public Service Announce‑mint</b>
+                <span>If you can’t find your keys, check the “quantum box”: the cat both <i>has</i> them and <i>doesn’t</i> — until observed.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="box">
+          <h3 style="margin:0 0 10px;">Micro‑Classifieds</h3>
+          <div class="mini">
+            <div class="item">
+              <div class="badge">1</div>
+              <div>
+                <b>Wanted:</b>
+                <span>One brave intern to proofread <i>purr‑nunciation</i> errors. Pay in snacks. Benefits include naps.</span>
+              </div>
+            </div>
+            <div class="item">
+              <div class="badge">2</div>
+              <div>
+                <b>For Sale:</b>
+                <span>Gently used “Mars Map.” Slightly chewed corner. Still points generally toward “over there.”</span>
+              </div>
+            </div>
+            <div class="item">
+              <div class="badge">3</div>
+              <div>
+                <b>Lost &amp; Found:</b>
+                <span>One black galaxy. If seen, please do <i>not</i> turn on the lights — it’s shy.</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
     </main>
+    <footer class="footer">
+      <div class="sources">
+        <div class="kicker"><b>Sources</b> (linked above, repeated here for convenience)</div>
+        <div class="fineprint">
+          <div>• NASA Artemis blog: <a href="https://www.nasa.gov/blogs/artemis/2026/02/25/nasa-artemis-ii-rocket-returns-for-repairs/" target="_blank" rel="noopener">NASA Artemis II Rocket Returns for Repairs</a></div>
+          <div>• Space.com: <a href="https://www.space.com/space-exploration/mars-rovers/perseverance-rover-gets-mars-gps-from-space" target="_blank" rel="noopener">Perseverance rover gets a Mars GPS from space</a></div>
+          <div>• NASA Science / Hubble: <a href="https://science.nasa.gov/missions/hubble/hubble-identifies-one-of-darkest-known-galaxies/" target="_blank" rel="noopener">Hubble identifies one of darkest known galaxies</a></div>
+        </div>
+      </div>
+      <div class="fineprint" style="max-width:38ch;">
+        <div class="kicker"><b>Colophon</b></div>
+        <div>Typeset in IM Fell English SC, Crimson Text &amp; DM Mono.</div>
+        <div>Printed on 100% recycled imaginary paper.</div>
+        <div style="margin-top:8px;">© 2026 The Daily Purr‑ograph (definitely not a real newspaper).</div>
+      </div>
     </footer>
   </div>
 </body>
 </html>