feat(auth): restyle the auth pages on the ruled frame

app/(auth)/layout.tsx

@@ -21,21 +21,23 @@ export default function AuthLayout({ children }: { children: React.ReactNode })
           places the photo in the left column. */}
       <main className="auth-main">
         <div className="auth-topbar">
-          <Link href="/" className="auth-home">
-            <ArrowLeft aria-hidden className="size-5" />
-            Home
+          <Link href="/" aria-label="HackVillage home" className="auth-logo">
+            {/* eslint-disable-next-line @next/next/no-img-element -- animated brand lockup, no static/SVG source */}
+            <img
+              src="/branding/HackVillage-Logo.gif"
+              alt="HackVillage"
+              className="h-9 w-auto rounded-control"
+            />
           </Link>
-          <ThemeSwitcher />
+          <div className="auth-topbar-actions">
+            <Link href="/" className="auth-home">
+              <ArrowLeft aria-hidden className="size-5" />
+              Home
+            </Link>
+            <ThemeSwitcher />
+          </div>
         </div>
-        <Link href="/" aria-label="HackVillage home">
-          {/* eslint-disable-next-line @next/next/no-img-element -- animated brand lockup, no static/SVG source */}
-          <img
-            src="/branding/HackVillage-Logo.gif"
-            alt="HackVillage"
-            className="h-16 w-auto rounded-card"
-          />
-        </Link>
-        <div className="w-full max-w-md">{children}</div>
+        <div className="auth-form-slot w-full max-w-md">{children}</div>
       </main>
       <AuthVisual />
     </div>

app/globals.css

@@ -1234,23 +1234,50 @@
   .auth-visual {
     display: none;
   }
+  /* The form half sits in the site's ruled frame: a soft tint at the top and
+     hairline rules down both sides of the form column. */
   .auth-main {
     position: relative;
+    isolation: isolate;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 2rem;
-    padding: 4.5rem 1rem 3rem;
+    padding: 5.5rem 1rem 3rem;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--color-brand) 7%, var(--color-paper)),
+      var(--color-paper) 45%
+    );
+  }
+  .auth-main::before {
+    content: "";
+    position: absolute;
+    inset: 0 clamp(12px, 4vw, 56px);
+    z-index: -1;
+    border-inline: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
+    pointer-events: none;
   }
   .auth-topbar {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-    left: 1rem;
+    top: 0;
+    right: clamp(12px, 4vw, 56px);
+    left: clamp(12px, 4vw, 56px);
     display: flex;
+    height: var(--site-header-height);
     align-items: center;
     justify-content: space-between;
+    padding-inline: clamp(12px, 1.5vw, 20px);
+    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
+  }
+  .auth-topbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .auth-logo {
+    display: inline-flex;
   }
   .auth-home {
     display: inline-flex;
@@ -1283,8 +1310,7 @@
       z-index: 1;
       grid-column: 2;
       grid-row: 1;
-      padding: 4.5rem 2rem 3rem;
-      background: var(--color-paper);
+      padding: 6rem 2rem 3rem;
       border-radius: var(--auth-corner) 0 0 var(--auth-corner);
     }
     .auth-visual {
@@ -1319,16 +1345,14 @@
   }
   .auth-visual-eyebrow {
     margin-bottom: 0.75rem;
-    font-size: 11px;
+    font-size: 14px;
     font-weight: 600;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
     color: var(--color-brand-soft);
   }
   .auth-visual-heading {
     font-family: var(--font-display);
-    font-size: clamp(28px, 2.6vw, 40px);
-    font-weight: 700;
+    font-size: clamp(30px, 2.8vw, 44px);
+    font-weight: 500;
     line-height: 1.05;
     letter-spacing: -0.02em;
   }
@@ -1370,20 +1394,34 @@
     bottom: clamp(1.5rem, 3.5vw, 3rem);
     width: min(19rem, calc(100% - 3rem));
     padding: 1.25rem 1.25rem 1.375rem;
-    border: 1px solid rgb(255 255 255 / 0.18);
-    border-radius: 1.25rem;
-    background: color-mix(in srgb, var(--color-brand-ink) 70%, transparent);
-    backdrop-filter: blur(12px);
-    box-shadow: 6px 6px 0 var(--color-brand);
+    border: 1px solid rgb(255 255 255 / 0.22);
+    border-radius: var(--radius-card);
+    background: color-mix(in srgb, var(--color-brand-ink) 62%, transparent);
+    backdrop-filter: blur(14px);
+    box-shadow: 0 24px 48px -16px rgb(0 0 40 / 0.55);
     color: #fff;
   }
+  /* A tick-line stat, as on the rest of the site. */
   .auth-visual-stat {
+    position: relative;
+    padding-left: 14px;
+    border-left: 1px solid rgb(255 255 255 / 0.25);
     font-family: var(--font-display);
     font-size: 40px;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 1;
+    letter-spacing: -0.02em;
     color: var(--color-brand-soft);
   }
+  .auth-visual-stat::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: -1px;
+    width: 1px;
+    height: 24px;
+    background: var(--color-brand);
+  }
   .auth-visual-card-text {
     margin-top: 0.5rem;
     font-size: 14px;
@@ -4079,3 +4117,18 @@ html:not([data-scrolled]) body:has(.lp-hero) .site-header {
   background-color: transparent;
   backdrop-filter: none;
 }
+
+/*
+ * Auth pages: the forms render the shared Card, whose shadow utility would
+ * outrank layered styles. Unlayered on purpose, scoped to the auth form
+ * slot, to give them the site's hairline card instead.
+ */
+.auth-form-slot > .rounded-card,
+.auth-form-slot .rounded-card.shadow-card {
+  border-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
+  box-shadow: 0 1px 2px rgb(0 0 70 / 0.04);
+}
+.auth-form-slot h1 {
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}

components/auth/signin-form.tsx

@@ -25,8 +25,8 @@ export function SignInForm({
 
   return (
     <Card>
-      <h1 className="text-center font-display text-2xl font-bold text-ink">Welcome Back</h1>
-      <p className="mt-1 text-center text-sm text-muted">Sign in to your HackVillage account.</p>
+      <h1 className="font-display text-2xl font-bold text-ink">Welcome Back</h1>
+      <p className="mt-1 text-sm text-muted">Sign in to your HackVillage account.</p>
 
       {notice ? <FormSuccess message={notice} /> : null}
       {errorNotice ? <FormError message={errorNotice} /> : null}