Design and UI tweaks

app/pages/index.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- HERO -->
     <div class="hero">
-      <h1>Ghost Guild is where game developers explore cooperative models.</h1>
+      <h1>Ghost Guild is where game developers explore <span class="accent">cooperative</span> models.</h1>
       <p>
         Resources, events, and a community of people figuring it out. Three
         circles, pay what you can.
@@ -208,51 +208,68 @@ const formatDate = (event) => {
 <style scoped>
 /* ---- HERO ---- */
 .hero {
-  padding: 48px 32px;
+  padding: clamp(64px, 10vw, 144px) clamp(28px, 5vw, 72px) clamp(48px, 7vw, 104px);
   border-bottom: 1px dashed var(--border);
 }
 .hero h1 {
   font-family: "Brygada 1918", serif;
-  font-size: 36px;
+  font-size: clamp(40px, 6.5vw, 80px);
   font-weight: 600;
   color: var(--text-bright);
-  line-height: 1.15;
-  letter-spacing: -0.01em;
-  margin-bottom: 16px;
-  max-width: 540px;
+  line-height: 1.04;
+  letter-spacing: -0.022em;
+  margin-bottom: clamp(20px, 2.4vw, 36px);
+  max-width: 16ch;
+}
+.hero h1 .accent {
+  color: var(--candle);
 }
 .hero p {
   color: var(--text-dim);
-  max-width: 460px;
+  max-width: 48ch;
+  font-size: clamp(13px, 1.3vw, 16px);
   line-height: 1.7;
-  margin-bottom: 20px;
+  margin-bottom: clamp(28px, 3vw, 44px);
 }
 .hero-links {
   display: flex;
-  gap: 16px;
-  font-size: 13px;
-}
-.hero-link {
-  color: var(--candle);
-  padding: 6px 16px;
-  border: 1px dashed var(--candle-faint);
-  transition: all 0.2s;
-  text-decoration: none;
-}
-.hero-link:hover {
-  border-color: var(--candle);
-  border-style: solid;
-  text-decoration: none;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: clamp(16px, 2vw, 28px);
+  font-size: 14px;
 }
+/* Primary CTA reads as a solid block; secondary actions recede to quiet links. */
 .hero-link.primary {
   background: var(--candle);
   color: var(--bg);
-  border-color: var(--candle);
-  border-style: solid;
+  padding: 13px 30px;
+  border: 1px solid var(--candle);
+  letter-spacing: 0.02em;
+  transition: background 0.2s, border-color 0.2s, transform 0.2s;
+  text-decoration: none;
 }
 .hero-link.primary:hover {
   background: var(--candle-dim);
   border-color: var(--candle-dim);
+  transform: translateY(-2px);
+  text-decoration: none;
+}
+.hero-link:not(.primary) {
+  color: var(--candle);
+  padding: 4px 0;
+  border-bottom: 1px dashed var(--candle-faint);
+  transition: border-color 0.2s, color 0.2s;
+  text-decoration: none;
+}
+.hero-link:not(.primary):hover {
+  color: var(--candle-dim);
+  border-color: var(--candle);
+  text-decoration: none;
+}
+/* Keyboard focus echoes the design system's dashed-candle indicator (see .btn). */
+.hero-link:focus-visible {
+  outline: 2px dashed var(--candle);
+  outline-offset: 3px;
 }
 
 /* ---- CONTENT GRID ---- */
@@ -266,40 +283,41 @@ const formatDate = (event) => {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .content-block {
-  padding: 24px 28px;
+  padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.2vw, 36px);
   border-right: 1px dashed var(--border);
   min-width: 0;
   overflow-wrap: break-word;
   align-self: stretch;
 }
 .content-row.two-col .content-block {
-  padding: 24px 0;
+  padding: clamp(24px, 2.6vw, 40px) 0;
 }
 .content-row.two-col .block-inset {
-  padding-left: 28px;
-  padding-right: 28px;
+  padding-left: clamp(24px, 2.2vw, 36px);
+  padding-right: clamp(24px, 2.2vw, 36px);
 }
 .content-block:last-child {
   border-right: none;
 }
 .content-block h2 {
   font-family: "Brygada 1918", serif;
-  font-size: 18px;
+  font-size: clamp(19px, 1.9vw, 26px);
   font-weight: 500;
+  line-height: 1.15;
   color: var(--text-bright);
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 .content-block p {
   color: var(--text-dim);
-  font-size: 12px;
-  line-height: 1.65;
+  font-size: 13px;
+  line-height: 1.7;
 }
 .content-block .label {
   font-size: 10px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--text-faint);
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 /* ---- EVENT LIST ---- */
@@ -316,10 +334,10 @@ const formatDate = (event) => {
   align-items: baseline;
   padding-top: 10px;
   padding-bottom: 10px;
-  transition: padding-left 0.2s;
+  transition: transform 0.2s;
 }
 .content-row.two-col .event-item:hover .event-item-inner {
-  padding-left: calc(28px + 4px);
+  transform: translateX(4px);
 }
 .event-date {
   color: var(--text-faint);
@@ -382,5 +400,23 @@ const formatDate = (event) => {
   .hero-link {
     text-align: center;
   }
+  /* Comfortable tap targets; tight dashed underline replaces the bottom border. */
+  .hero-link:not(.primary) {
+    padding: 11px 0;
+    border-bottom: none;
+    text-decoration: underline dashed var(--candle-faint);
+    text-underline-offset: 3px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hero-link.primary,
+  .event-item-inner {
+    transition: none;
+  }
+  .hero-link.primary:hover,
+  .content-row.two-col .event-item:hover .event-item-inner {
+    transform: none;
+  }
 }
 </style>