From 5681a38087ac92eef144c004bb3609b4b5e915b1 Mon Sep 17 00:00:00 2001
From: Alexander Loren <omgitsalexl@icloud.com>
Date: Wed, 23 Sep 2026 08:10:46 -0700
Subject: [PATCH] Refactored class names to be reusable

---
 .gitignore |   1 +
 index.html | 240 +++++++++++-----------
 styles.css | 576 ++++++++++++++++++++++-------------------------------
 3 files changed, 357 insertions(+), 460 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0be24ec..acab7e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 ### Project ###
 Site*
 website-copy.md
+style-guide.md
 
 ### dotenv ###
 .env
diff --git a/index.html b/index.html
index 419d9b6..bb2c944 100644
--- a/index.html
+++ b/index.html
@@ -15,24 +15,24 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&amp;display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=section-theses">
+    <link rel="stylesheet" href="styles.css?version=reusable-classes">
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
   </head>
 
   <body id="top">
-    <a class="skip-to-main-content-link" href="#main-content">Skip to main content</a>
+    <a class="skip-link label-uppercase" href="#main-content">Skip to main content</a>
 
-    <header class="website-header">
-      <div class="site-width-boundary website-header-inner">
+    <header class="border-bottom-subtle">
+      <div class="content-boundary grid-centered-content">
         <a
-          class="brand-logo-link website-header-logo-link"
+          class="image-link image-link-large-centered"
           href="#top"
           aria-label="Noel Design Atelier, back to top"
         >
           <img
-            class="brand-logo-image website-header-logo-image"
+            class="image-fluid"
             src="images/logo.webp"
             width="4167"
             height="1063"
@@ -41,12 +41,12 @@
           >
         </a>
 
-        <nav class="primary-navigation" aria-label="Primary navigation">
-          <ul class="primary-navigation-list">
-            <li><a class="primary-navigation-link" href="#philosophy">Philosophy</a></li>
-            <li><a class="primary-navigation-link" href="#approach">Approach</a></li>
-            <li><a class="primary-navigation-link" href="#work">Season</a></li>
-            <li><a class="primary-navigation-link" href="#contact">Contact</a></li>
+        <nav class="grid-trailing-content" aria-label="Primary navigation">
+          <ul class="link-row">
+            <li><a class="underline-reveal-link label-uppercase" href="#philosophy">Philosophy</a></li>
+            <li><a class="underline-reveal-link label-uppercase" href="#approach">Approach</a></li>
+            <li><a class="underline-reveal-link label-uppercase" href="#work">Season</a></li>
+            <li><a class="underline-reveal-link label-uppercase" href="#contact">Contact</a></li>
           </ul>
         </nav>
       </div>
@@ -54,34 +54,34 @@
 
     <main id="main-content">
       <section
-        class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
+        class="content-boundary grid-twelve-columns grid-overlapping-introduction isolate-blending surface-paper"
         aria-labelledby="homepage-hero-title"
       >
-        <p class="section-context-label">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
+        <p class="eyebrow-label label-uppercase">Holiday installations <span aria-hidden="true">/</span> Pacific Northwest</p>
 
         <h1
-          class="homepage-hero-title image-overlap-heading-dynamic-inversion animate-header"
+          class="heading-editorial heading-display text-invert-over-image reveal-on-scroll"
           id="homepage-hero-title"
         >
           <span>Composing</span>
           <span>the season.</span>
         </h1>
 
-        <div class="homepage-hero-introduction">
-          <span class="brand-occasion-mark" aria-hidden="true">✦</span>
+        <div class="grid-lower-leading-copy">
+          <span class="decorative-mark" aria-hidden="true">✦</span>
           <p>
             We create holiday installations that welcome you into the season. From the first
             glimpse of greenery to the glow beyond a doorway, each space offers a reason to
             pause and stay a little longer.
           </p>
-          <a class="editorial-text-link" href="#philosophy">
+          <a class="arrow-link label-uppercase" href="#philosophy">
             Step inside <span aria-hidden="true">→</span>
           </a>
         </div>
 
-        <figure class="homepage-hero-image-figure" data-parallax="25">
+        <figure class="grid-overlapping-trailing-image" data-parallax="25">
           <div
-            class="photography-frame photography-frame-tall"
+            class="image-frame aspect-ratio-four-to-five"
             role="img"
             aria-label="Hotel entrance framed by garlands, evergreen trees, and glowing lanterns"
           >
@@ -90,16 +90,16 @@
         </figure>
       </section>
 
-      <section class="editorial-section philosophy-section" id="philosophy" aria-labelledby="philosophy-title">
-        <div class="site-width-boundary">
+      <section class="spaced-bordered-block" id="philosophy" aria-labelledby="philosophy-title">
+        <div class="content-boundary">
           <header>
-            <p class="section-context-label">Our Philosophy</p>
+            <p class="eyebrow-label label-uppercase">Our Philosophy</p>
           </header>
 
-          <div class="philosophy-content-grid">
-            <figure class="philosophy-image-figure" data-parallax="15">
+          <div class="grid-twelve-columns grid-three-part-content">
+            <figure class="grid-leading-image" data-parallax="15">
               <div
-                class="photography-frame photography-frame-portrait"
+                class="image-frame aspect-ratio-three-to-four"
                 role="img"
                 aria-label="Cedar garland and velvet ribbon following a curved staircase"
               >
@@ -107,13 +107,13 @@
               </div>
             </figure>
 
-            <h2 class="editorial-statement-title animate-header" id="philosophy-title">
+            <h2 class="heading-editorial heading-statement reveal-on-scroll" id="philosophy-title">
               The season begins
               <span>with the space.</span>
             </h2>
 
-            <div class="philosophy-supporting-copy">
-              <p class="philosophy-brand-thesis">
+            <div class="grid-trailing-copy paragraph-stack">
+              <p class="text-emphasis label-uppercase">
                 We begin by noticing what makes a place itself.
               </p>
               <p>
@@ -126,7 +126,7 @@
                 of the holidays. We design for that sense of recognition: a room that feels
                 quietly new yet deeply familiar, like returning to somewhere you love.
               </p>
-              <a class="editorial-text-link" href="#approach">
+              <a class="arrow-link label-uppercase" href="#approach">
                 A closer look <span aria-hidden="true">→</span>
               </a>
             </div>
@@ -135,25 +135,25 @@
       </section>
 
       <section
-        class="editorial-section approach-section image-overlap-heading-dynamic-inversion-container"
+        class="spaced-bordered-block clip-overflow isolate-blending surface-paper"
         id="approach"
         aria-labelledby="approach-title"
       >
-        <div class="site-width-boundary">
+        <div class="content-boundary">
           <header>
-            <p class="section-context-label">Our Approach</p>
+            <p class="eyebrow-label label-uppercase">Our Approach</p>
           </header>
 
           <h2
-            class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion animate-header"
+            class="heading-editorial heading-oversized heading-offset-down text-invert-over-image reveal-on-scroll"
             id="approach-title"
           >
             By hand.
           </h2>
 
-          <div class="approach-content-grid">
-            <div class="approach-supporting-copy">
-              <p class="section-brand-thesis">
+          <div class="grid-twelve-columns grid-narrow-copy-wide-image">
+            <div class="grid-leading-copy paragraph-stack">
+              <p class="text-emphasis label-uppercase">
                 We bring the season to life by hand.
               </p>
               <p>
