/* Jade Jarvis Photography — shared site styles */
/* Fonts are loaded via tags in each page's (preconnect +
stylesheet), not @import here — @import blocks CSS parsing until the
external stylesheet downloads, which delays first paint. */
:root {
--charcoal: #2A3232;
--charcoal-dark: #1D1C1C;
--sage: #748968;
--cream: #ECF0EF;
--stone: #B1BDB9;
--white: #ffffff;
--max-width: 1200px;
/* Default accent used sitewide; the three verticals below override it so
each service line reads as its own identity without a parallel design
system — every component that used to hardcode sage now uses --accent. */
--accent: var(--sage);
}
/* Vertical identity overrides — put the matching class on for any
hub or location page that belongs to that vertical (not applied to blog
posts, which stay visually neutral/shared). */
body.vertical-proposals { --accent: #B5654A; } /* warm terracotta — red rock */
body.vertical-weddings { --accent: #C9A227; } /* soft gold — romantic/temple */
body.vertical-elopements { --accent: var(--sage); } /* unchanged, explicit for clarity */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Archivo', sans-serif;
color: var(--charcoal);
background: var(--white);
line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Inline links inside body copy (articles, FAQ answers, fact lists, the
About section) should always read as links, not blend into surrounding
text. Nav/footer/button/card links keep color:inherit above since they're
their own UI elements, not prose. */
.content a,
.faq a,
.fact-list a,
.post-tags p a,
.about a,
.addon-item p a {
color: var(--accent);
text-decoration: underline;
}
.cta p a {
color: inherit;
text-decoration: underline;
}
.content a:hover,
.faq a:hover,
.fact-list a:hover,
.post-tags p a:hover,
.about a:hover,
.addon-item p a:hover,
.cta p a:hover {
text-decoration: none;
}
.eyebrow {
font-family: 'Roboto Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: var(--accent);
}
h1, h2, h3 { font-weight: 600; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
/* Header / nav */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--white);
border-bottom: 1px solid var(--cream);
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
padding-bottom: 18px;
}
.site-logo {
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.site-nav {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 0.9rem;
}
.site-nav a:hover { color: var(--sage); }
.nav-toggle { display: none; }
@media (max-width: 780px) {
.site-nav {
display: none;
flex-direction: column;
gap: 14px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
padding: 20px 24px;
border-bottom: 1px solid var(--cream);
}
.site-nav.open { display: flex; }
.nav-toggle {
display: inline-block;
background: none;
border: 1px solid var(--charcoal);
border-radius: 4px;
padding: 8px 12px;
font-size: 0.9rem;
cursor: pointer;
}
}
/* Buttons */
.btn {
display: inline-block;
padding: 13px 28px;
border-radius: 2px;
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid var(--charcoal);
transition: background 0.2s, color 0.2s;
}
.btn-dark {
background: var(--charcoal);
color: var(--white);
border-color: var(--charcoal);
}
.btn-dark:hover { background: var(--charcoal-dark); }
.btn-outline {
background: transparent;
color: var(--white);
border-color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); }
/* Hero crossfade */
.hero {
position: relative;
height: 88vh;
min-height: 480px;
overflow: hidden;
color: var(--white);
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
animation: hero-fade 24s infinite;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-slide::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0.05) 45%);
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }
@keyframes hero-fade {
0% { opacity: 0; }
4% { opacity: 1; }
25% { opacity: 1; }
29% { opacity: 0; }
100% { opacity: 0; }
}
.hero-content {
position: absolute;
left: 0; right: 0; bottom: 12%;
z-index: 2;
text-align: center;
}
.hero-content .eyebrow { color: var(--cream); margin-bottom: 10px; }
.hero-content h1 { margin-bottom: 22px; text-shadow: 0 2px 12px rgba(0,0,0,0.3); }
/* Intro */
.intro {
padding: 80px 0;
text-align: center;
}
.intro p {
max-width: 720px;
margin: 0 auto;
font-size: 1.15rem;
}
.intro a { color: var(--accent); text-decoration: underline; }
/* Pillars */
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.pillar {
position: relative;
aspect-ratio: 3/4;
color: var(--white);
overflow: hidden;
}
.pillar img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.pillar:hover img { transform: scale(1.05); }
.pillar::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%);
}
.pillar-text {
position: absolute; left: 0; right: 0; bottom: 8%;
z-index: 2; text-align: center;
}
.pillar-text .eyebrow { color: var(--cream); }
@media (max-width: 780px) {
.pillars { grid-template-columns: 1fr; }
}
/* Testimonial */
.testimonial {
position: relative;
padding: 100px 24px;
text-align: center;
color: var(--white);
background-size: cover;
background-position: center;
}
.testimonial::before {
content: "";
position: absolute; inset: 0;
background: rgba(29,28,28,0.55);
}
.testimonial blockquote {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto;
font-size: 1.4rem;
font-style: italic;
line-height: 1.5;
}
/* About */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding: 90px 24px;
max-width: var(--max-width);
margin: 0 auto;
}
.about img { border-radius: 4px; }
@media (max-width: 780px) {
.about { grid-template-columns: 1fr; padding: 60px 24px; }
}
/* Travel section */
.travel {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.travel-text {
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 60px;
background: var(--cream);
}
.travel img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
@media (max-width: 780px) {
.travel { grid-template-columns: 1fr; }
.travel-text { padding: 50px 24px; }
}
/* CTA */
.cta {
position: relative;
padding: 130px 24px;
text-align: center;
color: var(--white);
background-size: cover;
background-position: center;
}
.cta::before {
content: "";
position: absolute; inset: 0;
background: rgba(29,28,28,0.5);
}
.cta > * { position: relative; z-index: 1; }
/* Instagram CTA */
.instagram-cta {
padding: 70px 24px;
text-align: center;
}
.instagram-cta a { color: var(--accent); font-weight: 600; }
/* Footer */
.site-footer {
background: var(--charcoal);
color: var(--cream);
padding: 50px 24px 30px;
}
.site-footer .wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 24px;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 20px;
font-size: 0.9rem;
}
.footer-nav a:hover { color: var(--white); }
.footer-bottom {
max-width: var(--max-width);
margin: 30px auto 0;
padding: 20px 24px 0;
border-top: 1px solid rgba(255,255,255,0.15);
font-size: 0.8rem;
color: var(--stone);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
/* Generic content page sections (used by inner pages/blog) */
.page-hero {
position: relative;
height: 50vh;
min-height: 320px;
color: var(--white);
}
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
content: "";
position: absolute; inset: 0;
background: rgba(29,28,28,0.4);
}
.page-hero-content {
position: absolute; inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 24px;
}
.content {
max-width: 760px;
margin: 0 auto;
padding: 70px 24px;
}
.content img {
border-radius: 4px;
margin: 28px 0;
}
.content h2 { margin-top: 1.6em; }
.content figcaption {
font-size: 0.85rem;
color: var(--stone);
margin-top: 8px;
}
/* Blog post meta + gallery */
.post-meta {
text-align: center;
padding: 50px 24px 10px;
}
.post-meta .eyebrow { margin-bottom: 10px; }
.post-meta time {
display: block;
margin-top: 10px;
font-size: 0.85rem;
color: var(--stone);
}
/* Table of contents for long location-guide posts */
.post-toc {
max-width: 760px;
margin: 0 auto 40px;
padding: 20px 24px;
background: var(--cream);
border-radius: 4px;
}
.post-toc p {
margin: 0 0 10px;
font-family: 'Roboto Mono', monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--charcoal);
}
.post-toc ol {
margin: 0;
padding-left: 20px;
columns: 2;
column-gap: 32px;
}
.post-toc li { padding: 3px 0; break-inside: avoid; }
.post-toc a { color: var(--accent); text-decoration: underline; }
.post-toc a:hover { text-decoration: none; }
@media (max-width: 600px) {
.post-toc ol { columns: 1; }
}
/* TL;DR summary box for long articles */
.tldr {
max-width: 760px;
margin: 0 auto 40px;
padding: 20px 24px;
background: var(--cream);
border-left: 3px solid var(--accent);
border-radius: 4px;
}
.tldr p.eyebrow {
margin: 0 0 10px;
font-family: 'Roboto Mono', monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.tldr ul {
margin: 0;
padding-left: 20px;
}
.tldr li { padding: 3px 0; }
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
max-width: var(--max-width);
margin: 0 auto 60px;
padding: 0 24px;
}
.gallery img { border-radius: 4px; height: 100%; object-fit: cover; }
.gallery.gallery-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
.gallery, .gallery.gallery-3 { grid-template-columns: 1fr; }
}
.post-tags {
text-align: center;
padding: 20px 24px 60px;
}
.post-tags .eyebrow { display: block; margin-bottom: 14px; }
.tag-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
font-size: 0.8rem;
}
.tag-list span {
border: 1px solid var(--stone);
border-radius: 20px;
padding: 6px 16px;
color: var(--charcoal);
}
.related-posts {
background: var(--cream);
padding: 70px 24px;
}
.related-posts h2 { text-align: center; margin-bottom: 40px; }
.related-grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.related-card img {
border-radius: 4px;
aspect-ratio: 4/5;
object-fit: cover;
margin-bottom: 14px;
}
.related-card .eyebrow { margin-top: 4px; }
@media (max-width: 780px) {
.related-grid { grid-template-columns: 1fr; }
}
/* Two-column intro used by packages/contact/service landing pages
(image on one side, headline + copy + CTA on the other) */
.split-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
max-width: var(--max-width);
margin: 0 auto;
padding: 80px 24px;
}
.split-intro img { border-radius: 4px; }
@media (max-width: 780px) {
.split-intro { grid-template-columns: 1fr; padding: 50px 24px; }
}
/* Pricing packages */
/* Process grid — steps as cards with a faded photo behind the text */
.process-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 20px 24px 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.process-card {
position: relative;
min-height: 260px;
border: 1px solid var(--cream);
border-radius: 6px;
overflow: hidden;
background: var(--cream);
}
.process-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.22;
}
.process-card-body {
position: relative;
z-index: 1;
padding: 24px;
}
.process-card .process-step {
font-family: 'Roboto Mono', monospace;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent);
margin-bottom: 6px;
}
.process-card h3 { margin-bottom: 8px; }
.process-card p:last-child { font-size: 0.9rem; margin: 0; }
@media (max-width: 900px) {
.process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.process-grid { grid-template-columns: 1fr; }
}
.pricing-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 20px 24px 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pricing-card {
border: 1px solid var(--cream);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.pricing-card img { aspect-ratio: 4/3; object-fit: cover; }
.pricing-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.pricing-card h3 { margin-bottom: 2px; }
.pricing-card .price { color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.pricing-card ul { margin: 0 0 20px; padding-left: 18px; font-size: 0.92rem; }
.pricing-card ul li { margin-bottom: 8px; }
.pricing-card .btn { margin-top: auto; align-self: flex-start; }
.pricing-card .perfect-for {
font-size: 0.88rem;
padding-top: 14px;
margin: -6px 0 20px;
border-top: 1px solid var(--cream);
}
.pricing-card .perfect-for b { color: var(--charcoal); }
@media (max-width: 900px) {
.pricing-grid { grid-template-columns: 1fr; }
}
/* Wedding-hours calculator */
.hours-calculator {
max-width: 640px;
padding: 40px 24px 60px;
background: var(--cream);
border-radius: 6px;
margin: 0 auto 60px;
}
.hours-calculator h2 { margin-bottom: 20px; }
.calc-field { margin-bottom: 18px; }
.calc-label { font-weight: 600; margin-bottom: 6px; }
.calc-field label {
display: block;
margin-bottom: 6px;
font-size: 0.95rem;
}
.calc-field input[type="number"] {
display: block;
width: 100px;
padding: 8px 10px;
border: 1px solid var(--stone);
border-radius: 4px;
font-family: 'Archivo', sans-serif;
font-size: 0.95rem;
}
.calc-result {
margin-top: 20px;
padding: 16px 20px;
background: var(--white);
border-radius: 4px;
font-size: 0.98rem;
}
.calc-result:empty { display: none; }
/* Add-ons list */
.addons {
max-width: var(--max-width);
margin: 0 auto;
padding: 20px 24px 80px;
}
.addons h2 { text-align: center; margin-bottom: 40px; }
.addon-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--cream);
}
.addon-item img { border-radius: 4px; aspect-ratio: 1/1; object-fit: cover; }
.addon-item h3 { display: inline; }
.addon-item .price { color: var(--accent); font-weight: 600; margin-left: 8px; }
@media (max-width: 600px) {
.addon-item { grid-template-columns: 80px 1fr; }
}
/* Numbered process steps */
.steps {
max-width: var(--max-width);
margin: 0 auto;
padding: 60px 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.step .step-number {
font-family: 'Roboto Mono', monospace;
color: var(--accent);
font-size: 0.85rem;
margin-bottom: 10px;
}
@media (max-width: 900px) {
.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.steps { grid-template-columns: 1fr; }
}
/* Contact form (submits via Netlify Forms — no backend code needed) */
.contact-form-section {
max-width: 640px;
margin: 0 auto;
padding: 20px 24px 90px;
}
.contact-form-section h2 { text-align: center; }
.contact-form-section > p { text-align: center; margin-bottom: 36px; }
.contact-form label {
display: block;
font-size: 0.85rem;
font-weight: 600;
margin: 18px 0 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--stone);
border-radius: 4px;
font-family: inherit;
font-size: 0.95rem;
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form button {
margin-top: 26px;
border: none;
cursor: pointer;
font-family: inherit;
}
/* Blog index grid (full listing, reuses .related-card look) */
.blog-grid {
max-width: var(--max-width);
margin: 0 auto;
padding: 20px 24px 90px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 900px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.blog-grid { grid-template-columns: 1fr; }
}
/* FAQ dropdown (native / — no JS needed) */
.faq {
margin-top: 20px;
}
.faq details {
border-bottom: 1px solid var(--cream);
padding: 18px 0;
}
.faq summary {
cursor: pointer;
list-style: none;
font-weight: 600;
font-size: 1.05rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
flex-shrink: 0;
font-family: 'Roboto Mono', monospace;
font-size: 1.3rem;
color: var(--accent);
transition: transform 0.2s;
}
.faq details[open] summary::after {
content: "\2212";
}
.faq details p {
margin: 14px 0 0;
}
/* ============================================================
Vertical nav — replaces .site-header/.site-nav on hub + location
pages belonging to a vertical (Proposals/Weddings/Elopements), so
each reads as its own independent business. Blog/Home/Contact/
Boudoir/Privacy keep the normal sitewide .site-header/.site-nav.
============================================================ */
.vertical-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--white);
border-bottom: 1px solid var(--cream);
}
.vertical-utility-bar {
background: var(--charcoal);
color: var(--stone);
font-size: 0.78rem;
text-align: center;
padding: 6px 24px;
}
.vertical-utility-bar a {
color: var(--white);
text-decoration: underline;
}
.vertical-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 16px;
}
.vertical-logo {
font-size: 1.05rem;
font-weight: 600;
}
.vertical-logo .eyebrow {
display: block;
margin-top: 2px;
}
.vertical-nav {
display: flex;
align-items: center;
gap: 24px;
font-size: 0.9rem;
}
.vertical-nav a:hover { color: var(--accent); }
/* Locations dropdown — CSS-only, no JS, scales as more location pages ship */
.locations-menu {
position: relative;
}
.locations-menu > button {
font: inherit;
color: inherit;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
}
.locations-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--white);
border: 1px solid var(--cream);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
padding: 8px 0;
z-index: 60;
}
.locations-menu:hover .locations-dropdown,
.locations-menu:focus-within .locations-dropdown {
display: block;
}
.locations-dropdown a {
display: block;
padding: 10px 18px;
font-size: 0.88rem;
white-space: nowrap;
}
.locations-dropdown a:hover { background: var(--cream); color: var(--accent); }
@media (max-width: 780px) {
.vertical-nav {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 14px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
padding: 20px 24px;
border-bottom: 1px solid var(--cream);
}
.vertical-nav.open { display: flex; }
.locations-dropdown {
display: none;
position: static;
border: none;
box-shadow: none;
padding: 4px 0 4px 14px;
}
.locations-menu.open .locations-dropdown { display: block; }
}
/* Breadcrumbs */
.breadcrumbs {
max-width: var(--max-width);
margin: 0 auto;
padding: 18px 24px 0;
font-size: 0.82rem;
color: var(--stone);
}
.breadcrumbs a { color: var(--stone); text-decoration: underline; }
.breadcrumbs a:hover { color: var(--accent); }
/* Comparison table (blog posts comparing multiple options — lodging, vendors, etc.) */
.compare-table-wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px 20px;
overflow-x: auto;
}
table.compare-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
min-width: 640px;
}
table.compare-table th {
background: var(--charcoal);
color: var(--white);
padding: 12px 10px;
text-align: left;
font-family: 'Roboto Mono', monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
table.compare-table td {
padding: 12px 10px;
border-bottom: 1px solid var(--cream);
vertical-align: top;
}
table.compare-table tr:nth-child(even) td { background: var(--cream); }
table.compare-table .yes { color: var(--accent); font-weight: 600; }
table.compare-table .no { color: var(--stone); font-weight: 600; }
/* Fact list (structured details inside a .content article — price, season, address, etc.) */
.fact-list {
font-family: 'Roboto Mono', monospace;
font-size: 0.85rem;
margin: 18px 0;
padding: 16px 20px;
background: var(--cream);
border-radius: 4px;
}
.fact-list div { padding: 4px 0; }
.fact-list b { color: var(--charcoal); font-family: 'Archivo', sans-serif; }
/* Credibility strip (Google rating + a headline stat, side by side) */
.credibility-strip {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
max-width: 480px;
margin: 0 auto;
padding: 8px 20px;
}
.credibility-divider {
width: 1px;
align-self: stretch;
background: var(--stone);
}
.credibility-stars {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
color: var(--accent);
}
.credibility-stars .stars {
font-size: 1.6rem;
letter-spacing: 3px;
line-height: 1;
}
.credibility-stars .label,
.credibility-stat .label {
font-family: 'Roboto Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.credibility-stars .label { color: var(--stone); }
.credibility-stat { text-align: center; }
.credibility-stat .label { color: var(--accent); margin: 0 0 4px; }
.credibility-stat .year {
font-family: 'Archivo', sans-serif;
font-size: 1.6rem;
font-weight: 600;
color: var(--charcoal);
margin: 0;
}
.credibility-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
}
.credibility-badge img {
height: 32px;
width: auto;
}
.credibility-badge .label {
font-family: 'Roboto Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--stone);
}
/* Blog post author bio card */
.post-author {
display: flex;
align-items: center;
gap: 24px;
max-width: var(--max-width);
margin: 0 auto;
padding: 40px 24px;
border-top: 1px solid var(--stone);
border-bottom: 1px solid var(--stone);
}
.post-author img {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.post-author h3 { margin: 0 0 6px; }
.post-author p { margin: 0 0 12px; font-size: 0.95rem; }
.post-author-links { display: flex; gap: 16px; flex-wrap: wrap; }
.post-author-links a {
font-family: 'Roboto Mono', monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
text-decoration: underline;
}
@media (max-width: 600px) {
.post-author { flex-direction: column; text-align: center; }
}
/* Full-width pull-quote (styled like a headline statement, not an actual heading) */
.pull-quote {
text-align: center;
padding: 56px 24px;
max-width: var(--max-width);
margin: 0 auto;
}
.pull-quote blockquote {
margin: 0;
font-style: italic;
font-size: 2.4rem;
line-height: 1.3;
}
.pull-quote footer {
margin-top: 20px;
font-style: normal;
font-family: 'Roboto Mono', monospace;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
}
.map-embed {
width: 100%;
height: 320px;
border: 0;
border-radius: 4px;
margin: 16px 0;
display: block;
}