Stack the homepage sections again and drop the divider between them.

Co-authored-by: Cursor <cursoragent@cursor.com>

404.html

@@ -28,7 +28,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261017">
+  <link rel="stylesheet" href="style.css?v=20261018">
 </head>
 <body>
   <a class="skip-link" href="#main">Skip to content</a>

hardware.html

@@ -34,7 +34,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261017">
+  <link rel="stylesheet" href="style.css?v=20261018">
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",

index.html

@@ -34,7 +34,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261017">
+  <link rel="stylesheet" href="style.css?v=20261018">
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -156,7 +156,6 @@
   </header>
 
   <main id="main" class="page">
-    <div class="intro">
     <section class="hero wrap" id="about" aria-labelledby="about-title">
       <div class="hero-content">
         <h1 id="about-title" class="hero-about-title">Hey, I’m Josef.</h1>
@@ -184,7 +183,7 @@
     </section>
 
     <section class="section feature" id="graduately" aria-labelledby="graduately-title">
-      <div class="wrap">
+      <div class="wrap reveal">
         <p class="feature-backdrop" aria-hidden="true">Graduately</p>
         <div class="feature-grid">
           <div class="feature-copy">
@@ -213,7 +212,7 @@
             <img class="feature-icon" src="graduately-icon.webp" width="256" height="256" loading="lazy" decoding="async" alt="">
           </div>
         </div>
-        <ul class="feature-stats reveal">
+        <ul class="feature-stats">
           <li>
             <h3><strong>13</strong> subjects</h3>
             <p>From German and Czech literature to computer networks, maths, AutoCAD and C#.</p>
@@ -233,7 +232,6 @@
         </ul>
       </div>
     </section>
-    </div>
 
     <section class="section" id="services" aria-labelledby="services-title">
       <div class="wrap reveal">

privacy.html

@@ -33,7 +33,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261017">
+  <link rel="stylesheet" href="style.css?v=20261018">
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",

projects.html

@@ -34,7 +34,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261017">
+  <link rel="stylesheet" href="style.css?v=20261018">
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",

style.css

@@ -275,25 +275,10 @@ a:hover {
   padding: 4.5rem 0;
 }
 
-.section + .section,
+.section + .section {
-.intro + .section {
-  position: relative;
   border-top: 0;
 }
 
-.section + .section::before,
-.intro + .section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: min(100% - 2.5rem, var(--max));
-  height: 1px;
-  transform: translateX(-50%);
-  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent);
-  pointer-events: none;
-}
-
 .section-label {
   display: inline-block;
   margin: 0 0 0.75rem;
@@ -324,7 +309,7 @@ a:hover {
   position: relative;
   display: grid;
   align-items: start;
-  padding: 2.75rem 0 1.5rem;
+  padding: 2.75rem 0 3.5rem;
   overflow: hidden;
 }
 
@@ -464,7 +449,6 @@ a:hover {
   --feature-shadow: rgba(0, 0, 0, 0.55);
   --feature-edge: transparent;
   --feature-word: min(11.4vw, 12rem);
-  padding-top: 1.25rem;
   overflow: hidden;
 }
 
@@ -474,7 +458,7 @@ a:hover {
 }
 
 .feature-backdrop {
-  margin: 0 calc(50% - 50vw) -0.35rem;
+  margin: -1.5rem calc(50% - 50vw) 1.25rem;
   font-family: var(--font-display);
   font-size: var(--feature-word);
   font-weight: 800;
@@ -621,9 +605,18 @@ a:hover {
 }
 
 @media (min-width: 900px) {
+  .feature-grid {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  }
+
   .feature .feature-title {
     font-size: clamp(2.25rem, 5.5vw - 0.3rem, 3.75rem);
   }
+
+  .feature-media {
+    align-self: start;
+    margin-top: calc(var(--feature-word) * -0.7);
+  }
 }
 
 @media (min-width: 1000px) {
@@ -632,109 +625,6 @@ a:hover {
   }
 }
 
-/* Hero and Graduately share one composition once the screen can hold both. */
-@media (min-width: 1080px) {
-  .intro {
-    position: relative;
-    display: grid;
-    grid-template-columns: minmax(0, 42rem) minmax(15rem, 1fr);
-    column-gap: clamp(2.25rem, 3vw, 3.25rem);
-    align-items: start;
-    justify-content: start;
-    width: auto;
-    max-width: 81rem;
-    margin-left: max(1.25rem, calc((100% - var(--max)) / 2));
-    margin-right: 3rem;
-  }
-
-  .intro::after {
-    content: "";
-    position: absolute;
-    z-index: 0;
-    top: 8%;
-    right: 0;
-    width: min(32rem, 48%);
-    height: min(32rem, 48%);
-    border-radius: 50%;
-    border: 1px solid var(--line);
-    background:
-      radial-gradient(circle at 35% 35%, var(--sheen), transparent 55%),
-      conic-gradient(from 210deg at 50% 50%, transparent 0 55%, var(--glow) 70%, transparent 100%);
-    opacity: 0.85;
-    animation: drift 18s var(--ease) infinite alternate;
-    pointer-events: none;
-  }
-
-  .intro .hero {
-    grid-column: 1;
-    grid-row: 1;
-    width: auto;
-    margin: 0;
-    padding: 2.75rem 0 0;
-    overflow: visible;
-  }
-
-  .intro .hero::after {
-    display: none;
-  }
-
-  .intro .feature,
-  .intro .feature > .wrap,
-  .intro .feature-grid {
-    display: contents;
-  }
-
-  .intro .feature-backdrop {
-    grid-column: 1 / -1;
-    grid-row: 1 / 3;
-    align-self: center;
-    justify-self: stretch;
-    min-width: 0;
-    width: auto;
-    margin: 0;
-    overflow: hidden;
-    z-index: 0;
-    mask-image:
-      linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
-      linear-gradient(90deg, transparent 0 46%, #000 68%);
-    mask-composite: intersect;
-    -webkit-mask-image:
-      linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%),
-      linear-gradient(90deg, transparent 0 46%, #000 68%);
-    -webkit-mask-composite: source-in;
-  }
-
-  .intro .feature-copy {
-    grid-column: 1;
-    grid-row: 2;
-    position: relative;
-    z-index: 1;
-    padding-top: 2.5rem;
-  }
-
-  .intro .feature-media {
-    grid-column: 2;
-    grid-row: 1 / 3;
-    align-self: center;
-    justify-self: start;
-    position: relative;
-    z-index: 1;
-    width: min(100%, 36rem);
-    margin: 0.5rem 0 0;
-    padding: 0 0 1.25rem;
-  }
-
-  .intro .feature-stats {
-    grid-column: 1 / -1;
-    grid-row: 3;
-    justify-self: start;
-    position: relative;
-    z-index: 1;
-    width: min(100%, var(--max));
-    margin-top: 3.25rem;
-  }
-}
-
 /* —— Services —— */
 .service-list {
   list-style: none;
@@ -1269,7 +1159,7 @@ a:hover {
   .hero {
     min-height: auto;
     padding-top: 2.5rem;
-    padding-bottom: 1.25rem;
+    padding-bottom: 3.25rem;
   }
 
   .hero::after {
@@ -1283,8 +1173,4 @@ a:hover {
   .section {
     padding: 3.25rem 0;
   }
-
-  .section.feature {
-    padding-top: 0.75rem;
-  }
 }