@@ -165,14 +165,14 @@
                 As we work, we adjust the balance and spacing of the details, bringing them into
                 a composition that feels at home in the room.
               </p>
-              <a class="editorial-text-link" href="#work">
+              <a class="arrow-link label-uppercase" href="#work">
                 Imagine the season <span aria-hidden="true">→</span>
               </a>
             </div>
 
-            <figure class="approach-image-figure" data-parallax="25">
+            <figure class="grid-wide-inset-image" data-parallax="25">
               <div
-                class="photography-frame photography-frame-landscape"
+                class="image-frame aspect-ratio-sixteen-to-ten"
                 role="img"
                 aria-label="Hands arranging ribbon, cedar, and brass ornaments on a worktable"
               >
@@ -181,9 +181,9 @@
             </figure>
           </div>
 
-          <div class="approach-principles-grid" aria-label="How we compose a space">
-            <article class="approach-principle">
-              <span class="approach-principle-index" aria-hidden="true">I.</span>
+          <div class="card-grid card-grid-three-columns" aria-label="How we compose a space">
+            <article class="card card-spacious">
+              <span class="card-index" aria-hidden="true">I.</span>
               <h3>Texture</h3>
               <p>
                 We select cedar, velvet, brass, and glass for the way their textures meet. The
@@ -192,8 +192,8 @@
               </p>
             </article>
 
-            <article class="approach-principle">
-              <span class="approach-principle-index" aria-hidden="true">II.</span>
+            <article class="card card-spacious">
+              <span class="card-index" aria-hidden="true">II.</span>
               <h3>Gesture</h3>
               <p>
                 We shape greenery and tie ribbon by hand, working with the natural movement of
@@ -202,8 +202,8 @@
               </p>
             </article>
 
-            <article class="approach-principle">
-              <span class="approach-principle-index" aria-hidden="true">III.</span>
+            <article class="card card-spacious">
+              <span class="card-index" aria-hidden="true">III.</span>
               <h3>Atmosphere</h3>
               <p>
                 We compose the installation as part of the whole room, considering where the eye
@@ -215,16 +215,16 @@
         </div>
       </section>
 
-      <section class="editorial-section work-section" id="work" aria-labelledby="work-title">
-        <div class="site-width-boundary">
-          <header class="numbered-section-heading-on-dark">
-            <p class="section-context-label">Seasonal Possibilities</p>
+      <section class="spaced-bordered-block surface-dark surface-dark-bordered" id="work" aria-labelledby="work-title">
+        <div class="content-boundary">
+          <header>
+            <p class="eyebrow-label label-uppercase">Seasonal Possibilities</p>
           </header>
 
-          <div class="work-heading-grid">
-            <h2 class="oversized-editorial-title animate-header" id="work-title">Gather.</h2>
-            <div class="work-introduction-copy">
-              <p class="section-brand-thesis section-brand-thesis-on-dark">
+          <div class="grid-twelve-columns grid-heading-and-copy">
+            <h2 class="heading-editorial heading-oversized reveal-on-scroll" id="work-title">Gather.</h2>
+            <div class="grid-trailing-introduction paragraph-stack">
+              <p class="text-emphasis label-uppercase text-brass">
                 We create settings that bring people together.
               </p>
               <p>
@@ -236,52 +236,52 @@
             </div>
           </div>
 
-          <div class="work-gallery-grid" aria-label="Imagined holiday settings">
-            <figure class="work-gallery-primary-figure">
+          <div class="grid-twelve-columns grid-staggered-images" aria-label="Imagined holiday settings">
+            <figure class="grid-wide-leading-image">
               <div
-                class="photography-frame photography-frame-wide"
+                class="image-frame aspect-ratio-sixteen-to-nine"
                 role="img"
                 aria-label="A tall evergreen tree lit with warm lights in a grand room"
               >
                 <img src="images/gather-1.webp" alt="A tall evergreen tree lit with warm lights in a grand room" decoding="async">
               </div>
-              <figcaption>
-                <span class="work-project-category">On arrival</span>
-                <span class="work-project-description">
+              <figcaption class="caption-grid">
+                <span class="caption-label label-uppercase">On arrival</span>
+                <span class="caption-description">
                   A tree glowing at the end of a room offers a first glimpse of the celebration
                   within, inviting a guest to slow their step as they enter.
                 </span>
               </figcaption>
             </figure>
 
-            <figure class="work-gallery-secondary-figure">
+            <figure class="grid-tall-trailing-image">
               <div
-                class="photography-frame photography-frame-portrait"
+                class="image-frame aspect-ratio-three-to-four"
                 role="img"
                 aria-label="A holiday table set with greenery and candles for a small gathering"
               >
                 <img src="images/gather-2.webp" alt="A holiday table set with greenery and candles for a small gathering" decoding="async">
               </div>
-              <figcaption>
-                <span class="work-project-category">Around the table</span>
-                <span class="work-project-description">
+              <figcaption class="caption-grid">
+                <span class="caption-label label-uppercase">Around the table</span>
+                <span class="caption-description">
                   A table framed by greenery leaves room for familiar faces and a conversation
                   that carries on long after the last plate is cleared.
                 </span>
               </figcaption>
             </figure>
 
-            <figure class="work-gallery-detail-figure">
+            <figure class="grid-small-inset-image">
               <div
-                class="photography-frame photography-frame-square"
+                class="image-frame aspect-ratio-square"
                 role="img"
                 aria-label="Close view of velvet ribbon tied beside an antique brass ornament"
               >
                 <img src="images/gather-3.webp" alt="Close view of velvet ribbon tied beside an antique brass ornament" decoding="async">
               </div>
-              <figcaption>
-                <span class="work-project-category">A closer look</span>
-                <span class="work-project-description">
+              <figcaption class="caption-grid">
+                <span class="caption-label label-uppercase">A closer look</span>
+                <span class="caption-description">
                   In a fold of velvet or the patina of brass, there is another small discovery.
                   Such details reward a second glance as the evening unfolds.
                 </span>
@@ -291,25 +291,25 @@
         </div>
       </section>
 
-      <section class="editorial-section client-fit-section" id="places" aria-labelledby="client-fit-title">
-        <div class="site-width-boundary">
-          <div class="client-fit-content-grid">
-            <div class="client-fit-heading-content">
-              <p class="section-context-label section-context-label-brass">Who we design for</p>
-              <h2 class="client-fit-title animate-header" id="client-fit-title">Your kind of welcome.</h2>
-              <p class="client-fit-positioning-copy">
+      <section class="spaced-bordered-block surface-red-borderless" id="places" aria-labelledby="client-fit-title">
+        <div class="content-boundary">
+          <div class="grid-twelve-columns grid-overlapping-halves">
+            <div class="grid-leading-layer">
+              <p class="eyebrow-label label-uppercase text-brass">Who we design for</p>
+              <h2 class="heading-editorial heading-large heading-large-raised reveal-on-scroll" id="client-fit-title">Your kind of welcome.</h2>
+              <p class="text-light-introduction">
                 Whether you are welcoming guests for a night or bringing family home for the
                 season, your space holds its own rituals. We design our compositions around the
                 way you welcome people, giving your gatherings a setting that feels like yours.
               </p>
