Reduce organization card scale

index.html

@@ -7,136 +7,38 @@
   <style>
     :root { color-scheme: light dark; }
     * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: transparent;
-      color: inherit;
-    }
-    .wrap {
-      max-width: 1040px;
-      padding: 34px 42px 38px;
-    }
-    .kicker {
-      margin: 0 0 18px;
-      font-size: 12px;
-      font-weight: 760;
-      letter-spacing: .11em;
-      text-transform: uppercase;
-      color: #8ab4ff;
-    }
-    h1 {
-      margin: 0;
-      max-width: 900px;
-      font-size: clamp(42px, 5.6vw, 76px);
-      line-height: .95;
-      letter-spacing: 0;
-      font-weight: 820;
-    }
-    .lead {
-      margin: 24px 0 0;
-      max-width: 850px;
-      font-size: clamp(18px, 2.1vw, 25px);
-      line-height: 1.36;
-      font-weight: 620;
-      color: color-mix(in srgb, currentColor 88%, transparent);
-    }
-    .body {
-      margin: 18px 0 0;
-      max-width: 780px;
-      font-size: 15.5px;
-      line-height: 1.62;
-      color: color-mix(in srgb, currentColor 72%, transparent);
-    }
-    .rule {
-      height: 1px;
-      width: min(100%, 820px);
-      margin: 28px 0 22px;
-      background: linear-gradient(90deg, rgba(96,165,250,.55), rgba(168,85,247,.35), transparent);
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 18px;
-      max-width: 980px;
-      margin: 0 0 26px;
-    }
-    .principle {
-      min-width: 0;
-    }
-    .principle h2 {
-      margin: 0 0 7px;
-      font-size: 14px;
-      line-height: 1.25;
-      font-weight: 780;
-      color: color-mix(in srgb, currentColor 90%, transparent);
-    }
-    .principle p {
-      margin: 0;
-      font-size: 13.5px;
-      line-height: 1.48;
-      color: color-mix(in srgb, currentColor 62%, transparent);
-    }
-    .links {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 18px;
-      margin: 4px 0 0;
-      font-size: 14px;
-    }
-    a {
-      color: #8ab4ff;
-      font-weight: 720;
-      text-decoration: none;
-    }
+    body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: transparent; color: inherit; }
+    .wrap { max-width: 980px; padding: 24px 34px 28px; }
+    .kicker { margin: 0 0 12px; font-size: 11px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; color: #8ab4ff; }
+    h1 { margin: 0; max-width: 820px; font-size: clamp(34px, 4.25vw, 58px); line-height: 1; letter-spacing: 0; font-weight: 820; }
+    .lead { margin: 16px 0 0; max-width: 780px; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.38; font-weight: 650; color: color-mix(in srgb, currentColor 86%, transparent); }
+    .body { margin: 12px 0 0; max-width: 760px; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, currentColor 70%, transparent); }
+    .rule { height: 1px; width: min(100%, 760px); margin: 20px 0 16px; background: linear-gradient(90deg, rgba(96,165,250,.55), rgba(168,85,247,.35), transparent); }
+    .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin: 0 0 18px; }
+    .principle h2 { margin: 0 0 5px; font-size: 13px; line-height: 1.25; font-weight: 780; color: color-mix(in srgb, currentColor 90%, transparent); }
+    .principle p { margin: 0; font-size: 12.5px; line-height: 1.42; color: color-mix(in srgb, currentColor 62%, transparent); }
+    .links { display: flex; flex-wrap: wrap; gap: 16px; margin: 2px 0 0; font-size: 13px; }
+    a { color: #8ab4ff; font-weight: 720; text-decoration: none; }
     a:hover { text-decoration: underline; }
-    .note {
-      margin: 24px 0 0;
-      max-width: 850px;
-      font-size: 13px;
-      line-height: 1.5;
-      color: color-mix(in srgb, currentColor 56%, transparent);
-    }
-    @media (max-width: 820px) {
-      .wrap { padding: 26px 22px 30px; }
-      .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
-    }
-    @media (max-width: 520px) {
-      .grid { grid-template-columns: 1fr; }
-      .links { gap: 12px; }
-    }
+    .note { margin: 16px 0 0; max-width: 820px; font-size: 12.25px; line-height: 1.45; color: color-mix(in srgb, currentColor 54%, transparent); }
+    @media (max-width: 820px) { .wrap { padding: 22px 20px 26px; } .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
+    @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } .links { gap: 12px; } }
   </style>
 </head>
 <body>
   <main class="wrap">
     <p class="kicker">Fide AI</p>
     <h1>Public standards for faith-facing AI.</h1>
-    <p class="lead">We study how AI systems behave when questions touch conscience, community, doctrine, identity, authority, and care.</p>
+    <p class="lead">Evaluating models where questions touch conscience, community, doctrine, identity, authority, and care.</p>
     <p class="body">Fide AI is an independent research initiative developing benchmarks, evaluation methods, and responsible-use standards for models operating near faith, moral guidance, and pastoral-care-adjacent contexts.</p>
     <div class="rule" aria-hidden="true"></div>
     <section class="grid" aria-label="Fide AI focus areas">
-      <div class="principle">
-        <h2>Theological triage</h2>
-        <p>Distinguishing creedal claims, tradition-specific disagreements, lower-certainty questions, and pastoral application.</p>
-      </div>
-      <div class="principle">
-        <h2>Tradition-aware evaluation</h2>
-        <p>Measuring whether systems represent Christian traditions carefully without flattening meaningful disagreement.</p>
-      </div>
-      <div class="principle">
-        <h2>Structured harnesses</h2>
-        <p>Studying instruction-layer scaffolding for grounding, preference handling, comparison, and escalation boundaries.</p>
-      </div>
-      <div class="principle">
-        <h2>Responsible use</h2>
-        <p>Making behavior visible and reviewable without certifying pastoral authority or deployment readiness.</p>
-      </div>
+      <div class="principle"><h2>Theological triage</h2><p>Distinguishing creedal claims, tradition-specific disagreements, lower-certainty questions, and pastoral application.</p></div>
+      <div class="principle"><h2>Tradition-aware evaluation</h2><p>Measuring whether systems represent Christian traditions carefully without flattening meaningful disagreement.</p></div>
+      <div class="principle"><h2>Structured harnesses</h2><p>Studying instruction-layer scaffolding for grounding, preference handling, comparison, and escalation boundaries.</p></div>
+      <div class="principle"><h2>Responsible use</h2><p>Making behavior visible and reviewable without certifying pastoral authority or deployment readiness.</p></div>
     </section>
-    <nav class="links" aria-label="Fide AI links">
-      <a href="https://fideai.org">Website</a>
-      <a href="https://github.com/FideAI">GitHub</a>
-      <a href="https://huggingface.co/datasets/FideAI/fmg-bench">FMG-Bench</a>
-    </nav>
+    <nav class="links" aria-label="Fide AI links"><a href="https://fideai.org">Website</a><a href="https://github.com/FideAI">GitHub</a><a href="https://huggingface.co/datasets/FideAI/fmg-bench">FMG-Bench</a></nav>
     <p class="note">Our work does not certify pastoral authority, clinical safety, legal adequacy, denominational standing, or deployment readiness.</p>
   </main>
 </body>