Join the hero and Graduately into one continuous layout.

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

404.html

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

index.html

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

projects.html

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

style.css

@@ -275,8 +275,23 @@ a:hover {
   padding: 4.5rem 0;
 }
 
-.section + .section {
+.section + .section,
-  border-top: 1px solid var(--line);
+.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 {
@@ -309,7 +324,7 @@ a:hover {
   position: relative;
   display: grid;
   align-items: start;
-  padding: 2.75rem 0 3.5rem;
+  padding: 2.75rem 0 1.5rem;
   overflow: hidden;
 }
 
@@ -449,6 +464,7 @@ 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;
 }
 
@@ -458,7 +474,7 @@ a:hover {
 }
 
 .feature-backdrop {
-  margin: 0 calc(50% - 50vw) 1.25rem;
+  margin: 0 calc(50% - 50vw) -0.35rem;
   font-family: var(--font-display);
   font-size: var(--feature-word);
   font-weight: 800;
@@ -468,7 +484,7 @@ a:hover {
   white-space: nowrap;
   color: var(--ink);
   opacity: 0.07;
-  mask-image: linear-gradient(180deg, #000 35%, transparent 105%);
+  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 62%, transparent 100%);
   pointer-events: none;
   user-select: none;
 }
@@ -605,18 +621,9 @@ 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) {
@@ -625,6 +632,109 @@ 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;
@@ -1159,7 +1269,7 @@ a:hover {
   .hero {
     min-height: auto;
     padding-top: 2.5rem;
-    padding-bottom: 3.25rem;
+    padding-bottom: 1.25rem;
   }
 
   .hero::after {
@@ -1173,4 +1283,8 @@ a:hover {
   .section {
     padding: 3.25rem 0;
   }
+
+  .section.feature {
+    padding-top: 0.75rem;
+  }
 }