Chiarisce il ruolo platform e migliora testi e presentazione del portfolio

src/components/ai-section.astro

@@ -1,7 +1,7 @@
 ---
 import '@/components/ai-section.css';
 import SectionTitle from '@/components/section-title.astro';
-import { getCopy, type Locale } from '@/i18n';
+import { getCopy, hrefFor, type Locale } from '@/i18n';
 
 type Props = {
   locale: Locale;
@@ -19,12 +19,18 @@ const { ai } = copy;
     <SectionTitle num={head.num} title={ai.heading} />
   ) : (
     <h1 class="section-title" data-reveal>
-      <span class="num">{head.num}.</span>{ai.heading}
+      {ai.heading}
       <span class="rule" aria-hidden="true"></span>
     </h1>
   )}
 
-  <div class="plate" data-reveal>
+  {variant === 'section' ? (
+    <div class="ai-summary">
+      <p>{ai.summary}</p>
+      <a class="text-link" href={hrefFor(locale, 'ai')}>{ai.moreLabel}</a>
+    </div>
+  ) : (
+  <div class="plate">
     <p class="eyebrow">{head.eyebrow}</p>
     <div class="prose">
       {ai.paragraphs.map((para, i) => (
@@ -38,4 +44,6 @@ const { ai } = copy;
       </ol>
     </div>
   </div>
+  )}
+  {variant === 'page' && <a class="text-link ai-back" href={`${hrefFor(locale, 'home')}#ai`}>{ai.backLabel}</a>}
 </section>

src/components/ai-section.css

@@ -1,26 +1,30 @@
-/* Every other section is prose sitting on the bare background. This one is
-   enclosed, and it is the only enclosed thing on the page, because it is the
-   only section arguing a position rather than listing facts.
-
-   The fill is --panel, which is barely a shade off --bg, so the border does the
-   separating: a hairline all round and the accent on the leading edge. The
-   emerald-washed grounds separated the surface better but pushed body text to
-   4.39:1, under AA, which is not a trade worth making for a tint. */
+/* The detailed workflow has its own page; home uses the shorter summary. */
 .ai .plate {
   background: var(--panel);
   border: 1px solid var(--line);
   border-left: 2px solid var(--acc);
   border-radius: 3px;
   padding: clamp(24px, 3.4vw, 36px) clamp(20px, 3.4vw, 38px);
-  max-width: 72ch;
 }
 
-/* No other section has one, which is half the point. */
+.ai .ai-summary {
+  max-width: 74ch;
+}
+
+.ai .ai-summary p {
+  margin: 0 0 18px;
+  font-size: 17px;
+  line-height: 1.7;
+}
+
+.ai .ai-back {
+  display: inline-block;
+  margin-top: 28px;
+}
+
 .ai .eyebrow {
   margin: 0 0 20px;
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  letter-spacing: 0.16em;
+  font-size: 14px;
   color: var(--acc);
 }
 
@@ -37,7 +41,7 @@
 
 .ai .prose p + p {
   margin: 16px 0 0;
-  font-size: 15.5px;
+  font-size: 16px;
   line-height: 1.7;
 }
 
@@ -46,11 +50,9 @@
   font-weight: 600;
 }
 
-/* He says three rules, so they are numbered: a reader can check the count
-   without recounting, and the numbers make the block scannable at a glance. */
 .ai .rules-lead {
   margin: 20px 0 0;
-  font-size: 15.5px;
+  font-size: 16px;
   line-height: 1.7;
 }
 
@@ -65,7 +67,7 @@
   counter-increment: rule;
   position: relative;
   padding-left: 30px;
-  font-size: 15.5px;
+  font-size: 16px;
   line-height: 1.7;
 }
 

src/components/approach.astro

@@ -17,8 +17,7 @@ const head = copy.sections.approach;
   <div class="grid" data-reveal>
     {copy.approach.map((block) => (
       <div class="block">
-        <p class:list={['block-label', block.tone && `tone-${block.tone}`]}>{block.label}</p>
-        <p class="block-title">{block.title}</p>
+        <h3 class:list={['block-title', block.tone && `tone-${block.tone}`]}>{block.title}</h3>
         <p class="block-body" set:html={block.body} />
       </div>
     ))}

src/components/approach.css

@@ -1,36 +1,20 @@
-/*
- * One column, not a two-by-three grid. Six cards side by side read as a deck of
- * slogans no matter how plainly each one is written; four paragraphs stacked at
- * a reading measure read as somebody talking.
- */
+/* Keep longer prose in a single reading column. */
 .approach .grid {
   display: grid;
   gap: 30px;
   max-width: 70ch;
 }
 
-/* A hairline down the left of each one, so they stay four entries rather than
-   dissolving into a single wall of text. */
 .approach .block {
   padding-left: 18px;
   border-left: 1px solid var(--line);
 }
 
-.approach .block-label {
-  margin: 0 0 8px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  color: var(--acc);
-}
-
-/* The art block's lilac, the one place a second colour appears here. */
-.approach .block-label.tone-root {
+/* Lilac marks the web-design background. */
+.approach .block-title.tone-root {
   color: var(--root);
 }
 
-/* His own titles, and they carry an argument rather than a slogan, so they get
-   the line back that mine did not deserve. */
 .approach .block-title {
   margin: 0 0 9px;
   font-size: 17.5px;
@@ -43,13 +27,11 @@
 
 .approach .block-body {
   margin: 0;
-  font-size: 15.5px;
+  font-size: 16px;
   line-height: 1.75;
   color: var(--body);
 }
 
-/* The lead opens the sentence instead of sitting above it as a headline, which
-   is what turned these into slogans. One per block, and nothing else lifted. */
 .approach .block-body b {
   color: var(--head);
   font-weight: 600;

src/components/contact.astro

@@ -23,6 +23,7 @@ const cvFile = locale === 'it' ? 'andrea-lisi-cv-it.pdf' : 'andrea-lisi-cv.pdf';
     </div>
 
     <div class="row">
+      <a class="contact-email" href="mailto:lisandr84@gmail.com">{copy.contact.writeLabel}<Icon name="mail" /></a>
       <a class="cv" href={`/${cvFile}`} download={cvFile}>
         {copy.hero.buttons.cv}
       </a>
@@ -44,9 +45,6 @@ const cvFile = locale === 'it' ? 'andrea-lisi-cv-it.pdf' : 'andrea-lisi-cv.pdf';
       >
         <Icon name="linkedin" />
       </a>
-      <a class="social" href="mailto:lisandr84@gmail.com" aria-label={copy.contact.email}>
-        <Icon name="mail" />
-      </a>
       <a
         class="social"
         href="https://www.instagram.com/alandr.1984/"

src/components/contact.css

@@ -1,75 +1,54 @@
-.contact {
-  padding-bottom: clamp(80px, 13vh, 130px);
+.section.contact {
+  margin-top: 32px;
+  padding: 38px clamp(22px, 4vw, 40px) 44px;
+  margin-bottom: 56px;
+  background: var(--panel);
+  border-top: 2px solid var(--acc);
+  border-radius: 0 0 5px 5px;
 }
-
-.contact .links {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 32px;
-}
-
-/* Two blocks, not one paragraph. The first is the invitation and stays one
-   breath long; the second gives the reason at body size, set in from a
-   hairline. Before this it was a single 26px block, larger than the section
-   title above it, which read as a mistake. */
-.contact .invitation {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-/* The mail icon below already holds the address, so printing it again would
-   say the same thing twice. */
 .contact .invite {
   margin: 0;
-  max-width: 30ch;
-  font-size: 20px;
+  max-width: 48ch;
+  font-size: clamp(21px, 2.6vw, 27px);
   line-height: 1.45;
-  letter-spacing: -0.01em;
   color: var(--head);
-  /* 500, not 600: at the section title's weight and two pixels off its size,
-     it read as a second heading instead of as the voice. */
   font-weight: 500;
   text-wrap: balance;
 }
-
 .contact .invite-more {
-  margin: 0;
-  max-width: 52ch;
-  padding-left: 18px;
-  border-left: 1px solid var(--acc-line);
-  font-size: 15px;
-  line-height: 1.75;
-  color: var(--body);
+  margin: 16px 0 0;
+  max-width: 64ch;
+  line-height: 1.7;
 }
-
 .contact .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px 18px;
+  gap: 14px 22px;
   align-items: center;
+  margin-top: 28px;
 }
-
-.contact .cv {
-  font-family: var(--font-mono);
-  font-size: 13px;
-  color: var(--body);
-  margin-right: 8px;
+.contact .contact-email {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--acc);
+  color: var(--bg);
+  padding: 12px 18px;
+  font-weight: 600;
+  border-radius: 4px;
+}
+.contact .contact-email:hover {
+  background: var(--head);
 }
-
-.contact .cv:hover,
-.contact .cv:focus-visible {
-  color: var(--acc);
+.contact .cv {
+  padding: 10px 0;
+  text-decoration: underline;
+  text-underline-offset: 5px;
 }
-
 .contact .social {
   display: inline-flex;
-  padding: 4px;
-  color: var(--body);
-}
-
-.contact .social:hover,
-.contact .social:focus-visible {
-  color: var(--acc);
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 44px;
 }

src/components/focus.css

@@ -2,7 +2,6 @@
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 28px 44px;
-  max-width: 820px;
 }
 
 .focus .focus-group {
@@ -12,11 +11,8 @@
 
 .focus .focus-group h3 {
   margin: 0 0 10px;
-  font-family: var(--font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 600;
   color: var(--acc);
 }
 
@@ -30,14 +26,14 @@
 }
 
 .focus .focus-group li {
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.45;
   color: var(--body);
 }
 
 .focus .focus-group li:not(:last-child)::after {
   content: " ·";
-  color: var(--line);
+  color: var(--dim);
 }
 
 @media (max-width: 620px) {