From 7f80f40fde3a6063ad2929ca5454f1fa25780b1b Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Sat, 9 May 2026 05:40:59 +0300
Subject: [PATCH 1/3] refactor(close): use wordmark-light.svg for brand mark

Replace the hand-composed "decdn_" spans with the canonical
public/wordmark-light.svg, matching the navbar pattern. Sized via a
dedicated fluid clamp so the mark stays substantial on phones, with a
height-relative negative margin-left to push it past the content edge.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/site/Close.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/site/Close.tsx b/components/site/Close.tsx
index 4055e34..ec44a98 100644
--- a/components/site/Close.tsx
+++ b/components/site/Close.tsx
@@ -18,16 +18,19 @@ export function Close() {
             Contact
           </h2>
 
-          <div
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
             data-reveal
-            className="hug flex items-baseline gap-2 font-semibold tracking-[-0.05em]"
-            style={{ fontSize: "var(--fs-display)", lineHeight: "0.86" }}
-          >
-            <span>decdn</span>
-            <span aria-hidden style={{ color: "var(--whisper)" }}>
-              _
-            </span>
-          </div>
+            src="/wordmark-light.svg"
+            alt="decdn_"
+            className="block"
+            style={{
+              ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",
+              height: "var(--wordmark-h)",
+              width: "auto",
+              marginLeft: "calc(var(--wordmark-h) * -0.18)",
+            }}
+          />
 
           {/* prettier-ignore */}
           <p

From bb1bb59986cb7b0bf41f5757d7b9550b75ba6af4 Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Sat, 9 May 2026 05:48:50 +0300
Subject: [PATCH 2/3] fix(a11y): drop decorative underscore from wordmark alt
 text

Screen readers were announcing the trailing "_" literally
("decdn underscore"). The previous text-based markup hid it via
aria-hidden; replicate that intent for the <img> by removing it from
the alt. Applied to Close and to both Chrome navbar variants for
consistency.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/site/Chrome.tsx | 4 ++--
 components/site/Close.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
index ec1a69d..528eac3 100644
--- a/components/site/Chrome.tsx
+++ b/components/site/Chrome.tsx
@@ -132,7 +132,7 @@ export function Chrome() {
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src="/wordmark-light.svg"
-            alt="decdn_"
+            alt="decdn"
             width={112}
             height={30}
             className={onDark ? "hidden" : "block"}
@@ -140,7 +140,7 @@ export function Chrome() {
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src="/wordmark-dark.svg"
-            alt="decdn_"
+            alt="decdn"
             width={112}
             height={30}
             className={onDark ? "block" : "hidden"}
diff --git a/components/site/Close.tsx b/components/site/Close.tsx
index ec44a98..8a671ce 100644
--- a/components/site/Close.tsx
+++ b/components/site/Close.tsx
@@ -22,7 +22,7 @@ export function Close() {
           <img
             data-reveal
             src="/wordmark-light.svg"
-            alt="decdn_"
+            alt="decdn"
             className="block"
             style={{
               ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",

From 93898d18d9c69a61d16e73b74e39f6ac66d8904e Mon Sep 17 00:00:00 2001
From: yigitdot <yigitgurbulak4@gmail.com>
Date: Sat, 9 May 2026 06:12:12 +0300
Subject: [PATCH 3/3] fix(close): set intrinsic dimensions on wordmark img to
 prevent CLS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Without width/height attrs the browser falls back to the 300x150
replaced-element default until the SVG resource is fetched, then
re-flows to the real 411:110 ratio — a horizontal layout shift in
the surrounding flex column. The HTML attrs only feed the browser's
aspect-ratio reservation; CSS continues to control rendered size via
var(--wordmark-h). Mirrors the existing Chrome.tsx wordmark pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/site/Close.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/site/Close.tsx b/components/site/Close.tsx
index 8a671ce..ad12396 100644
--- a/components/site/Close.tsx
+++ b/components/site/Close.tsx
@@ -23,6 +23,8 @@ export function Close() {
             data-reveal
             src="/wordmark-light.svg"
             alt="decdn"
+            width={411}
+            height={110}
             className="block"
             style={{
               ["--wordmark-h" as string]: "clamp(4.75rem, 14vw, 11.5rem)",