-              <a class="editorial-text-link editorial-text-link-light" href="#contact">
+              <a class="arrow-link label-uppercase text-paper" href="#contact">
                 Start a conversation <span aria-hidden="true">→</span>
               </a>
             </div>
 
-            <figure class="client-fit-image-figure" data-parallax="15">
+            <figure class="grid-trailing-layer" data-parallax="15">
               <div
-                class="photography-frame photography-frame-landscape"
+                class="image-frame aspect-ratio-sixteen-to-ten"
                 role="img"
                 aria-label="An open doorway framed by cedar garland and warm lights"
               >
@@ -318,8 +318,8 @@
             </figure>
           </div>
 
-          <div class="client-fit-category-grid" aria-label="Places and people we design for">
-            <article class="client-fit-category">
+          <div class="card-grid card-grid-four-columns" aria-label="Places and people we design for">
+            <article class="card card-compact">
               <h3>Luxury hospitality</h3>
               <p>
                 We compose entrances and shared spaces in hotels and destination properties
@@ -328,7 +328,7 @@
               </p>
             </article>
 
-            <article class="client-fit-category">
+            <article class="card card-compact">
               <h3>Automotive and flagship retail</h3>
               <p>
                 In showrooms and flagship stores, we choose materials and arrange seasonal
@@ -337,7 +337,7 @@
               </p>
             </article>
 
-            <article class="client-fit-category">
+            <article class="card card-compact">
               <h3>Private estates</h3>
               <p>
                 At home, the season gathers around familiar rituals. We design compositions for
@@ -346,7 +346,7 @@
               </p>
             </article>
 
-            <article class="client-fit-category">
+            <article class="card card-compact">
               <h3>Select events</h3>
               <p>
                 We arrange greenery and light around the places people meet and gather, giving
@@ -358,51 +358,51 @@
         </div>
       </section>
 
-      <section class="editorial-section contact-section" id="contact" aria-labelledby="contact-title">
-        <div class="site-width-boundary contact-content-grid">
-          <div class="contact-heading-content">
-            <p class="section-context-label">Let’s begin</p>
-            <h2 class="contact-title animate-header" id="contact-title">Tell us your story.</h2>
-            <p>
+      <section class="spaced-bordered-block surface-paper" id="contact" aria-labelledby="contact-title">
+        <div class="content-boundary grid-twelve-columns grid-wide-gap">
+          <div class="grid-leading-heading">
+            <p class="eyebrow-label label-uppercase">Let’s begin</p>
+            <h2 class="heading-editorial heading-large reveal-on-scroll" id="contact-title">Tell us your story.</h2>
+            <p class="text-dark-introduction">
               Perhaps you have a place in mind, a tradition you want to carry forward, or simply
               a feeling you would love to create. Tell us a little about it. We would be glad to
               explore what the season could become with you.
             </p>
           </div>
 
-          <form class="project-inquiry-form" action="#contact-confirmation" method="get">
-            <p class="contact-form-disclosure" id="contact-form-disclosure">
+          <form class="grid-trailing-form" action="#contact-confirmation" method="get">
+            <p class="form-disclosure" id="contact-form-disclosure">
               This form is a preview. Anything you enter stays in this page and is not sent to
               the atelier or saved by this website.
             </p>
 
-            <div class="project-inquiry-field-grid">
-              <div class="project-inquiry-field-group">
-                <label for="inquiry-name">Your name</label>
+            <div class="field-grid">
+              <div class="field-group">
+                <label class="label-uppercase" for="inquiry-name">Your name</label>
                 <input id="inquiry-name" type="text" autocomplete="name" required>
               </div>
 
-              <div class="project-inquiry-field-group">
-                <label for="inquiry-email">Email</label>
+              <div class="field-group">
+                <label class="label-uppercase" for="inquiry-email">Email</label>
                 <input id="inquiry-email" type="email" autocomplete="email" required>
               </div>
             </div>
 
-            <div class="project-inquiry-field-group">
-              <label for="inquiry-organization">Your home, property, or organization</label>
+            <div class="field-group">
+              <label class="label-uppercase" for="inquiry-organization">Your home, property, or organization</label>
               <input id="inquiry-organization" type="text" autocomplete="organization" required>
             </div>
 
-            <div class="project-inquiry-field-group">
-              <label for="inquiry-project-brief">What do you have in mind?</label>
+            <div class="field-group">
+              <label class="label-uppercase" for="inquiry-project-brief">What do you have in mind?</label>
               <textarea id="inquiry-project-brief" rows="5" required></textarea>
             </div>
 
-            <button class="project-inquiry-submit-button" type="submit" aria-describedby="contact-form-disclosure">
+            <button class="button-filled label-uppercase" type="submit" aria-describedby="contact-form-disclosure">
               Preview your inquiry <span aria-hidden="true">→</span>
             </button>
 
-            <p class="contact-form-confirmation" id="contact-confirmation" tabindex="-1">
+            <p class="target-notice" id="contact-confirmation" tabindex="-1">
               This is where a confirmation would appear. Your message has not been sent to the
               atelier or saved by this website.
             </p>
@@ -411,16 +411,16 @@
       </section>
     </main>
 
-    <footer class="website-footer">
-      <div class="site-width-boundary website-footer-grid">
-        <div class="website-footer-brand-column">
+    <footer class="surface-dark surface-dark-padded">
+      <div class="content-boundary grid-weighted-columns">
+        <div class="span-full-width-on-tablet">
           <a
-            class="brand-logo-link website-footer-logo-link"
+            class="image-link image-link-small"
             href="#top"
             aria-label="Noel Design Atelier, back to top"
           >
             <img
-              class="brand-logo-image website-footer-logo-image"
+              class="image-fluid image-inverted"
               src="images/logo.webp"
               width="4167"
               height="1063"
@@ -429,11 +429,11 @@
               decoding="async"
             >
           </a>
-          <p>For the welcome you offer and the memories you make.</p>
+          <p class="text-muted-small">For the welcome you offer and the memories you make.</p>
         </div>
 
-        <nav class="website-footer-navigation" aria-label="Footer navigation">
-          <p class="website-footer-column-title">Explore</p>
+        <nav class="link-stack" aria-label="Footer navigation">
+          <p class="column-label label-uppercase">Explore</p>
           <ul>
             <li><a href="#work">Season</a></li>
             <li><a href="#philosophy">Philosophy</a></li>
@@ -442,15 +442,15 @@
           </ul>
         </nav>
 
-        <div class="website-footer-contact-column">
-          <p class="website-footer-column-title">Pacific Northwest</p>
-          <p>We’d love to hear what you have in mind.</p>
-          <a class="editorial-text-link editorial-text-link-light" href="#contact">
+        <div class="space-above-on-mobile">
+          <p class="column-label label-uppercase">Pacific Northwest</p>
+          <p class="text-muted-small">We’d love to hear what you have in mind.</p>
+          <a class="arrow-link label-uppercase text-paper" href="#contact">
             Start a conversation <span aria-hidden="true">→</span>
           </a>
         </div>
 
-        <p class="website-footer-copyright">© 2026 Noel Design Atelier</p>
+        <p class="text-muted-divider">© 2026 Noel Design Atelier</p>
       </div>
     </footer>
   </body>
