← back to Beverlyhillsvideos
redesign: Gucci-caliber luxury system (Cormorant Garamond + Jost, near-monochrome, hairlines, centered wordmark, editorial whitespace)
864d15d8749c48cad7b8217843cc1d9c74bab937 · 2026-08-05 13:26:01 -0700 · Steve Abrams
Files touched
M build.mjsM public/index.htmlM public/posts/beverly-hills-nightlife.htmlM public/posts/beverly-hills-real-estate.htmlM public/posts/beverly-hills-wellness-spas.htmlM public/posts/dining-in-beverly-hills.htmlM public/posts/rodeo-drive-guide.htmlM public/posts/staying-fit-beverly-hills.htmlM public/posts/things-to-do-beverly-hills.htmlM public/privacy.htmlM public/style.cssM public/videos.html
Diff
commit 864d15d8749c48cad7b8217843cc1d9c74bab937
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed Aug 5 13:26:01 2026 -0700
redesign: Gucci-caliber luxury system (Cormorant Garamond + Jost, near-monochrome, hairlines, centered wordmark, editorial whitespace)
---
build.mjs | 3 +-
public/index.html | 3 +-
public/posts/beverly-hills-nightlife.html | 3 +-
public/posts/beverly-hills-real-estate.html | 3 +-
public/posts/beverly-hills-wellness-spas.html | 3 +-
public/posts/dining-in-beverly-hills.html | 3 +-
public/posts/rodeo-drive-guide.html | 3 +-
public/posts/staying-fit-beverly-hills.html | 3 +-
public/posts/things-to-do-beverly-hills.html | 3 +-
public/privacy.html | 3 +-
public/style.css | 158 +++++++++++++-------------
public/videos.html | 3 +-
12 files changed, 100 insertions(+), 91 deletions(-)
diff --git a/build.mjs b/build.mjs
index b290347..15f0bd9 100644
--- a/build.mjs
+++ b/build.mjs
@@ -151,7 +151,8 @@ const page = ({ title, desc, canonical, body }) => `<!doctype html>
<meta property="og:type" content="website">
<meta property="og:site_name" content="${BRAND}">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
${ADSENSE}
</head>
diff --git a/public/index.html b/public/index.html
index c1a3ec8..9f0dea7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/beverly-hills-nightlife.html b/public/posts/beverly-hills-nightlife.html
index b531f97..14eee8b 100644
--- a/public/posts/beverly-hills-nightlife.html
+++ b/public/posts/beverly-hills-nightlife.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/beverly-hills-real-estate.html b/public/posts/beverly-hills-real-estate.html
index 6391c6d..374d37b 100644
--- a/public/posts/beverly-hills-real-estate.html
+++ b/public/posts/beverly-hills-real-estate.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/beverly-hills-wellness-spas.html b/public/posts/beverly-hills-wellness-spas.html
index 881a9ad..5c4ec77 100644
--- a/public/posts/beverly-hills-wellness-spas.html
+++ b/public/posts/beverly-hills-wellness-spas.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/dining-in-beverly-hills.html b/public/posts/dining-in-beverly-hills.html
index 98727da..fb229bd 100644
--- a/public/posts/dining-in-beverly-hills.html
+++ b/public/posts/dining-in-beverly-hills.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/rodeo-drive-guide.html b/public/posts/rodeo-drive-guide.html
index be223d6..7d05766 100644
--- a/public/posts/rodeo-drive-guide.html
+++ b/public/posts/rodeo-drive-guide.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/staying-fit-beverly-hills.html b/public/posts/staying-fit-beverly-hills.html
index 4784df7..89f625f 100644
--- a/public/posts/staying-fit-beverly-hills.html
+++ b/public/posts/staying-fit-beverly-hills.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/posts/things-to-do-beverly-hills.html b/public/posts/things-to-do-beverly-hills.html
index 208bbfc..37d45e2 100644
--- a/public/posts/things-to-do-beverly-hills.html
+++ b/public/posts/things-to-do-beverly-hills.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/privacy.html b/public/privacy.html
index 1cd2da1..e87e8a5 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
diff --git a/public/style.css b/public/style.css
index fcd2dc1..a91c1e4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,85 +1,83 @@
+/* Beverly Hills Videos — luxury editorial system (Gucci-inspired):
+ near-monochrome, generous whitespace, high-contrast display serif,
+ uppercase letter-spaced labels, hairline rules, restrained accent. */
:root{
- --ink:#1a1a1a; --muted:#6b6b6b; --line:#e7e3dc; --bg:#fbfaf7;
- --gold:#b8935a; --gold-ink:#977536; --max:1080px;
- --serif:'Playfair Display',Georgia,serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
+ --ink:#151310; --soft:#4b4741; --muted:#8a857b; --line:#e4e0d7;
+ --bg:#f6f3ec; --paper:#fbf9f4; --accent:#1f3d30;
+ --max:1240px; --serif:'Cormorant Garamond',Georgia,serif; --ui:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
-body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);background:var(--bg)}
-.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
-a{color:var(--gold-ink)}
-h1,h2,h3{font-family:var(--serif);line-height:1.2;color:var(--ink);font-weight:800}
-h1{font-size:2.4rem;margin:.15em 0 .5em}
-h2{font-size:1.55rem;font-weight:600;margin:1.6em 0 .5em}
-h3{font-size:1.2rem;font-weight:600;margin:1.3em 0 .4em}
-p{margin:.75em 0}
-ul{margin:.6em 0 1em;padding-left:1.25em}
-li{margin:.35em 0}
-
-/* header */
-.site-head{background:#fff;border-bottom:1px solid var(--line)}
-.site-head .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;min-height:68px;padding-top:10px;padding-bottom:10px}
-.brand{font-family:var(--serif);font-weight:800;font-size:1.25rem;letter-spacing:.02em;text-decoration:none;color:var(--ink)}
-.brand span{color:var(--gold);margin-left:.3em;font-weight:600}
-.site-head nav{display:flex;flex-wrap:wrap;gap:18px}
-.site-head nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.86rem;letter-spacing:.03em;text-transform:uppercase}
-.site-head nav a:hover{color:var(--gold-ink)}
-
-/* hero */
-.hero{background:#fff;border-bottom:1px solid var(--line);padding:60px 0 50px}
-.eyebrow{font-size:.75rem;letter-spacing:.22em;color:var(--gold);font-weight:700;margin:0 0 .4em}
-.hero h1{font-size:3.1rem;max-width:16ch;margin:.1em 0 .3em}
-.hero .sub{font-size:1.18rem;color:#4a4a4a;max-width:62ch;font-family:var(--serif);font-style:italic;font-weight:600}
-
-/* feed */
-.feed{padding:48px 0}
-.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
-.post-card{display:block;background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px;text-decoration:none;color:var(--ink);transition:.15s}
-.post-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
-.post-card.lead{grid-column:1/-1;background:linear-gradient(180deg,#fff,#fdfbf6)}
-.post-card.lead h2{font-size:2rem;font-weight:800}
-.post-card .kicker{font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--gold)}
-.post-card h2{font-weight:600;margin:.3em 0 .35em;font-size:1.35rem}
-.post-card p{color:var(--muted);font-size:.98rem;margin:0 0 .8em}
-.post-card .read{font-weight:700;color:var(--gold-ink);font-size:.85rem;letter-spacing:.04em}
-
-/* article */
-.post{padding:40px 0 20px}
-.post .wrap{max-width:720px}
-.crumb{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .3em}
-.crumb a{color:var(--muted)}
-.post h1{font-size:2.6rem;margin-bottom:.6em}
-.post p{font-size:1.06rem}
-.post .more{border-top:1px solid var(--line);margin-top:40px;padding-top:18px}
-.post .more h3{font-family:var(--serif)}
-.post .more ul{list-style:none;padding:0}
-.post .more li{margin:.5em 0}
-.post .more a{font-weight:600;text-decoration:none}
-.post .more a:hover{text-decoration:underline}
-
-/* footer */
-.site-foot{border-top:1px solid var(--line);background:#fff;margin-top:36px;padding:28px 0}
-.site-foot p{margin:.25em 0;color:var(--muted);font-size:.9rem}
-.site-foot .fine{font-size:.82rem;max-width:70ch}
-
-@media(max-width:620px){.hero h1{font-size:2.2rem}.post h1{font-size:2rem}.hero{padding:40px 0}}
-
-/* videos */
-.vids-hero{padding:48px 0 40px}
-.home-vids,.vid-channel{padding:36px 0}
-.home-vids{border-top:1px solid var(--line);background:#fff}
-.vch-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
-.vch-link{font-weight:700;font-size:.85rem;letter-spacing:.04em;text-decoration:none;color:var(--gold-ink);white-space:nowrap}
-.vch-link:hover{text-decoration:underline}
-.vch-tag{color:var(--muted);margin:.2em 0 1.1em;max-width:70ch}
-.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
+html{-webkit-text-size-adjust:100%}
+body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
+.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
+a{color:inherit;text-decoration:none}
+img{max-width:100%;display:block}
+h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:.005em;margin:0;color:var(--ink)}
+h1{font-size:clamp(2.6rem,6vw,5rem)}
+h2{font-size:clamp(1.9rem,3.4vw,2.9rem)}
+h3{font-size:1.5rem}
+p{margin:0 0 1.1em}
+.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
+.site-head .wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:26px;padding-bottom:20px}
+.brand{font-family:var(--serif);font-weight:500;font-size:1.9rem;letter-spacing:.02em;color:var(--ink)}
+.brand span{color:var(--accent);letter-spacing:.06em;margin-left:.12em}
+.site-head nav{display:flex;flex-wrap:wrap;justify-content:center;gap:34px}
+.site-head nav a{font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:400;color:var(--soft);padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
+.site-head nav a:hover{color:var(--ink);border-color:var(--ink)}
+.hero{background:var(--paper);border-bottom:1px solid var(--line);text-align:center;padding:clamp(70px,11vw,150px) 0 clamp(56px,8vw,110px)}
+.eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.34em;font-size:.7rem;font-weight:400;color:var(--muted);margin:0 0 1.6em}
+.hero h1{max-width:20ch;margin:0 auto .5em}
+.hero .sub{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--soft);max-width:56ch;margin:0 auto;line-height:1.5}
+.vids-hero{padding:clamp(56px,8vw,110px) 0}
+.feed{padding:clamp(56px,8vw,104px) 0}
+.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
+.post-card{background:var(--paper);padding:44px 38px 40px;transition:background .35s}
+.post-card:hover{background:#fff}
+.post-card.lead{grid-column:1/-1;text-align:center;padding:64px 38px}
+.post-card.lead h2{max-width:22ch;margin:.2em auto .3em;font-size:clamp(2rem,3.2vw,2.8rem)}
+.post-card .kicker{font-family:var(--ui);text-transform:uppercase;letter-spacing:.26em;font-size:.66rem;color:var(--muted)}
+.post-card h2{font-size:1.7rem;margin:.5em 0 .4em}
+.post-card p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--soft);margin:0 0 1.3em}
+.post-card .read{font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:3px}
+.post{padding:clamp(56px,7vw,100px) 0 40px;background:var(--paper)}
+.post .wrap{max-width:760px}
+.crumb{font-family:var(--ui);text-transform:uppercase;letter-spacing:.22em;font-size:.66rem;color:var(--muted);text-align:center;margin:0 0 1.8em}
+.post h1{text-align:center;max-width:22ch;margin:0 auto .9em}
+.post p{font-family:var(--serif);font-size:1.24rem;line-height:1.72;color:#2b2822;margin:0 0 1.25em}
+.post h2{margin:1.9em 0 .5em;padding-top:.9em;border-top:1px solid var(--line)}
+.post h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin:1.5em 0 .4em}
+.post ul{font-family:var(--serif);font-size:1.18rem;color:#2b2822;padding-left:1.2em;margin:.6em 0 1.2em}
+.post li{margin:.4em 0}
+.post .faq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0 24px;margin:34px 0}
+.post .faq h2{border:0;padding:0}
+.post .faq h3{color:var(--accent)}
+.post .more{border-top:1px solid var(--line);margin-top:48px;padding-top:26px;text-align:center}
+.post .more h3{font-family:var(--ui);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:400;color:var(--muted);margin-bottom:1em}
+.post .more ul{list-style:none;padding:0;font-family:var(--serif)}
+.post .more li{margin:.6em 0}
+.post .more a{font-size:1.2rem;border-bottom:1px solid transparent;transition:border-color .3s}
+.post .more a:hover{border-color:var(--ink)}
+.home-vids,.vid-channel{padding:clamp(48px,6vw,88px) 0}
+.home-vids{background:var(--paper);border-top:1px solid var(--line)}
+.vid-channel:nth-of-type(even){background:var(--paper)}
+.vch-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
+.vch-link{font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap}
+.vch-tag{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--soft);margin:.4em 0 1.8em;max-width:70ch}
+.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px}
.vid{margin:0}
-.vid .frame{position:relative;width:100%;padding-top:56.25%;border-radius:6px;overflow:hidden;background:#000;border:1px solid var(--line)}
+.vid .frame{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#000;border:1px solid var(--line)}
.vid .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
-.vid figcaption{font-size:.92rem;font-weight:600;margin-top:.55em;color:var(--ink);line-height:1.4}
-.vid-channel:nth-of-type(even){background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
-.vid-note{padding:8px 0 30px}
-.vid-note p{font-size:.82rem;color:var(--muted);max-width:75ch}
-.vid figcaption .vch{display:block;font-weight:600;font-size:.78rem;color:var(--gold-ink);letter-spacing:.02em;margin-top:.2em}
-.vid-note p{margin:.5em 0}
-.vid-note a{color:var(--gold-ink);text-decoration:none}
-.vid-note a:hover{text-decoration:underline}
+.vid figcaption{font-family:var(--serif);font-size:1.12rem;color:var(--ink);margin-top:.7em;line-height:1.4}
+.vid figcaption .vch{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;font-weight:400;color:var(--muted);margin-top:.5em}
+.vid-social .frame{display:none}
+.vid-note{padding:20px 0 40px;background:var(--paper)}
+.vid-note p{font-family:var(--ui);font-size:.8rem;letter-spacing:.02em;color:var(--muted);margin:.6em 0;max-width:80ch}
+.vid-note a{border-bottom:1px solid var(--line)}
+.vid-note a:hover{border-color:var(--ink)}
+.site-foot{border-top:1px solid var(--line);background:var(--paper);padding:44px 0}
+.site-foot .wrap{text-align:center}
+.site-foot p{font-family:var(--ui);font-size:.74rem;letter-spacing:.03em;color:var(--muted);margin:.4em 0}
+.site-foot .fine{max-width:72ch;margin:0 auto;line-height:1.7}
+.site-foot a{border-bottom:1px solid var(--line)}
+.site-foot a:hover{border-color:var(--ink)}
+@media(max-width:640px){.wrap{padding:0 22px}.post-card{padding:32px 26px}.site-head nav{gap:20px}}
diff --git a/public/videos.html b/public/videos.html
index 59d51c2..756dac4 100644
--- a/public/videos.html
+++ b/public/videos.html
@@ -11,7 +11,8 @@
<meta property="og:type" content="website">
<meta property="og:site_name" content="Beverly Hills Videos">
<link rel="preconnect" href="https://fonts.googleapis.com">
-<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5278231299883833" crossorigin="anonymous"></script>
</head>
← 95e7910 multi-platform video: platform-aware embeds (YouTube+Vimeo+I
·
back to Beverlyhillsvideos
·
hero: dramatic image-less luxury band (deep editorial, hairl 45568d8 →