Merge branch 'fix/gate-name-size': larger name, halves line up on the start page

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/inspiration.md

@@ -194,6 +194,13 @@ Mocked with the real site CSS and real artwork. Screenshots: `mockups/shots/spec
   plus two panels) is interesting, but only with real, different page images, never crops of the cover. J (cover leaning
   on the paper with the one-liner) could be interesting but doesn't work yet. Builder's call: H, G as the alternative.
 
+## Start page name (2026-11-10)
+
+The owner asked for "Lucas Winther" to be bigger on the front page. The two halves across the seam went from nav-d's
+15 px mono / 18 px italic serif to 20 px / 24 px (24/29 was tried first, judged while zoomed to 130%).
+The two halves' labels (01 / work, 02 · off the clock) and enter links (enter work, come in) now line up across the
+seam at rest; the owner asked for that and for less space above the enter links.
+
 ## Decisions so far (summary, 2026-11-09)
 
 - **Start page:** `mockups/nav-d.html`, with two gates (work on the left, off the clock on the right) and a small "wander through everything at once" link to the garden (`nav-c.html` idea).

src/site/components/gate/GateSide.astro

@@ -1,12 +1,14 @@
 ---
 // One half of the start page. Pure HTML: the whole half is a link (the "enter" anchor is stretched over it).
 // side="work" is the technical half, side="personal" the warm one. The content comes in through slots.
+// Both halves' content sits in a .block of the same height, so the labels and the enter links line up across the seam.
 interface Props { side: 'work' | 'personal'; href: string; label: string; enter: string }
 const { side, href, label, enter } = Astro.props;
 ---
 <section class:list={['side', side === 'work' ? 'tech' : 'art']} id={side === 'work' ? 'tech' : 'art'} aria-label={label}>
   <slot name="decor" />
   <div class="inner">
+    <div class="block">
     <slot />
     <a class={side === 'work' ? 't-enter' : 'a-enter'} href={href} data-enter={side}>
       {side === 'work' && <span class="arrow" aria-hidden="true">←</span>}
@@ -14,5 +16,6 @@ const { side, href, label, enter } = Astro.props;
       {side === 'personal' && <span class="arrow" aria-hidden="true">→</span>}
       <kbd aria-hidden="true">{side === 'work' ? '←' : '→'}</kbd>
     </a>
+    </div>
   </div>
 </section>

src/site/styles/gate.css

@@ -13,6 +13,14 @@
 
 .inner { position: absolute; inset: 0; padding: 96px 48px 40px; display: flex; flex-direction: column; justify-content: center; width: max(50vw, 560px); }
 .tech .inner { right: 0; left: auto; }
+/* Same height on both halves, enter link at the foot: the two labels and the two enter links share a line at rest
+   (hovering the personal half still grows it). --block fits the taller, personal half. */
+.block { display: flex; flex-direction: column; align-self: stretch; align-items: inherit; min-height: var(--block, 404px); }
+.block > .t-enter, .block > .a-enter { margin-top: auto; padding-top: 22px; }
+/* the work half is shorter: its spare height is shared between the gap above the panel and the one above "enter work" */
+.tech .block > .t-panel { margin-top: auto; }
+.tech .block > .lede { padding-bottom: 28px; }
+.t-label { margin-top: 8px; } /* centres the small mono label on the taller handwritten one */
 .art .inner { left: 0; }
 
 /* the enter link is stretched over its whole half, so the half is one big link */
@@ -42,7 +50,7 @@
 .t-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease), opacity .25s; }
 .gate.lean-tech .t-more, .gate:has(.tech:focus-within) .t-more { max-height: 200px; opacity: 1; }
 @media (hover: hover) { .gate:has(.tech:hover) .t-more { max-height: 200px; opacity: 1; } }
-@media (hover: none) { .t-more, .a-more { max-height: 200px; opacity: 1; } }
+@media (hover: none) { .t-more, .a-more { max-height: 200px; opacity: 1; margin-top: 18px; } }
 .t-enter, .a-enter { position: static; color: inherit; text-decoration: none; }
 .t-enter { margin-top: 22px; font-family: var(--mono); font-size: 13px; display: inline-flex; gap: 10px; align-items: center; }
 .t-enter kbd, .a-enter kbd, .foot kbd { font-family: var(--mono); font-size: 10px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; opacity: .7; }
@@ -87,19 +95,20 @@
   .art:hover .a-enter .arrow { transform: translateX(4px); }
   .art:hover .squiggle path { stroke-dashoffset: 0; }
 }
-.a-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease), opacity .25s; font-size: 15px; color: var(--a-mute); margin-top: 18px; }
+.a-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s var(--ease), opacity .25s, margin-top .35s var(--ease); font-size: 15px; color: var(--a-mute); margin-top: 0; }
 .a-more a { position: relative; z-index: 2; color: var(--a-ink); text-decoration-color: var(--a-rose); }
-.gate.lean-art .a-more, .gate:has(.art:focus-within) .a-more { max-height: 200px; opacity: 1; }
-@media (hover: hover) { .gate:has(.art:hover) .a-more { max-height: 200px; opacity: 1; } }
+.gate.lean-art .a-more, .gate:has(.art:focus-within) .a-more { max-height: 200px; opacity: 1; margin-top: 18px; }
+@media (hover: hover) { .gate:has(.art:hover) .a-more { max-height: 200px; opacity: 1; margin-top: 18px; } }
 .a-enter { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 17px; display: inline-flex; gap: 10px; align-items: center; align-self: flex-start; }
 .squiggle { position: absolute; right: 36px; top: 34px; width: 120px; opacity: .55; }
 .squiggle path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset .6s var(--ease); }
 @media (hover: none) { .squiggle path { stroke-dashoffset: 0; } }
 
 /* ---------- name across the seam ---------- */
-.name-l, .name-r { position: absolute; top: 34px; z-index: 2; font-size: 15px; white-space: nowrap; }
-.name-l { right: 14px; font-family: var(--mono); font-weight: 500; }
-.name-r { left: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; top: 31px; }
+/* The name across the seam. Larger than nav-d's 15/18px on the owner's request (2026-11-10). */
+.name-l, .name-r { position: absolute; top: 32px; z-index: 2; font-size: 20px; white-space: nowrap; }
+.name-l { right: 18px; font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
+.name-r { left: 18px; font-family: var(--serif); font-style: italic; font-size: 24px; top: 28px; }
 
 /* ---------- third, small way in ---------- */
 .garden-link { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 10px;
@@ -122,10 +131,12 @@
   .gate { flex-direction: column; }
   .side { flex: none !important; }
   .inner { position: relative; width: 100% !important; text-align: left !important; align-items: flex-start !important; min-height: 520px; padding: 70px 24px 32px; }
+  .block { min-height: 0; }
+  .t-label { margin-top: 0; }
   .name-l, .name-r, .readout { display: none; }
   .collage { max-width: 100%; }
   .garden-link { position: static; transform: none; margin: 18px 24px; align-self: flex-start; left: auto !important; }
-  .t-more, .a-more { max-height: 200px; opacity: 1; }
+  .t-more, .a-more { max-height: 200px; opacity: 1; margin-top: 18px; }
   .foot { flex-direction: column; padding: 14px 24px; align-items: flex-start; }
 }