/* ─── READ LITERARY — SHARED STYLESHEET ─── */
/* Google Fonts now loaded via in each page (SEO/perf 2026-06-30) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--midnight: #0D1B2A;
--slate: #2E3D4A;
--ivory: #F8F5EF;
--warm-white: #FDFCFA;
--stone: #EEE9E1;
--red: #961F2A;
--red-light: #B8293A;
--mid: #7A7672;
--rule: rgba(13,27,42,0.09);
}
html { font-size: 16px; scroll-behavior: smooth; }
body {
background: var(--warm-white);
color: var(--midnight);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* ─── DRAFT NOTICE ─── */
.draft-notice {
background: var(--red);
color: var(--ivory);
text-align: center;
padding: 10px 20px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ─── NAV ─── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--warm-white);
border-bottom: 1px solid var(--rule);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 72px;
height: 68px;
}
.nav-wordmark {
font-family: 'Playfair Display', Georgia, serif;
font-size: 17px;
font-weight: 400;
letter-spacing: 0.03em;
word-spacing: 0.2em;
color: var(--midnight);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.nav-wordmark strong { font-weight: 700; color: var(--red); padding: 0 0.25em; }
.nav-wordmark-text { word-spacing: normal; letter-spacing: 0.02em; }
.nav-wordmark-text strong { padding: 0 0.08em; }
.nav-wordmark img {
height: 44px;
width: auto;
display: block;
}
.nav-links {
display: flex;
gap: 40px;
list-style: none;
align-items: center;
}
.nav-links a {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mid);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--midnight); }
.nav-links .nav-cta {
padding: 9px 22px;
background: var(--red);
color: var(--ivory);
font-weight: 500;
letter-spacing: 0.10em;
transition: background 0.2s;
}
.nav-links .nav-cta:hover { background: var(--midnight); color: var(--ivory); }
/* ─── HOME HERO ─── */
.hero {
min-height: calc(100vh - 68px);
display: grid;
grid-template-columns: 1fr 1fr;
}
.hero-text {
padding: 88px 72px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-eyebrow {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 36px;
display: flex;
align-items: center;
gap: 14px;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--red);
}
.hero-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(40px, 4.2vw, 64px);
font-weight: 400;
line-height: 1.13;
letter-spacing: -0.01em;
color: var(--midnight);
margin-bottom: 36px;
}
.hero-headline em { font-style: italic; color: var(--red); }
.hero-body {
font-size: 17px;
font-weight: 300;
line-height: 1.75;
color: var(--mid);
max-width: 460px;
margin-bottom: 52px;
}
.hero-actions {
display: flex;
gap: 20px;
align-items: center;
}
.btn-primary {
display: inline-block;
padding: 13px 32px;
background: var(--red);
color: var(--ivory);
font-family: 'DM Sans', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s;
}
.btn-primary:hover { background: var(--midnight); }
.btn-ghost {
font-size: 12px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--midnight);
text-decoration: none;
border-bottom: 1px solid rgba(13,27,42,0.22);
padding-bottom: 2px;
transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { color: var(--red); border-color: var(--red); }
.hero-image {
background: var(--red);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
overflow: hidden;
}
.hero-logo-mark {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ─── INTERIOR PAGE HERO ─── */
.page-hero {
padding: 72px 72px 60px;
border-bottom: 1px solid var(--rule);
}
.page-eyebrow {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 14px;
}
.page-eyebrow::before {
content: '';
display: block;
width: 28px;
height: 1px;
background: var(--red);
}
.page-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(36px, 3.5vw, 54px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--midnight);
max-width: 640px;
}
.page-headline em { font-style: italic; color: var(--red); }
.page-subhead {
margin-top: 20px;
font-size: 17px;
font-weight: 300;
color: var(--mid);
max-width: 560px;
line-height: 1.7;
}
/* ─── SHARED UTILITIES ─── */
.rule-full { height: 1px; background: var(--rule); }
.section-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
padding-top: 10px;
}
/* ─── HOME FEATURE CARDS ─── */
.feature-section {
padding: 96px 72px;
background: var(--ivory);
}
.feature-section-header {
margin-bottom: 48px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.feature-card {
background: var(--warm-white);
padding: 44px 36px;
border-top: 2px solid transparent;
transition: border-color 0.25s;
display: flex;
flex-direction: column;
}
.feature-card:hover { border-top-color: var(--red); }
.feature-card-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 18px;
}
.feature-card-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 24px;
font-weight: 400;
color: var(--midnight);
margin-bottom: 16px;
line-height: 1.2;
}
.feature-card-body {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.75;
flex: 1;
margin-bottom: 28px;
}
.feature-card-link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--midnight);
text-decoration: none;
border-bottom: 1px solid var(--rule);
padding-bottom: 3px;
align-self: flex-start;
transition: color 0.2s, border-color 0.2s;
}
.feature-card-link:hover { color: var(--red); border-color: var(--red); }
/* ─── AGENCY STATEMENT ─── */
.statement {
padding: 96px 72px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 64px;
align-items: start;
}
.statement-body {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(20px, 2vw, 28px);
font-weight: 400;
line-height: 1.6;
color: var(--midnight);
max-width: 760px;
}
.statement-body em { font-style: italic; color: var(--red); }
/* ─── SUBMISSIONS CTA STRIP ─── */
.submissions-cta {
background: var(--midnight);
padding: 64px 72px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.submissions-cta-text {
font-family: 'Playfair Display', Georgia, serif;
font-size: 28px;
font-weight: 400;
color: var(--ivory);
line-height: 1.3;
}
.submissions-cta-text em { font-style: italic; color: rgba(248,245,239,0.55); }
/* ─── WHAT I REPRESENT ─── */
.represent {
background: var(--ivory);
padding: 96px 72px;
}
.represent-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 40px;
border-bottom: 1px solid var(--rule);
margin-bottom: 56px;
}
.represent-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: 40px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--midnight);
}
.represent-sub {
font-size: 14px;
font-weight: 300;
color: var(--mid);
max-width: 380px;
text-align: right;
line-height: 1.65;
}
.genres-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.genre-card {
background: var(--warm-white);
padding: 40px 36px;
border-top: 2px solid transparent;
transition: border-color 0.25s;
}
.genre-card:hover { border-top-color: var(--red); }
.genre-audience {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
}
.genre-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--midnight);
margin-bottom: 16px;
line-height: 1.2;
}
.genre-list {
font-size: 13px;
font-weight: 300;
color: var(--mid);
line-height: 1.8;
}
/* ─── AGENT SECTION ─── */
.agent-section {
padding: 96px 72px;
display: grid;
grid-template-columns: 270px 1fr;
gap: 0 64px;
align-items: start;
}
/* Bio text wraps around the floated photo (Olga's section) */
.agent-section.agent-bio-wrap {
display: block;
}
.agent-bio-wrap .agent-left-col {
float: left;
width: 270px;
margin: 8px 64px 28px 0;
}
.agent-bio-wrap::after {
content: '';
display: block;
clear: both;
}
/* Selected Titles / Speaks On box must drop fully below the floated photo —
never slide behind it when the bio is shorter than the photo. */
.agent-bio-wrap .agent-interests {
clear: left;
}
.agent-left-col {
display: flex;
flex-direction: column;
}
.agent-photo-panel {
width: 100%;
aspect-ratio: 3/4;
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 40px;
}
.agent-photo-img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 10%;
}
.agent-photo-gradient {
position: absolute;
bottom: 0; left: 0;
width: 100%; height: 42%;
background: linear-gradient(to top, rgba(13,27,42,0.88) 0%, transparent 100%);
z-index: 1;
}
/* Logo-type "photo" (presses/corporate clients) — show the whole mark, never crop it like a headshot.
Uses explicit inset positioning + border-box padding (not width/height:100% on a static child)
so it doesn't depend on percentage-height-against-aspect-ratio support, which has had inconsistent
cross-browser behavior; overflow:visible is a deliberate safety net so a bad fit is visible/debuggable
rather than silently cropped, which is the exact failure mode this class exists to prevent. */
.agent-photo-panel.logo-frame {
aspect-ratio: 1/1;
background: #ffffff;
border: 1px solid #e5e2dc;
overflow: visible;
}
.agent-photo-panel.logo-frame .agent-photo-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding: 32px;
box-sizing: border-box;
object-fit: contain;
object-position: center;
}
/* Initials monogram fallback for team members without a photo yet */
.agent-monogram-panel {
background: var(--midnight);
}
.agent-monogram {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', Georgia, serif;
font-size: 88px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--ivory);
opacity: 0.92;
}
.agent-photo-caption {
position: relative;
z-index: 2;
}
.agent-photo-caption .name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--ivory);
margin-bottom: 5px;
}
.agent-photo-caption .role {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
}
.agent-content { padding-top: 8px; }
.agent-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
}
.agent-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 44px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--midnight);
line-height: 1.1;
margin-bottom: 8px;
}
.agent-role-title {
font-size: 13px;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 36px;
}
.agent-bio {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: var(--midnight);
margin-bottom: 22px;
}
.agent-bio strong { font-weight: 500; }
.agent-interests {
margin-top: 24px;
padding: 28px 32px;
border-left: 2px solid var(--red);
background: var(--ivory);
}
/* Speaker pages: more separation between the photo/bio and the Speaks On box */
.agent-interests.speaks-on { margin-top: 52px; }
.agent-interests-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 12px;
}
.agent-interests p {
font-size: 14px;
font-weight: 300;
color: var(--midnight);
line-height: 1.75;
}
/* Client page: published-book cover strip beneath Selected Titles */
.client-covers {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 18px;
}
.client-covers .cc-cover {
width: 76px;
aspect-ratio: 2/3;
background: var(--stone);
overflow: hidden;
}
.client-covers .cc-cover img {
width: 100%;
height: 100%;
object-fit: contain;
}
.agent-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
border: 1px solid var(--rule);
color: var(--midnight);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 28px;
background: var(--ivory);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2E7D52;
display: inline-block;
flex-shrink: 0;
}
.agent-contact {
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.75;
}
.agent-contact a {
color: var(--midnight);
text-decoration: none;
border-bottom: 1px solid rgba(13,27,42,0.18);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.agent-contact a:hover { color: var(--red); border-color: var(--red); }
/* ─── CLIENT GRID ─── */
.client-section {
padding: 72px 72px 96px;
}
.client-search-row {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 48px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rule);
}
.client-count {
font-size: 12px;
font-weight: 400;
color: var(--mid);
letter-spacing: 0.06em;
white-space: nowrap;
}
/* ─── SEARCH INPUT (clients + books) ─── */
.search-input {
flex: 1;
max-width: 400px;
padding: 9px 14px;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 300;
color: var(--midnight);
background: var(--warm-white);
border: 1px solid rgba(13,27,42,0.18);
outline: none;
transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--red); }
.search-input::placeholder { color: var(--mid); }
.search-no-results {
display: none;
font-size: 14px;
font-weight: 300;
color: var(--mid);
padding: 48px 0;
grid-column: 1 / -1;
}
/* Names read top-to-bottom down each column, columns filling left to
right. Multi-column flows that way natively and rebalances itself when
clients are added or hidden, so nothing has to know the roster count. */
.client-grid {
column-count: 4;
column-gap: 24px;
}
.client-card {
display: flex;
flex-direction: column;
break-inside: avoid;
margin-bottom: 40px;
}
.client-photo {
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
background: var(--stone);
margin-bottom: 14px;
}
.client-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform 0.4s ease, filter 0.4s ease;
filter: grayscale(18%);
}
.client-card:hover .client-photo img {
transform: scale(1.03);
filter: grayscale(0%);
}
.client-photo-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', Georgia, serif;
font-size: 38px;
font-weight: 400;
color: var(--mid);
letter-spacing: 0.05em;
}
.client-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 16px;
font-weight: 400;
color: var(--midnight);
margin-bottom: 6px;
line-height: 1.25;
}
.client-name a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.client-name a:hover {
color: var(--red);
border-color: var(--red);
}
.client-genre {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 8px;
}
.client-titles {
font-size: 12px;
font-weight: 300;
color: var(--mid);
line-height: 1.7;
font-style: italic;
}
/* ─── BOOKS GRID ─── */
.books-section {
padding: 72px 72px 96px;
}
.books-filter {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 48px;
padding-bottom: 24px;
border-bottom: 1px solid var(--rule);
}
.books-filter-btns {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-btn {
padding: 7px 18px;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.10em;
text-transform: uppercase;
border: 1px solid var(--rule);
background: none;
color: var(--mid);
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover, .filter-btn.active { background: var(--red); color: var(--ivory); border-color: var(--red); }
.books-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 36px 28px;
}
.book-card { display: flex; flex-direction: column; }
.book-cover {
width: 100%;
aspect-ratio: 2/3;
background: var(--stone);
margin-bottom: 14px;
overflow: hidden;
position: relative;
}
.book-cover img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
}
.book-card:hover .book-cover img { transform: scale(1.03); }
.book-cover-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 20px;
text-align: center;
background: var(--stone);
}
.book-cover-placeholder .ph-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 14px;
font-weight: 400;
color: var(--midnight);
line-height: 1.35;
margin-bottom: 10px;
}
.book-cover-placeholder .ph-pub {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
}
.book-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 14px;
font-weight: 400;
color: var(--midnight);
margin-bottom: 4px;
line-height: 1.3;
}
.book-author {
font-size: 12px;
font-weight: 300;
color: var(--mid);
margin-bottom: 3px;
}
.book-publisher {
font-size: 11px;
font-weight: 300;
color: var(--mid);
opacity: 0.7;
letter-spacing: 0.04em;
}
/* ─── LAND ACKNOWLEDGEMENT ─── */
.land-ack {
padding: 56px 72px;
border-top: 1px solid var(--rule);
background: var(--ivory);
}
.land-ack-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 14px;
}
.land-ack-body {
max-width: 760px;
font-size: 15px;
font-weight: 300;
line-height: 1.85;
color: var(--midnight);
}
/* ─── SUBMISSIONS ─── */
.submissions {
background: var(--stone);
padding: 96px 72px;
}
.submissions-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 64px;
}
.submissions-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
}
.submissions-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: 42px;
font-weight: 400;
color: var(--midnight);
line-height: 1.15;
letter-spacing: -0.01em;
}
.submissions-headline em { font-style: italic; color: var(--red); }
.submissions-body {
font-size: 16px;
font-weight: 300;
line-height: 1.8;
color: var(--mid);
padding-top: 8px;
}
.submissions-body p { margin-bottom: 16px; }
.submissions-rule {
height: 1px;
background: rgba(13,27,42,0.09);
margin-bottom: 64px;
}
.submissions-how {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.how-item {
padding: 44px 36px;
background: var(--warm-white);
border-top: 2px solid transparent;
transition: border-color 0.2s;
}
.how-item:hover { border-top-color: var(--red); }
.how-num {
font-family: 'Playfair Display', Georgia, serif;
font-size: 32px;
font-weight: 400;
color: var(--red);
opacity: 0.28;
line-height: 1;
margin-bottom: 22px;
}
.how-title {
font-size: 15px;
font-weight: 500;
color: var(--midnight);
margin-bottom: 14px;
letter-spacing: 0.01em;
}
.how-desc {
font-size: 13px;
font-weight: 300;
color: var(--mid);
line-height: 1.75;
}
.how-desc a {
color: var(--red);
text-decoration: none;
border-bottom: 1px solid rgba(150,31,42,0.25);
padding-bottom: 1px;
}
/* ─── SUBMISSIONS MAILTO CTA ─── */
.submissions-mailto {
margin-top: 64px;
padding: 48px 56px;
background: var(--midnight);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.submissions-mailto-note {
font-size: 15px;
font-weight: 300;
color: rgba(248,245,239,0.75);
line-height: 1.5;
}
.submissions-mailto .btn-primary {
background: var(--red);
white-space: nowrap;
flex-shrink: 0;
}
.submissions-mailto .btn-primary:hover { background: var(--red-light); }
/* ─── CONTACT ─── */
.contact {
padding: 96px 72px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: 48px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.contact-heading em { font-style: italic; color: var(--red); }
.contact-body {
font-size: 16px;
font-weight: 300;
line-height: 1.75;
color: var(--mid);
margin-bottom: 44px;
}
.contact-items { list-style: none; }
.contact-item {
padding: 22px 0;
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 180px 1fr;
gap: 16px;
align-items: baseline;
}
.contact-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
}
.contact-value {
font-size: 15px;
font-weight: 300;
color: var(--midnight);
}
.contact-value a {
color: var(--midnight);
text-decoration: none;
border-bottom: 1px solid rgba(13,27,42,0.16);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.contact-value a:hover { color: var(--red); border-color: var(--red); }
.contact-note {
margin-top: 40px;
padding: 24px 28px;
background: var(--ivory);
border-left: 2px solid var(--red);
font-size: 13px;
font-weight: 300;
color: var(--mid);
line-height: 1.75;
}
.contact-right { padding-top: 48px; }
.membership-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 16px;
}
.membership-badge {
display: inline-block;
padding: 12px 24px;
border: 1px solid var(--rule);
font-size: 13px;
font-weight: 300;
color: var(--midnight);
letter-spacing: 0.03em;
line-height: 1.6;
}
.commission-note {
margin-top: 40px;
font-size: 14px;
font-weight: 300;
color: var(--mid);
line-height: 1.8;
}
.commission-note strong { font-weight: 500; color: var(--midnight); }
/* ─── FOOTER ─── */
footer {
background: var(--ivory);
border-top: 1px solid var(--rule);
padding: 48px 72px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.footer-wordmark {
font-family: 'Playfair Display', Georgia, serif;
font-size: 16px;
font-weight: 400;
color: var(--midnight);
letter-spacing: 0.03em;
word-spacing: 0.2em;
}
.footer-wordmark strong { font-weight: 700; color: var(--red); padding: 0 0.25em; }
.footer-tagline {
font-size: 11px;
font-weight: 300;
color: var(--mid);
letter-spacing: 0.08em;
text-align: center;
}
.footer-copy {
font-size: 11px;
font-weight: 300;
color: rgba(13,27,42,0.35);
letter-spacing: 0.06em;
text-align: right;
}
/* ─── EDITORIAL SERVICES ─── */
.editorial-intro-section {
padding: 72px 72px 80px;
}
.editorial-intro-grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 0 80px;
align-items: start;
}
.editorial-intro-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 20px;
}
.editorial-intro-headline {
font-family: 'Playfair Display', Georgia, serif;
font-size: 34px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--midnight);
line-height: 1.2;
}
.editorial-intro-body p {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--midnight);
margin-bottom: 16px;
}
.editorial-intro-body p:last-child { margin-bottom: 0; }
.editorial-intro-body a {
color: var(--red);
text-decoration: none;
border-bottom: 1px solid rgba(150,31,42,0.3);
padding-bottom: 1px;
}
.editorial-section {
padding: 0 72px 80px;
}
.editorial-item {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0 72px;
padding: 48px 0;
border-top: 1px solid var(--rule);
align-items: start;
}
.editorial-service-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 19px;
font-weight: 400;
color: var(--midnight);
line-height: 1.3;
}
.editorial-service-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mid);
margin-top: 10px;
}
.editorial-service-desc {
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--midnight);
}
.editorial-topics {
margin-top: 16px;
color: var(--mid);
}
.editorial-deliverables {
list-style: none;
margin-top: 16px;
}
.editorial-deliverables li {
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: var(--midnight);
padding: 5px 0 5px 20px;
position: relative;
}
.editorial-deliverables li::before {
content: "—";
position: absolute;
left: 0;
color: var(--red);
}
.editorial-service-note {
font-size: 12px;
font-weight: 400;
font-style: italic;
color: var(--mid);
margin-top: 14px;
line-height: 1.6;
}
.editorial-notes-section {
background: var(--stone);
padding: 56px 72px;
}
.editorial-notes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 48px;
}
.editorial-note-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 12px;
}
.editorial-note-item p {
font-size: 13px;
font-weight: 300;
line-height: 1.65;
color: var(--midnight);
}
/* ─── EDITORIAL BLOG STRIP ─── */
.editorial-blog-section {
padding: 0 72px 80px;
}
.editorial-blog-head {
padding-top: 56px;
padding-bottom: 32px;
border-top: 1px solid var(--rule);
}
.editorial-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0 40px;
}
.blog-card {
padding: 32px 0 0;
border-top: 1px solid var(--rule);
}
.blog-card-date {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 12px;
}
.blog-card-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 19px;
font-weight: 400;
line-height: 1.3;
color: var(--midnight);
margin-bottom: 12px;
}
.blog-card-excerpt {
font-size: 13px;
font-weight: 300;
line-height: 1.75;
color: var(--mid);
margin-bottom: 18px;
}
.blog-card-link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red);
text-decoration: none;
}
.blog-card-link:hover { text-decoration: underline; }
/* ─── BLOG POST ARTICLE ─── */
.article-section {
padding: 56px 72px 96px;
}
.article-inner {
max-width: 680px;
}
.article-back {
display: inline-block;
margin-bottom: 40px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid);
text-decoration: none;
}
.article-back:hover { color: var(--midnight); }
.article-date {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
}
.article-body p {
font-size: 16px;
font-weight: 300;
line-height: 1.85;
color: var(--midnight);
margin-bottom: 24px;
}
.article-body ol {
margin: 8px 0 24px 20px;
}
.article-body ol li {
font-size: 16px;
font-weight: 300;
line-height: 1.85;
color: var(--midnight);
margin-bottom: 20px;
padding-left: 8px;
}
.article-body strong { font-weight: 500; }
.article-body a {
color: var(--red);
text-decoration: none;
border-bottom: 1px solid rgba(150,31,42,0.3);
padding-bottom: 1px;
}
.article-cta {
margin-top: 48px;
padding: 32px 40px;
background: var(--stone);
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.article-cta-text {
font-size: 15px;
font-weight: 300;
line-height: 1.65;
color: var(--midnight);
flex: 1 1 200px;
}
/* ─── EDITORIAL SERVICE FEE ─── */
.editorial-service-fee {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--rule);
font-family: 'Playfair Display', Georgia, serif;
font-size: 22px;
font-weight: 400;
color: var(--midnight);
}
.editorial-service-fee--contact {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 300;
color: var(--mid);
}
/* ─── BLOG LIST (blog.html) ─── */
.blog-list-section {
padding: 0 72px 96px;
}
.blog-list-item {
display: grid;
grid-template-columns: 160px 1fr;
gap: 0 64px;
padding: 48px 0;
border-top: 1px solid var(--rule);
align-items: start;
}
.blog-list-date {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
padding-top: 6px;
}
.blog-list-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 24px;
font-weight: 400;
line-height: 1.25;
color: var(--midnight);
margin-bottom: 14px;
}
.blog-list-title a {
color: inherit;
text-decoration: none;
}
.blog-list-title a:hover {
color: var(--red);
}
.blog-list-excerpt {
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--mid);
margin-bottom: 18px;
}
.blog-list-link {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--red);
text-decoration: none;
}
/* ─────────────────────────────────────────────────────────
RESPONSIVE · added 2026-06-13
Base: image overflow guard + CSS-only hamburger (the checkbox +
burger label are injected into every