Fix mobile breakage site-wide and add a persistent, denser admin nav

app/(public)/cs-guide/page.tsx

@@ -55,7 +55,8 @@ const Guide: React.FC = () => {
         <Sidebar />
 
         {/* MAIN CONTENT */}
-        <div className="animate-fade-in flex-1 max-w-full md:max-w-3xl">
+        {/* min-w-0: without it a flex child won't shrink below its content's natural width, so right at lg (1024px) — the moment the 256px sidebar joins the row — this column pushes past the viewport instead of wrapping. */}
+        <div className="animate-fade-in min-w-0 flex-1 max-w-full md:max-w-3xl">
           {/* HERO */}
           <section id="introduction" className="mb-16">
             <h1 className="text-3xl sm:text-4xl font-bold mb-6">

app/(public)/page.tsx

@@ -12,7 +12,7 @@ export default function Home() {
   return (
     <main className="flex flex-col w-full font-sans bg-surface overflow-x-clip">
       <section className="relative w-full border-b-2 border-line">
-        <div className="animate-rise-in max-w-7xl mx-auto px-1 py-14 sm:px-8 sm:py-24 md:py-32 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div className="animate-rise-in max-w-7xl mx-auto px-4 py-14 sm:px-8 sm:py-24 md:py-32 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           <div className="flex flex-col items-start gap-6 z-10">
             <Badge
               variant="outline"
@@ -57,7 +57,7 @@ export default function Home() {
             />
             <MemberBadge
               count="900+"
-              className="absolute -bottom-6 -right-2 md:-right-8 z-20"
+              className="absolute -bottom-4 -right-1 sm:-bottom-6 sm:-right-2 md:-right-8 z-20"
             />
           </div>
         </div>

app/(public)/team/components/team-member-card.tsx

@@ -77,7 +77,7 @@ export function TeamMemberCard({
   const titleLabel = isAlumni ? (
     <p className="max-w-full text-sm font-semibold text-brand">{title}</p>
   ) : (
-    <Badge className="max-w-full overflow-hidden" size="sm" variant="default">
+    <Badge className="max-w-full truncate" size="sm" variant="default">
       {title}
     </Badge>
   );
@@ -104,7 +104,11 @@ export function TeamMemberCard({
             alt={name}
             className="object-cover"
             fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1060px) 50vw, 25vw"
+            sizes={
+              isAlumni
+                ? "(max-width: 767px) 50vw, (max-width: 1279px) 33vw, 20vw"
+                : "(max-width: 767px) 50vw, (max-width: 1279px) 33vw, 25vw"
+            }
             src={imageUrl}
             style={{ objectPosition: member.image?.position ?? "50% 50%" }}
             unoptimized
@@ -150,13 +154,13 @@ export function TeamMemberCard({
         )}
       </div>
 
-      <div className={isAlumni ? "space-y-1 p-3" : "space-y-3 p-4"}>
+      <div className={isAlumni ? "space-y-1 p-2.5" : "space-y-2 p-3"}>
         <div className="space-y-1.5">
           <h3
             className={
               isAlumni
-                ? "text-lg font-semibold leading-tight text-ink/85"
-                : "text-xl font-semibold leading-tight text-ink"
+                ? "text-sm font-semibold leading-tight text-ink/85"
+                : "text-base font-semibold leading-tight text-ink"
             }
           >
             {name}
@@ -179,7 +183,7 @@ export function TeamMemberCard({
                     <Image
                       alt=""
                       aria-hidden="true"
-                      className="size-[18px] dark:brightness-[1.4]"
+                      className="size-4 dark:brightness-[1.4]"
                       height={18}
                       src={SOCIAL_ICON_SRC[social.platform]}
                       width={18}
@@ -191,7 +195,7 @@ export function TeamMemberCard({
                   <button
                     aria-controls={bioPanelId}
                     aria-expanded={isBioOpen}
-                    className={`inline-flex h-9 items-center rounded-full px-2.5 text-[0.65rem] font-bold uppercase tracking-wider ${
+                    className={`inline-flex h-9 items-center rounded-full px-2 text-[0.65rem] font-bold uppercase tracking-wider ${
                       isBioOpen
                         ? "bg-brand text-brand-ink"
                         : "text-brand hover:bg-tint"

app/(public)/team/pageClient.tsx

@@ -209,7 +209,7 @@ export default function TeamPageClient() {
             <div
               aria-busy="true"
               aria-label="Loading current team"
-              className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+              className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4"
               role="status"
             >
               {[0, 1, 2, 3].map((index) => (
@@ -218,7 +218,7 @@ export default function TeamPageClient() {
                   key={index}
                 >
                   <div className="aspect-[4/3] bg-line/10" />
-                  <div className="h-[5.5rem]" />
+                  <div className="h-[7.5rem]" />
                 </div>
               ))}
             </div>
@@ -228,7 +228,7 @@ export default function TeamPageClient() {
           )}
 
           {hasCurrentExecs && (
-            <div className="animate-fade-in grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+            <div className="animate-fade-in grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
               {visibleCurrentExecs.map((member) => (
                 <TeamMemberCard key={member.$key} member={member} />
               ))}
@@ -260,7 +260,7 @@ export default function TeamPageClient() {
                   <h3 className="mb-2 text-base font-semibold text-ink/80">
                     {group.term}
                   </h3>
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
+                  <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
                     {group.members.map((member) => (
                       <TeamMemberCard
                         isAlumni

app/admin/analytics/page.tsx

@@ -46,7 +46,7 @@ const Stat = ({
 }) => {
   const tile = (
     <div
-      className={`relative h-full animate-rise-in rounded-[20px] border-2 border-line p-4 shadow-brut-sm transition duration-[var(--dur)] ease-smooth ${
+      className={`relative h-full animate-rise-in rounded-[16px] border-2 border-line p-3.5 shadow-brut-sm transition duration-[var(--dur)] ease-smooth ${
         href
           ? "group-hover:-translate-y-0.5 group-hover:bg-tint group-hover:shadow-[3px_5px_0_0_var(--shade)] motion-reduce:group-hover:translate-y-0"
           : "hover:shadow-[3px_3px_0_0_var(--brand)]"

app/admin/documents/[id]/page.tsx

@@ -672,7 +672,7 @@ export default function DocumentDetailPage() {
             <ul className="flex flex-col gap-2">
               {signers.map((signer, index) => (
                 <li
-                  className="flex flex-wrap items-center gap-2 sm:flex-nowrap"
+                  className="flex flex-wrap items-center gap-2 md:flex-nowrap"
                   key={signer.localId}
                 >
                   <SignerSwatch color={signerColor(index)} />

app/admin/documents/templates/page.tsx

@@ -44,14 +44,14 @@ export default function TemplatesPage() {
       <div className="grid gap-4 sm:grid-cols-2">
         {DOCUMENT_TEMPLATES.map((template) => (
           <div
-            className="animate-fade-in rounded-[20px] border-2 border-line bg-surface p-5 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]"
+            className="animate-fade-in rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]"
             key={template.id}
           >
             <h2 className="text-base font-extrabold text-ink">
               {template.name}
             </h2>
             <p className="mt-1 text-sm text-subtle">{template.blurb}</p>
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className="mt-3 flex flex-wrap gap-2">
               <Button asChild size="sm" variant="primary">
                 <a href={templateFileUrl(template.id, "docx")}>
                   <Download aria-hidden />

app/admin/events/page.tsx

@@ -46,7 +46,7 @@ function EventRow({
   const recurrence = getRecurrenceLabel(event);
 
   return (
-    <li className="flex flex-wrap items-start gap-4 rounded-[20px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-5">
+    <li className="flex flex-wrap items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-3 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-4">
       <div className="relative size-16 shrink-0 overflow-hidden rounded-[10px] border-2 border-line bg-tint">
         {event.image?.url ? (
           <Image

app/admin/layout.tsx

@@ -5,19 +5,21 @@ import { useRouter, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, LogOut } from "lucide-react";
 import { LoginForm } from "@/components/admin/login-form";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { SessionProvider, useSession } from "./session";
 import { PaletteProvider, SearchButton } from "./palette";
 import { AskHost } from "./ask";
-import { sectionFor } from "./sections";
+import { AdminRail, AdminTabBar } from "./nav";
+import { sectionFor, visibleSections } from "./sections";
 
 function AdminShell({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
   const { user, loading, refresh } = useSession();
   const [mailAddress, setMailAddress] = useState<string | null>(null);
+  const [hasMailbox, setHasMailbox] = useState<boolean | null>(null);
 
   useEffect(() => {
     if (!user?.isExecutive) return;
@@ -39,7 +41,10 @@ function AdminShell({ children }: { children: React.ReactNode }) {
     fetch("/api/mail/me")
       .then((res) => (res.ok ? res.json() : null))
       .then((data: { email: string | null } | null) => {
-        if (data) setMailAddress(data.email);
+        if (data) {
+          setMailAddress(data.email);
+          setHasMailbox(Boolean(data.email));
+        }
       })
       .catch(() => {});
   }, [user?.isExecutive]);
@@ -91,9 +96,10 @@ function AdminShell({ children }: { children: React.ReactNode }) {
 
   const section = sectionFor(pathname);
   const onMenu = pathname === "/admin";
+  const sections = visibleSections(user, hasMailbox);
 
   return (
-    <PaletteProvider hasMail={Boolean(mailAddress)} onLogout={handleLogout}>
+    <PaletteProvider hasMail={hasMailbox} onLogout={handleLogout}>
       <div className="flex min-h-screen flex-col">
         <header className="flex items-center gap-3 border-b-2 border-line px-4 py-2.5 sm:px-6">
           {onMenu ? (
@@ -108,23 +114,11 @@ function AdminShell({ children }: { children: React.ReactNode }) {
               <span className="font-extrabold text-ink">Admin</span>
             </span>
           ) : (
-            <Link
-              href="/admin"
-              className="group flex items-center gap-2 rounded-[10px] border-2 border-line px-3 py-1.5 text-sm font-bold text-ink hover:bg-tint"
-            >
-              <span
-                aria-hidden
-                className="transition-[translate] duration-[var(--dur)] ease-smooth group-hover:-translate-x-0.5 motion-reduce:group-hover:translate-x-0"
-              >
-                ←
-              </span>{" "}
-              Menu
-            </Link>
-          )}
-          {section && (
-            <span className="truncate font-extrabold text-ink">
-              {section.name}
-            </span>
+            section && (
+              <span className="min-w-0 flex-1 truncate font-extrabold text-ink">
+                {section.name}
+              </span>
+            )
           )}
 
           <div className="ml-auto flex items-center gap-2 sm:gap-3">
@@ -148,17 +142,29 @@ function AdminShell({ children }: { children: React.ReactNode }) {
             </Link>
             <button
               onClick={handleLogout}
-              className="rounded-[10px] border-2 border-line px-3 py-1.5 text-sm font-bold text-ink hover:bg-tint"
+              aria-label="Log out"
+              title="Log out"
+              className="inline-flex h-9 items-center gap-1 rounded-[10px] border-2 border-line px-2 text-sm font-bold text-ink hover:bg-tint sm:px-3"
             >
-              Log out
+              <LogOut className="size-4" aria-hidden />
+              <span className="hidden sm:inline">Log out</span>
             </button>
           </div>
         </header>
 
+        <div className="flex min-h-0 flex-1">
+          <aside className="hidden md:flex md:w-14 md:flex-col md:border-r-2 md:border-line lg:w-52">
+            <AdminRail sections={sections} pathname={pathname} />
+          </aside>
+          <main
+            className="min-h-0 flex-1 animate-fade-in overflow-y-auto pb-16 md:pb-0"
+            key={pathname}
+          >
+            {children}
+          </main>
+        </div>
+        <AdminTabBar sections={sections} pathname={pathname} />
         <AskHost />
-        <main className="min-h-0 flex-1 animate-fade-in" key={pathname}>
-          {children}
-        </main>
       </div>
     </PaletteProvider>
   );

app/admin/mail/aliases/page.tsx

@@ -30,7 +30,7 @@ const Tile = ({
   detail: string;
   children?: React.ReactNode;
 }) => (
-  <div className="animate-rise-in rounded-[20px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
+  <div className="animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
     <div className="text-xs font-bold uppercase tracking-wide text-subtle">
       {label}
     </div>

app/admin/mail/mailbox-list.tsx

@@ -12,15 +12,15 @@ export function MailboxList({
   onSelect: (id: string) => void;
 }) {
   return (
-    <nav className="flex gap-2 overflow-x-auto pb-1 md:min-h-0 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0">
+    <nav className="flex gap-2 overflow-x-auto pb-1 lg:min-h-0 lg:flex-col lg:overflow-x-visible lg:overflow-y-auto lg:pb-0">
       {mailboxes.map((box) => {
         const active = box.id === selected;
         return (
           <button
             key={box.id}
             type="button"
             onClick={() => onSelect(box.id)}
-            className={`flex shrink-0 items-center justify-between gap-3 rounded-[10px] border-2 border-line px-3 py-2 text-left text-sm font-bold md:shrink ${
+            className={`flex shrink-0 items-center justify-between gap-3 rounded-[10px] border-2 border-line px-3 py-2 text-left text-sm font-bold lg:shrink ${
               active
                 ? "bg-brand text-brand-ink shadow-brut-sm"
                 : "bg-surface text-ink hover:bg-tint"

app/admin/mail/page.tsx

@@ -517,9 +517,9 @@ function MailPage({
     : null;
 
   return (
-    <div className="flex h-[calc(100dvh-3.625rem)] animate-fade-in gap-3 p-3 md:gap-4 md:p-4">
+    <div className="flex h-[calc(100dvh-3.625rem-3.5rem)] animate-fade-in flex-col gap-3 p-3 md:h-[calc(100dvh-3.625rem)] md:gap-4 md:p-4 lg:flex-row">
       <aside
-        className={`min-h-0 shrink-0 flex-col gap-3 md:flex md:w-52 ${open ? "hidden" : "flex"}`}
+        className={`min-h-0 w-full shrink-0 flex-col gap-3 lg:flex lg:w-52 lg:shrink-0 ${open ? "hidden" : "flex"}`}
       >
         {user?.isMailAdmin && (
           <InboxPicker
@@ -590,7 +590,7 @@ function MailPage({
 
         <div className="flex min-h-0 flex-1">
           <div
-            className={`min-h-0 w-full flex-col md:flex md:w-80 md:shrink-0 md:border-r-2 md:border-line ${open ? "hidden" : "flex"}`}
+            className={`min-h-0 w-full flex-col lg:flex lg:w-80 lg:shrink-0 lg:border-r-2 lg:border-line ${open ? "hidden" : "flex"}`}
           >
             <header className="shrink-0 space-y-2 border-b-2 border-line px-4 py-2.5">
               <div className="flex items-baseline justify-between gap-2">
@@ -649,7 +649,7 @@ function MailPage({
           </div>
 
           <div
-            className={`min-h-0 min-w-0 flex-1 flex-col ${open ? "flex" : "hidden md:flex"}`}
+            className={`min-h-0 min-w-0 flex-1 flex-col ${open ? "flex" : "hidden lg:flex"}`}
           >
             {message ? (
               <>
@@ -776,13 +776,13 @@ function MessageActions({
 
   return (
     <div
-      className={`flex flex-wrap items-center gap-1.5 border-b-2 border-line px-3 py-2.5 md:px-5 ${viewing ? "md:hidden" : ""}`}
+      className={`flex flex-wrap items-center gap-1.5 border-b-2 border-line px-3 py-2.5 lg:px-5 ${viewing ? "lg:hidden" : ""}`}
     >
       <button
         type="button"
         onClick={onBack}
         aria-label="Back to the list"
-        className={`${ACTION} md:hidden`}
+        className={`${ACTION} lg:hidden`}
       >
         <ArrowLeft size={15} aria-hidden />
       </button>

app/admin/mail/setup/page.tsx

@@ -17,7 +17,7 @@ const Step = ({
   title: string;
   children: React.ReactNode;
 }) => (
-  <div className="animate-fade-in rounded-[20px] border-2 border-line bg-surface p-5 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]">
+  <div className="animate-fade-in rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]">
     <Icon aria-hidden className="size-5 text-brand" />
     <h2 className="mt-2 text-sm font-extrabold uppercase tracking-wide text-ink">
       {title}