@@ -460,7 +460,7 @@
       gsap.registerPlugin(ScrollTrigger);
 
       gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
-        gsap.utils.toArray(".animate-header").forEach((header) => {
+        gsap.utils.toArray(".reveal-on-scroll").forEach((header) => {
           gsap.from(header, {
             scrollTrigger: {
               trigger: header,
@@ -478,7 +478,7 @@
           const motion = Number(figure.dataset.parallax);
           if (!Number.isFinite(motion) || motion === 0) return;
 
-          const frame = figure.querySelector(".photography-frame");
+          const frame = figure.querySelector(".image-frame");
 
           gsap.fromTo(figure, {
             y: () => frame.offsetHeight * motion / 200,
diff --git a/styles.css b/styles.css
index c9f6e36..31a3f1d 100644
--- a/styles.css
+++ b/styles.css
@@ -79,7 +79,45 @@ ul {
   outline-offset: 0.3rem;
 }
 
-.skip-to-main-content-link {
+/* Compose layout, typography, surfaces, and components independently.
+   Responsive placement belongs to descriptive layout variants; IDs are anchors only. */
+.grid-twelve-columns {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.label-uppercase {
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.heading-editorial {
+  font-family: var(--font-family-editorial);
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.card-grid {
+  --card-border-color: var(--color-antique-brass);
+
+  display: grid;
+  border-top: 1px solid var(--card-border-color);
+  border-bottom: 1px solid var(--card-border-color);
+}
+
+.card {
+  min-width: 0;
+}
+
+.card + .card {
+  border-left: 1px solid var(--card-border-color);
+}
+
+.card p {
+  margin-top: 1.25rem;
+}
+
+.skip-link {
   position: fixed;
   z-index: 100;
   top: 1rem;
@@ -89,28 +127,26 @@ ul {
   background: var(--color-noel-black);
   color: var(--color-weathered-paper);
   font-size: 0.85rem;
-  font-weight: 600;
   letter-spacing: 0.08em;
   text-decoration: none;
-  text-transform: uppercase;
 }
 
-.skip-to-main-content-link:focus {
+.skip-link:focus {
   transform: translateY(0);
 }
 
-.site-width-boundary {
+.content-boundary {
   width: 100%;
   max-width: var(--site-content-width);
   margin-inline: auto;
   padding-inline: var(--site-horizontal-padding);
 }
 
-.website-header {
+.border-bottom-subtle {
   border-bottom: 1px solid var(--color-subtle-rule);
 }
 
-.website-header-inner {
+.grid-centered-content {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
@@ -118,49 +154,47 @@ ul {
   column-gap: clamp(1.5rem, 3vw, 3rem);
 }
 
-.brand-logo-link {
+.image-link {
   display: block;
   line-height: 0;
   text-decoration: none;
 }
 
-.brand-logo-image {
+.image-fluid {
   display: block;
   width: 100%;
   height: auto;
 }
 
-.website-header-logo-link {
+.image-link-large-centered {
   grid-column: 2;
   justify-self: center;
   width: clamp(18rem, 31vw, 29rem);
 }
 
-.primary-navigation {
+.grid-trailing-content {
   grid-column: 3;
   justify-self: end;
   min-width: 0;
 }
 
-.primary-navigation-list {
+.link-row {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: clamp(1.25rem, 3vw, 3.25rem);
 }
 
-.primary-navigation-link {
+.underline-reveal-link {
   position: relative;
   display: inline-block;
   padding-block: 0.6rem;
   font-size: 0.71rem;
-  font-weight: 600;
   letter-spacing: 0.14em;
   text-decoration: none;
-  text-transform: uppercase;
 }
 
-.primary-navigation-link::after {
+.underline-reveal-link::after {
   position: absolute;
   right: 0;
   bottom: 0.32rem;
@@ -173,15 +207,13 @@ ul {
   transition: transform 180ms ease;
 }
 
-.primary-navigation-link:hover::after,
-.primary-navigation-link:focus-visible::after {
+.underline-reveal-link:hover::after,
+.underline-reveal-link:focus-visible::after {
   transform: scaleX(1);
   transform-origin: left;
 }
 
-.homepage-hero-section {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-overlapping-introduction {
   grid-template-rows: auto auto 1fr;
   column-gap: clamp(1rem, 2vw, 2rem);
   min-height: min(57rem, calc(100vh - var(--website-header-height)));
@@ -190,63 +222,53 @@ ul {
   padding-bottom: clamp(4.5rem, 8vw, 7.5rem);
 }
 
-.section-context-label {
+.eyebrow-label {
   font-size: 0.69rem;
-  font-weight: 600;
   letter-spacing: 0.18em;
-  text-transform: uppercase;
 }
 
-.section-context-label span {
+.eyebrow-label span {
   margin-inline: 0.55rem;
   color: var(--color-antique-brass);
 }
 
-.homepage-hero-section > .section-context-label {
+.grid-overlapping-introduction > .eyebrow-label {
   grid-column: 1 / 7;
   grid-row: 1;
 }
 
-.homepage-hero-title {
+.heading-display {
   position: relative;
   z-index: 2;
   grid-column: 1 / 11;
   grid-row: 2;
   margin-top: clamp(2.8rem, 7vw, 6rem);
-  font-family: var(--font-family-editorial);
   font-size: clamp(4.2rem, 9.8vw, 9.6rem);
-  font-weight: 400;
   letter-spacing: 0.04em;
   line-height: 0.88;
-  text-transform: uppercase;
 }
 
-.homepage-hero-title span {
+.heading-display span {
   display: block;
 }
 
-.image-overlap-heading-dynamic-inversion-container {
+.isolate-blending {
   isolation: isolate;
 }
 
-.homepage-hero-section.image-overlap-heading-dynamic-inversion-container,
-.approach-section.image-overlap-heading-dynamic-inversion-container {
-  background-color: var(--color-weathered-paper);
-}
-
-.image-overlap-heading-dynamic-inversion {
+.text-invert-over-image {
   color: var(--color-noel-black);
 }
 
 @supports (mix-blend-mode: difference) {
-  .image-overlap-heading-dynamic-inversion {
+  .text-invert-over-image {
     color: var(--color-weathered-paper);
     filter: grayscale(1);
     mix-blend-mode: difference;
   }
 }
 
-.homepage-hero-introduction {
+.grid-lower-leading-copy {
   align-self: end;
   grid-column: 1 / 5;
   grid-row: 3;
@@ -254,14 +276,14 @@ ul {
   padding-top: clamp(3rem, 8vw, 8rem);
 }
 
-.brand-occasion-mark {
+.decorative-mark {
   display: inline-block;
   margin-bottom: 1.5rem;
   color: var(--color-antique-brass);
   font-size: 1.6rem;
 }
 
-.homepage-hero-introduction p {
+.grid-lower-leading-copy p {
   max-width: 19rem;
   font-size: 0.84rem;
   letter-spacing: 0.14em;
@@ -269,7 +291,7 @@ ul {
   text-transform: uppercase;
 }
 
-.editorial-text-link {
+.arrow-link {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -278,25 +300,23 @@ ul {
   padding-bottom: 0.45rem;
   border-bottom: 1px solid currentColor;
   font-size: 0.7rem;
-  font-weight: 600;
   letter-spacing: 0.14em;
   line-height: 1.2;
   text-decoration: none;
-  text-transform: uppercase;
 }
 
-.editorial-text-link span {
+.arrow-link span {
   font-size: 1.1rem;
   line-height: 0.7;
   transition: transform 180ms ease;
 }
 
-.editorial-text-link:hover span,
-.editorial-text-link:focus-visible span {
+.arrow-link:hover span,
+.arrow-link:focus-visible span {
   transform: translateX(0.35rem);
 }
 
-.homepage-hero-image-figure {
+.grid-overlapping-trailing-image {
   align-self: end;
   grid-column: 8 / 13;
   grid-row: 2 / 4;
@@ -304,7 +324,7 @@ ul {
   margin-top: clamp(7rem, 11vw, 11rem);
 }
 
-.photography-frame {
+.image-frame {
   position: relative;
   display: flex;
   align-items: center;
@@ -318,7 +338,7 @@ ul {
   text-align: center;
 }
 
-.photography-frame img {
+.image-frame img {
   position: absolute;
   inset: 0;
   display: block;
@@ -331,91 +351,59 @@ ul {
   border-style: solid;
 }
 
-.photography-frame-tall {
+.aspect-ratio-four-to-five {
   aspect-ratio: 4 / 5;
 }
 
-.photography-frame-portrait {
+.aspect-ratio-three-to-four {
   aspect-ratio: 3 / 4;
 }
 
-.photography-frame-landscape {
+.aspect-ratio-sixteen-to-ten {
   aspect-ratio: 16 / 10;
 }
 
-.photography-frame-wide {
+.aspect-ratio-sixteen-to-nine {
   aspect-ratio: 16 / 9;
 }
 
-.photography-frame-square {
+.aspect-ratio-square {
   aspect-ratio: 1;
 }
 
-.editorial-section {
+.spaced-bordered-block {
   padding-block: var(--section-vertical-spacing);
   border-top: 1px solid var(--color-subtle-rule);
   scroll-margin-top: 1rem;
 }
 
-.numbered-section-heading {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: clamp(3rem, 6vw, 6rem);
-  font-size: 0.68rem;
-  font-weight: 600;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-
-.numbered-section-index {
-  font-size: 0.78rem;
-  letter-spacing: 0.03em;
-}
-
-.numbered-section-rule {
-  width: 2.5rem;
-  height: 1px;
-  background: var(--color-antique-brass);
-}
-
-.numbered-section-heading p {
-  margin-left: auto;
-  color: var(--color-antique-brass);
-}
-
-.philosophy-content-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-three-part-content {
   align-items: center;
   gap: clamp(2rem, 3vw, 3.5rem);
 }
 
-.philosophy-image-figure {
+.grid-leading-image {
   grid-column: 1 / 5;
   grid-row: 1;
   min-width: 0;
 }
 
-.editorial-statement-title {
+.heading-statement {
   grid-column: 5 / 10;
   grid-row: 1;
   min-width: 0;
-  font-family: var(--font-family-editorial);
   font-size: clamp(2.4rem, 4vw, 4.15rem);
-  font-weight: 400;
   letter-spacing: 0.035em;
   line-height: 1.03;
-  text-transform: uppercase;
 }
 
-.editorial-statement-title span {
+.heading-statement span {
   display: block;
   margin-top: 0.25em;
   color: var(--color-antique-brass);
 }
 
-.philosophy-supporting-copy {
+.grid-trailing-copy {
   grid-column: 10 / 13;
   grid-row: 1;
   min-width: 0;
@@ -424,55 +412,45 @@ ul {
   font-size: 0.95rem;
 }
 
-.philosophy-brand-thesis,
-.section-brand-thesis {
+.text-emphasis {
   color: var(--color-noel-red);
   font-family: var(--font-family-editorial);
   font-size: 1rem;
-  font-weight: 600;
   letter-spacing: 0.12em;
   line-height: 1.65;
-  text-transform: uppercase;
 }
 
-.section-brand-thesis-on-dark {
+.text-brass {
   color: var(--color-antique-brass);
 }
 
-.philosophy-supporting-copy p + p,
-.approach-supporting-copy p + p,
-.work-introduction-copy p + p {
+.paragraph-stack p + p {
   margin-top: 1.5rem;
 }
 
-.approach-section {
+.clip-overflow {
   overflow: hidden;
 }
 
-.approach-image-overlap-title {
+.heading-offset-down {
   transform: translateY(25%);
 }
 
-.oversized-editorial-title {
+.heading-oversized {
   position: relative;
   z-index: 2;
-  font-family: var(--font-family-editorial);
   font-size: clamp(5rem, 13.2vw, 12.5rem);
-  font-weight: 400;
   letter-spacing: 0.04em;
   line-height: 0.78;
-  text-transform: uppercase;
 }
 
-.approach-content-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-narrow-copy-wide-image {
   align-items: end;
   gap: clamp(2rem, 4vw, 4.5rem);
   margin-top: 0;
 }
 
-.approach-supporting-copy {
+.grid-leading-copy {
   grid-column: 1 / 4;
   min-width: 0;
   padding-top: clamp(3rem, 7vw, 7rem);
@@ -480,30 +458,22 @@ ul {
   font-size: 0.94rem;
 }
 
-.approach-image-figure {
+.grid-wide-inset-image {
   grid-column: 4 / 12;
   min-width: 0;
   margin-top: 0;
 }
 
-.approach-principles-grid {
-  display: grid;
+.card-grid-three-columns {
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-top: clamp(4.5rem, 8vw, 8rem);
-  border-top: 1px solid var(--color-antique-brass);
-  border-bottom: 1px solid var(--color-antique-brass);
 }
 
-.approach-principle {
-  min-width: 0;
+.card-spacious {
   padding: clamp(2rem, 4vw, 3.5rem);
 }
 
-.approach-principle + .approach-principle {
-  border-left: 1px solid var(--color-antique-brass);
-}
-
-.approach-principle-index {
+.card-index {
   display: block;
   margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
   color: var(--color-antique-brass);
@@ -512,8 +482,7 @@ ul {
   letter-spacing: 0.12em;
 }
 
-.approach-principle h3,
-.client-fit-category h3 {
+.card h3 {
   font-family: var(--font-family-editorial);
   font-size: clamp(0.9rem, 1.2vw, 1.1rem);
   font-weight: 400;
@@ -522,36 +491,32 @@ ul {
   text-transform: uppercase;
 }
 
-.approach-principle p {
+.card-spacious p {
   max-width: 28rem;
-  margin-top: 1.25rem;
   color: var(--color-softened-black);
   font-size: 0.9rem;
 }
 
-.work-section {
-  border-top-color: rgba(244, 237, 227, 0.18);
+.surface-dark {
   background: var(--color-noel-black);
   color: var(--color-weathered-paper);
 }
 
-.numbered-section-heading-on-dark .numbered-section-rule {
-  background: rgba(244, 237, 227, 0.45);
+.surface-dark-bordered {
+  border-top-color: rgba(244, 237, 227, 0.18);
 }
 
-.work-heading-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-heading-and-copy {
   align-items: end;
   gap: 2rem;
 }
 
-.work-heading-grid .oversized-editorial-title {
+.grid-heading-and-copy .heading-oversized {
   grid-column: 1 / 9;
   font-size: clamp(5rem, 12.4vw, 11.15rem);
 }
 
-.work-introduction-copy {
+.grid-trailing-introduction {
   grid-column: 9 / 13;
   max-width: 28rem;
   padding-bottom: 0.6rem;
@@ -559,31 +524,29 @@ ul {
   font-size: 0.92rem;
 }
 
-.work-gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-staggered-images {
   align-items: start;
   gap: clamp(2rem, 3vw, 3.5rem);
   margin-top: clamp(4rem, 8vw, 8rem);
 }
 
-.work-gallery-primary-figure {
+.grid-wide-leading-image {
   grid-column: 1 / 9;
   grid-row: 1;
 }
 
-.work-gallery-secondary-figure {
+.grid-tall-trailing-image {
   grid-column: 9 / 13;
   grid-row: 1 / 3;
   margin-top: clamp(5rem, 12vw, 12rem);
 }
 
-.work-gallery-detail-figure {
+.grid-small-inset-image {
   grid-column: 3 / 7;
   grid-row: 2;
 }
 
-.work-gallery-grid figcaption {
+.caption-grid {
   display: grid;
   grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
   gap: clamp(1rem, 2vw, 2.5rem);
@@ -592,139 +555,117 @@ ul {
   border-top: 1px solid rgba(244, 237, 227, 0.34);
 }
 
-.work-project-category {
+.caption-label {
   color: var(--color-antique-brass);
   font-size: 0.67rem;
-  font-weight: 600;
   letter-spacing: 0.12em;
   line-height: 1.45;
-  text-transform: uppercase;
 }
 
-.work-project-description {
+.caption-description {
   max-width: 34rem;
   color: rgba(244, 237, 227, 0.7);
   font-size: 0.82rem;
   line-height: 1.55;
 }
 
-.client-fit-section {
+.surface-red-borderless {
   border-top: 0;
   background: var(--color-noel-red);
   color: var(--color-weathered-paper);
 }
 
-.client-fit-content-grid {
+.grid-overlapping-halves {
   position: relative;
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
   align-items: center;
   gap: clamp(3rem, 7vw, 7rem);
   isolation: isolate;
 }
 
-.client-fit-heading-content {
+.grid-leading-layer {
   position: relative;
   z-index: 2;
   grid-column: 1 / 6;
 }
 
-.section-context-label-brass {
-  color: var(--color-antique-brass);
-}
-
-.client-fit-title,
-.contact-title {
+.heading-large {
   margin-top: 2rem;
-  font-family: var(--font-family-editorial);
   font-size: clamp(3.2rem, 6.5vw, 7rem);
-  font-weight: 400;
   letter-spacing: 0.035em;
   line-height: 0.94;
-  text-transform: uppercase;
 }
 
-.client-fit-title {
+.heading-large-raised {
   position: relative;
   z-index: 3;
 }
 
-.client-fit-positioning-copy {
+.text-light-introduction {
   max-width: 29rem;
   margin-top: 2rem;
   color: rgba(244, 237, 227, 0.82);
 }
 
-.editorial-text-link-light {
+.text-paper {
   color: var(--color-weathered-paper);
 }
 
-.client-fit-image-figure {
+.grid-trailing-layer {
   position: relative;
   z-index: 1;
   grid-column: 6 / 13;
 }
 
-.client-fit-category-grid {
-  display: grid;
+.card-grid-four-columns {
+  --card-border-color: rgba(244, 237, 227, 0.34);
   grid-template-columns: repeat(4, minmax(0, 1fr));
   margin-top: clamp(4rem, 7vw, 7rem);
-  border-top: 1px solid rgba(244, 237, 227, 0.34);
-  border-bottom: 1px solid rgba(244, 237, 227, 0.34);
 }
 
-.client-fit-category {
-  min-width: 0;
+.card-compact {
   padding: clamp(1.75rem, 3vw, 3rem);
 }
 
-.client-fit-category + .client-fit-category {
-  border-left: 1px solid rgba(244, 237, 227, 0.34);
-}
-
-.client-fit-category h3 {
+.card-compact h3 {
   color: var(--color-antique-brass);
 }
 
-.client-fit-category p {
+.card-compact p {
   max-width: 24rem;
-  margin-top: 1.25rem;
   color: rgba(244, 237, 227, 0.76);
   font-size: 0.86rem;
 }
 
-.contact-section {
+.surface-paper {
   background: var(--color-weathered-paper);
 }
 
-.contact-content-grid {
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
+.grid-wide-gap {
   align-items: start;
   gap: clamp(3rem, 8vw, 9rem);
 }
 
-.contact-heading-content {
+.grid-leading-heading {
   grid-column: 1 / 6;
 }
 
-.contact-heading-content > p:last-child {
+.text-dark-introduction {
   max-width: 27rem;
   margin-top: 2rem;
   color: var(--color-softened-black);
 }
 
-.project-inquiry-form {
+.grid-trailing-form {
   grid-column: 7 / 13;
 }
 
 @media (min-width: 64.0625rem) {
-  .project-inquiry-form {
+  .grid-trailing-form {
     margin-inline-end: clamp(2rem, 3.5vw, 4.5rem);
   }
 }
 
-.contact-form-disclosure {
+.form-disclosure {
   margin-bottom: 2.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--color-antique-brass);
@@ -732,27 +673,25 @@ ul {
   font-size: 0.77rem;
 }
 
-.project-inquiry-field-grid {
+.field-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 2rem;
 }
 
-.project-inquiry-field-group {
+.field-group {
   margin-bottom: 2.25rem;
 }
 
-.project-inquiry-field-group label {
+.field-group label {
   display: block;
   margin-bottom: 0.65rem;
   font-size: 0.68rem;
-  font-weight: 600;
   letter-spacing: 0.14em;
-  text-transform: uppercase;
 }
 
-.project-inquiry-field-group input,
-.project-inquiry-field-group textarea {
+.field-group input,
+.field-group textarea {
   display: block;
   width: 100%;
   padding: 0.8rem 0;
@@ -764,17 +703,17 @@ ul {
   resize: vertical;
 }
 
-.project-inquiry-field-group textarea {
+.field-group textarea {
   min-height: 8rem;
 }
 
-.project-inquiry-field-group input:focus,
-.project-inquiry-field-group textarea:focus {
+.field-group input:focus,
+.field-group textarea:focus {
   border-bottom-color: var(--color-noel-red);
   box-shadow: 0 1px 0 var(--color-noel-red);
 }
 
-.project-inquiry-submit-button {
+.button-filled {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -784,24 +723,22 @@ ul {
   background: var(--color-noel-black);
   color: var(--color-weathered-paper);
   font-size: 0.72rem;
-  font-weight: 600;
   letter-spacing: 0.14em;
-  text-transform: uppercase;
   transition: background-color 180ms ease, color 180ms ease;
   -webkit-appearance: none;
 }
 
-.project-inquiry-submit-button:hover,
-.project-inquiry-submit-button:focus-visible {
+.button-filled:hover,
+.button-filled:focus-visible {
   background: var(--color-antique-brass);
   color: var(--color-noel-black);
 }
 
-.project-inquiry-submit-button span {
+.button-filled span {
   font-size: 1.2rem;
 }
 
-.contact-form-confirmation {
+.target-notice {
   display: none;
   margin-top: 1.5rem;
   padding: 1rem;
@@ -809,49 +746,44 @@ ul {
   background: rgba(176, 152, 123, 0.18);
 }
 
-.contact-form-confirmation:target {
+.target-notice:target {
   display: block;
 }
 
-.website-footer {
+.surface-dark-padded {
   padding-block: clamp(4rem, 8vw, 7rem) 2rem;
-  background: var(--color-noel-black);
-  color: var(--color-weathered-paper);
 }
 
-.website-footer-grid {
+.grid-weighted-columns {
   display: grid;
   grid-template-columns: 2fr 1fr 2fr;
   gap: clamp(2.5rem, 7vw, 8rem);
 }
 
-.website-footer-logo-link {
+.image-link-small {
   width: clamp(10rem, 15vw, 13rem);
 }
 
-.website-footer-logo-image {
+.image-inverted {
   opacity: 0.92;
   filter: invert(1);
 }
 
-.website-footer-brand-column > p,
-.website-footer-contact-column > p:not(.website-footer-column-title) {
+.text-muted-small {
   max-width: 19rem;
   margin-top: 1.75rem;
   color: rgba(244, 237, 227, 0.62);
   font-size: 0.82rem;
 }
 
-.website-footer-column-title {
+.column-label {
   margin-bottom: 1.4rem;
   color: var(--color-antique-brass);
   font-size: 0.66rem;
-  font-weight: 600;
   letter-spacing: 0.16em;
-  text-transform: uppercase;
 }
 
-.website-footer-navigation a {
+.link-stack a {
   display: inline-block;
   padding-block: 0.25rem;
   color: rgba(244, 237, 227, 0.76);
@@ -861,12 +793,12 @@ ul {
   text-transform: uppercase;
 }
 
-.website-footer-navigation a:hover,
-.website-footer-navigation a:focus-visible {
+.link-stack a:hover,
+.link-stack a:focus-visible {
   color: var(--color-weathered-paper);
 }
 
-.website-footer-copyright {
+.text-muted-divider {
   grid-column: 1 / -1;
   margin-top: 3rem;
   padding-top: 1.5rem;
@@ -877,22 +809,22 @@ ul {
   text-transform: uppercase;
 }
 
-@media (min-width: 64.0625rem) and (max-width: 80rem) {
-  .philosophy-content-grid {
+@media (max-width: 64rem), (min-width: 64.0625rem) and (max-width: 80rem) {
+  .grid-three-part-content {
     align-items: start;
   }
 
-  .philosophy-image-figure {
+  .grid-leading-image {
     grid-column: 1 / 6;
     grid-row: 1 / span 2;
   }
 
-  .editorial-statement-title {
+  .heading-statement {
     grid-column: 6 / 13;
     grid-row: 1;
   }
 
-  .philosophy-supporting-copy {
+  .grid-trailing-copy {
     grid-column: 6 / 13;
     grid-row: 2;
     max-width: 32rem;
@@ -901,13 +833,13 @@ ul {
 }
 
 @media (min-width: 64.0625rem) and (max-width: 75rem) {
-  .primary-navigation-list {
+  .link-row {
     gap: 1.25rem;
   }
 }
 
 @media (max-width: 64rem) {
-  .website-header-inner {
+  .grid-centered-content {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -916,247 +848,221 @@ ul {
     gap: 1.5rem;
   }
 
-  .website-header-logo-link {
+  .image-link-large-centered {
     width: min(20rem, 76vw);
   }
 
-  .primary-navigation {
+  .grid-trailing-content {
     width: 100%;
   }
 
-  .primary-navigation-list {
+  .link-row {
     justify-content: center;
     flex-wrap: wrap;
     gap: 0.6rem clamp(1.25rem, 3vw, 2rem);
   }
 
-  .homepage-hero-section {
+  .grid-overlapping-introduction {
     min-height: auto;
   }
 
-  .homepage-hero-title {
+  .heading-display {
     grid-column: 1 / 13;
     font-size: clamp(4rem, 11.5vw, 7rem);
   }
 
-  .homepage-hero-introduction {
+  .grid-lower-leading-copy {
     grid-column: 1 / 6;
   }
 
-  .homepage-hero-image-figure {
+  .grid-overlapping-trailing-image {
     grid-column: 7 / 13;
   }
 
-  .philosophy-content-grid {
-    align-items: start;
-  }
-
-  .philosophy-image-figure {
-    grid-column: 1 / 6;
-    grid-row: 1 / span 2;
-  }
-
-  .editorial-statement-title {
-    grid-column: 6 / 13;
-    grid-row: 1;
-  }
-
-  .philosophy-supporting-copy {
-    grid-column: 6 / 13;
-    grid-row: 2;
-    max-width: 32rem;
-    margin-top: 2rem;
-  }
-
-  .approach-supporting-copy {
+  .grid-leading-copy {
     grid-column: 1 / 5;
   }
 
-  .approach-content-grid {
+  .grid-narrow-copy-wide-image {
     align-items: start;
     margin-top: 0;
   }
 
-  .approach-image-figure {
+  .grid-wide-inset-image {
     grid-column: 5 / 13;
     margin-top: 0;
   }
 
-  .work-heading-grid .oversized-editorial-title {
+  .grid-heading-and-copy .heading-oversized {
     grid-column: 1 / 8;
     font-size: clamp(5rem, 10.6vw, 6.85rem);
   }
 
-  .work-introduction-copy {
+  .grid-trailing-introduction {
     grid-column: 8 / 13;
   }
 
-  .client-fit-heading-content {
+  .grid-leading-layer {
     grid-column: 1 / 7;
   }
 
-  .client-fit-image-figure {
+  .grid-trailing-layer {
     grid-column: 7 / 13;
   }
 
-  .client-fit-category-grid {
+  .card-grid-four-columns {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .client-fit-category:nth-child(3) {
+  .card-compact:nth-child(3) {
     border-left: 0;
   }
 
-  .client-fit-category:nth-child(n + 3) {
-    border-top: 1px solid rgba(244, 237, 227, 0.34);
+  .card-compact:nth-child(n + 3) {
+    border-top: 1px solid var(--card-border-color);
   }
 
-  .contact-heading-content {
+  .grid-leading-heading {
     grid-column: 1 / 6;
   }
 
-  .project-inquiry-form {
+  .grid-trailing-form {
     grid-column: 6 / 13;
   }
 }
 
 @media (max-width: 48rem) {
-  .homepage-hero-title {
+  .heading-display {
     letter-spacing: 0.03em;
   }
 
-  .oversized-editorial-title {
+  .heading-oversized {
     letter-spacing: 0.03em;
   }
 
-  .website-header-inner {
+  .grid-centered-content {
     padding-block: 1.75rem 1.2rem;
     gap: 1.35rem;
   }
 
-  .primary-navigation {
+  .grid-trailing-content {
     width: 100%;
   }
 
-  .primary-navigation-list {
+  .link-row {
     justify-content: center;
     gap: 0.4rem 1.6rem;
     flex-wrap: wrap;
   }
 
-  .homepage-hero-section {
+  .grid-overlapping-introduction {
     display: block;
     padding-top: 2rem;
   }
 
-  .homepage-hero-title {
+  .heading-display {
     margin-top: 3.25rem;
     font-size: clamp(3.7rem, 16vw, 7.1rem);
     line-height: 0.92;
   }
 
-  .homepage-hero-introduction {
+  .grid-lower-leading-copy {
     max-width: 24rem;
     padding-top: 3rem;
   }
 
-  .homepage-hero-image-figure {
+  .grid-overlapping-trailing-image {
     max-width: 31rem;
     margin-top: 3.5rem;
     margin-left: auto;
   }
 
-  .philosophy-content-grid,
-  .approach-content-grid,
-  .work-heading-grid,
-  .work-gallery-grid,
-  .client-fit-content-grid,
-  .contact-content-grid {
+  .grid-twelve-columns {
     display: block;
   }
 
-  .philosophy-image-figure {
+  .grid-leading-image {
     max-width: 28rem;
   }
 
-  .editorial-statement-title {
+  .heading-statement {
     max-width: 37rem;
     margin-top: 3.5rem;
   }
 
-  .philosophy-supporting-copy {
+  .grid-trailing-copy {
     max-width: 27rem;
     margin-top: 2.5rem;
     margin-left: auto;
   }
 
-  .oversized-editorial-title {
+  .heading-oversized {
     font-size: clamp(4rem, 15.5vw, 7.3rem);
     line-height: 0.88;
   }
 
-  .work-heading-grid .oversized-editorial-title {
+  .grid-heading-and-copy .heading-oversized {
     font-size: clamp(4rem, 15.5vw, 7.3rem);
   }
 
-  .approach-content-grid {
+  .grid-narrow-copy-wide-image {
     margin-top: 2.5rem;
   }
 
-  .approach-supporting-copy {
+  .grid-leading-copy {
     max-width: 28rem;
     padding-top: 0;
   }
 
-  .approach-image-figure {
+  .grid-wide-inset-image {
     margin-top: 3.5rem;
     margin-left: clamp(0rem, 8vw, 5rem);
   }
 
-  .work-introduction-copy {
+  .grid-trailing-introduction {
     max-width: 28rem;
     margin-top: 2.5rem;
     padding-bottom: 0;
   }
 
-  .work-gallery-primary-figure,
-  .work-gallery-secondary-figure,
-  .work-gallery-detail-figure {
+  .grid-wide-leading-image,
+  .grid-tall-trailing-image,
+  .grid-small-inset-image {
     margin-top: 3.5rem;
   }
 
-  .work-gallery-secondary-figure {
+  .grid-tall-trailing-image {
     max-width: 27rem;
     margin-left: auto;
   }
 
-  .work-gallery-detail-figure {
+  .grid-small-inset-image {
     max-width: 22rem;
   }
 
-  .client-fit-image-figure {
+  .grid-trailing-layer {
     margin-top: 3.5rem;
   }
 
-  .contact-heading-content {
+  .grid-leading-heading {
     max-width: 38rem;
   }
 
-  .project-inquiry-form {
+  .grid-trailing-form {
     margin-top: 4rem;
   }
 
-  .website-footer-grid {
+  .grid-weighted-columns {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .website-footer-brand-column {
+  .span-full-width-on-tablet {
     grid-column: 1 / -1;
   }
 }
 
 @media (min-width: 32.0625rem) and (max-width: 48rem) {
-  .approach-content-grid {
+  .grid-narrow-copy-wide-image {
     display: grid;
     grid-template-columns: repeat(12, minmax(0, 1fr));
     align-items: start;
@@ -1164,13 +1070,13 @@ ul {
     margin-top: 0;
   }
 
-  .approach-supporting-copy {
+  .grid-leading-copy {
     grid-column: 1 / 6;
     max-width: none;
     padding-top: clamp(2rem, 6vw, 3rem);
   }
 
-  .approach-image-figure {
+  .grid-wide-inset-image {
     grid-column: 6 / 13;
     margin-top: 0;
     margin-left: 0;
@@ -1178,37 +1084,32 @@ ul {
 }
 
 @media (max-width: 40rem) {
-  .approach-principles-grid {
+  .card-grid {
     grid-template-columns: minmax(0, 1fr);
     margin-top: 4rem;
   }
 
-  .approach-principle {
+  .card-spacious {
     padding: 2.25rem 0;
   }
 
-  .approach-principle + .approach-principle {
-    border-top: 1px solid var(--color-antique-brass);
+  .card-spacious + .card-spacious {
+    border-top: 1px solid var(--card-border-color);
     border-left: 0;
   }
 
-  .approach-principle-index {
+  .card-index {
     margin-bottom: 2rem;
   }
 
-  .client-fit-category-grid {
-    grid-template-columns: minmax(0, 1fr);
-    margin-top: 4rem;
-  }
-
-  .client-fit-category {
+  .card-compact {
     padding: 2rem 0;
     border-left: 0;
   }
 
-  .client-fit-category + .client-fit-category,
-  .client-fit-category:nth-child(3) {
-    border-top: 1px solid rgba(244, 237, 227, 0.34);
+  .card-compact + .card-compact,
+  .card-compact:nth-child(3) {
+    border-top: 1px solid var(--card-border-color);
     border-left: 0;
   }
 }
@@ -1218,72 +1119,67 @@ ul {
     --site-horizontal-padding: 1.25rem;
   }
 
-  .primary-navigation-list {
+  .link-row {
     justify-content: space-between;
     gap: 0.25rem 0.4rem;
   }
 
-  .primary-navigation-link {
+  .underline-reveal-link {
     font-size: 0.7rem;
   }
 
-  .homepage-hero-title {
+  .heading-display {
     font-size: clamp(3.05rem, 15.25vw, 4.8rem);
     letter-spacing: 0.02em;
   }
 
-  .homepage-hero-title span:last-child {
+  .heading-display span:last-child {
     font-size: 0.83em;
   }
 
-  .numbered-section-heading p {
-    font-size: 0.62rem;
-  }
-
-  .editorial-statement-title {
+  .heading-statement {
     font-size: clamp(2.15rem, 10.5vw, 3.3rem);
     letter-spacing: 0.025em;
   }
 
-  .oversized-editorial-title {
+  .heading-oversized {
     font-size: clamp(3.15rem, 15.5vw, 5rem);
     letter-spacing: 0.02em;
   }
 
-  .approach-image-overlap-title {
+  .heading-offset-down {
     transform: none;
     color: var(--color-noel-black);
     filter: none;
     mix-blend-mode: normal;
   }
 
-  .work-heading-grid .oversized-editorial-title {
+  .grid-heading-and-copy .heading-oversized {
     font-size: clamp(3.15rem, 15.5vw, 5rem);
   }
 
-  .client-fit-title,
-  .contact-title {
+  .heading-large {
     font-size: clamp(2.75rem, 13vw, 4.1rem);
     letter-spacing: 0.025em;
   }
 
-  .work-gallery-grid figcaption {
+  .caption-grid {
     display: block;
   }
 
-  .work-project-description {
+  .caption-description {
     display: block;
     margin-top: 0.75rem;
     text-align: left;
   }
 
-  .project-inquiry-field-grid,
-  .website-footer-grid {
+  .field-grid,
+  .grid-weighted-columns {
     display: block;
   }
 
-  .website-footer-navigation,
-  .website-footer-contact-column {
+  .link-stack,
+  .space-above-on-mobile {
     margin-top: 2.75rem;
   }
 }