/* =============================================================================
   THE HOME OF HEART & HABIT — Main Stylesheet
   ============================================================================= */

/* ── 1. Custom Properties ────────────────────────────────────────────────── */
:root {
    --cream:      #E8E2D9;
    --sand:       #BFB3A0;
    --mist:       #C9BFB1;
    --charcoal:   #3D3B38;
    --dark:       #1A1A1A;
    --taupe:      #B5A99A;
    --white:      #FFFFFF;

    --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans:   'DM Sans', system-ui, -apple-system, sans-serif;

    --max-w:  1280px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --ease:   cubic-bezier(.25, .46, .45, .94);
    --trans:  0.35s var(--ease);

    --section-pad: clamp(5rem, 10vw, 10rem);
}

/* ── 2. Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    color: var(--charcoal);
    background-color: var(--cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--trans);
}

ul, ol { list-style: none; }

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

/* ── 3. Accessibility ────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .5rem 1rem;
    background: var(--dark);
    color: var(--cream);
    font-size: .85rem;
    transition: top .2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
    outline: 2px solid var(--charcoal);
    outline-offset: 3px;
}

/* ── 4. Typography ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
    color: var(--dark);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem,   4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2vw,   1.4rem); }

em { font-style: italic; }

p { color: var(--charcoal); }

.section-eyebrow {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--taupe);
    display: block;
    margin-bottom: .75rem;
}

/* ── 5. Layout Helpers ───────────────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}
.section-header p:not(.section-eyebrow) {
    color: var(--taupe);
    margin-top: .75rem;
    font-size: 1rem;
}

/* ── 6. Buttons ──────────────────────────────────────────────────────────── */
.btn-primary,
.btn-outline,
.btn-light {
    display: inline-block;
    padding: .9rem 2.5rem;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: background var(--trans), color var(--trans), border-color var(--trans);
    cursor: pointer;
}

.btn-primary {
    background: var(--dark);
    color: var(--cream);
    border: 1px solid var(--dark);
}
.btn-primary:hover {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: var(--cream);
}

.btn-outline {
    background: transparent;
    color: var(--dark);
    border: 1px solid var(--charcoal);
}
.btn-outline:hover {
    background: var(--dark);
    color: var(--cream);
}

.btn-light {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(232,226,217,.6);
}
.btn-light:hover {
    background: var(--cream);
    color: var(--dark);
    border-color: var(--cream);
}

.btn-text {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--charcoal);
    position: relative;
    display: inline-block;
}
.btn-text::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--charcoal);
    transition: transform var(--trans);
    transform-origin: right;
}
.btn-text:hover::after { transform: scaleX(0); }

/* ── 7. Site Header ──────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    padding-block: 1.75rem;
    background: rgba(232,226,217,.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sand);
    transition: padding var(--trans), background var(--trans), border-color var(--trans);
}

/* Transparent variant — on front page before scroll */
.site-header.is-transparent {
    background: transparent;
    border-color: transparent;
}
.site-header.is-transparent.scrolled {
    background: rgba(232,226,217,.97);
    border-color: var(--sand);
}

/* Force white text/icons when transparent (over dark hero) */
.site-header.is-transparent:not(.scrolled) .site-name-top,
.site-header.is-transparent:not(.scrolled) .site-name-bottom,
.site-header.is-transparent:not(.scrolled) .primary-menu a {
    color: rgba(255,255,255,.9);
}
.site-header.is-transparent:not(.scrolled) .nav-toggle span {
    background: #fff;
}

/* Compact on scroll */
.site-header.scrolled {
    padding-block: 1rem;
}

.header-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo / site name */
.site-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: .15rem;
}
.site-name-top {
    font-family: var(--sans);
    font-size: .58rem;
    font-weight: 400;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--taupe);
    transition: color var(--trans);
}
.site-name-bottom {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--dark);
    letter-spacing: .02em;
    transition: color var(--trans);
}

/* Custom logo */
.header-logo .custom-logo-link img {
    max-height: 55px;
    width: auto;
}

/* Primary nav */
.primary-nav { display: flex; align-items: center; }

.primary-menu {
    display: flex;
    gap: 2.25rem;
    align-items: center;
}
.primary-menu a {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--charcoal);
    position: relative;
    transition: color var(--trans);
}
.primary-menu a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--trans);
}
.primary-menu a:hover::after { width: 100%; }

/* Contact button style */
.primary-menu .menu-btn-contact > a,
.primary-menu li:last-child > a {
    padding: .55rem 1.4rem;
    border: 1px solid var(--sand);
    border-radius: 0;
}
.primary-menu .menu-btn-contact > a::after,
.primary-menu li:last-child > a::after { display: none; }
.primary-menu .menu-btn-contact > a:hover,
.primary-menu li:last-child > a:hover {
    background: var(--dark);
    color: var(--cream);
    border-color: var(--dark);
}

/* Hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 6px;
    z-index: 1001;
}
.nav-toggle span {
    width: 22px;
    height: 1px;
    background: var(--dark);
    display: block;
    transition: transform var(--trans), opacity var(--trans);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── 8. Hero Section ─────────────────────────────────────────────────────── */
.hero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.03);
    transition: transform 8s var(--ease);
}
.is-loaded .hero-media img { transform: scale(1); }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(26,26,26,.4) 0%,
        rgba(26,26,26,.55) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding-inline: var(--gutter);
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.hero-eyebrow {
    font-family: var(--sans);
    font-size: .65rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    display: block;
}

.hero-title {
    font-family: var(--serif);
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    font-weight: 300;
    line-height: 1.05;
    color: #fff;
    letter-spacing: -.02em;
}

.hero-cta {
    display: inline-block;
    padding: 1rem 3rem;
    border: 1px solid rgba(255,255,255,.55);
    color: #fff;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    transition: background var(--trans), border-color var(--trans);
}
.hero-cta:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.85);
}

.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: rgba(255,255,255,.5);
    font-family: var(--sans);
    font-size: .6rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.scroll-line {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,.35);
    animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(1);   opacity: .4; }
    50%       { transform: scaleY(.6); opacity: 1;   }
}

/* ── 9. Intro Strip ──────────────────────────────────────────────────────── */
.intro-strip {
    background: var(--dark);
    padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}

.intro-strip-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}

.intro-divider {
    width: 1px;
    height: 60px;
    background: rgba(255,255,255,.15);
    justify-self: center;
}

.intro-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}
.intro-number {
    font-family: var(--serif);
    font-size: .85rem;
    font-style: italic;
    color: var(--taupe);
    letter-spacing: .05em;
}
.intro-item h3 {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    color: var(--cream);
    letter-spacing: .01em;
}
.intro-item p {
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--taupe);
}

/* ── 10. Services Section ────────────────────────────────────────────────── */
.services {
    padding-block: var(--section-pad);
    background: var(--cream);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--sand);
    border: 1px solid var(--sand);
    max-width: var(--max-w);
    margin-inline: auto;
    margin-top: clamp(2rem, 4vw, 4rem);
}

.service-card {
    background: var(--cream);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--trans);
    position: relative;
}

.service-image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    flex-shrink: 0;
}
.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.service-card:hover .service-image img { transform: scale(1.06); }

.service-image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--mist);
}

.service-content {
    padding: 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}
.service-number {
    font-family: var(--serif);
    font-size: .82rem;
    font-style: italic;
    color: var(--taupe);
    letter-spacing: .05em;
}
.service-content h3 {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.2;
}
.service-content p {
    font-size: .88rem;
    color: var(--taupe);
    line-height: 1.75;
    flex: 1;
    margin-block: .25rem;
}
.service-link {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    transition: gap var(--trans);
}
.service-link:hover { gap: 1rem; }

/* ── 11. Portfolio / Work Grid ───────────────────────────────────────────── */
.portfolio {
    padding-block: var(--section-pad);
    background: var(--mist);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .75rem;
    margin-block-end: clamp(2rem, 4vw, 4rem);
}

/* Asymmetric hero-grid layout */
.portfolio-grid .portfolio-item:nth-child(1) { grid-column: span 7; }
.portfolio-grid .portfolio-item:nth-child(2) { grid-column: span 5; }
.portfolio-grid .portfolio-item:nth-child(3) { grid-column: span 5; }
.portfolio-grid .portfolio-item:nth-child(4) { grid-column: span 7; }
.portfolio-grid .portfolio-item:nth-child(5) { grid-column: span 6; }
.portfolio-grid .portfolio-item:nth-child(6) { grid-column: span 6; }

.portfolio-item {
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
}
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform .65s var(--ease);
    display: block;
}
.portfolio-item:nth-child(odd) img  { aspect-ratio: 3 / 4; }
.portfolio-item:nth-child(2) img    { aspect-ratio: 4 / 3; }
.portfolio-item:hover img { transform: scale(1.06); }

.portfolio-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,26,.7) 0%, transparent 55%);
    opacity: 0;
    transition: opacity var(--trans);
    display: flex;
    align-items: flex-end;
    padding: 1.75rem;
}
.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }
.portfolio-item-overlay h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
}
.portfolio-item-overlay span {
    display: block;
    font-family: var(--sans);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-top: .2rem;
}

.portfolio-footer { text-align: center; padding-top: 1rem; }

/* Archive grid (uniform) */
.portfolio-grid--archive {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.portfolio-grid--archive .portfolio-item { grid-column: span 1 !important; }
.portfolio-grid--archive .portfolio-item img { aspect-ratio: 3 / 4 !important; }

/* ── 12. About Section ───────────────────────────────────────────────────── */
.about {
    padding-block: var(--section-pad);
    background: var(--cream);
}

.about-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
}

.about-image-wrap {
    position: relative;
    z-index: 1;
}
.about-image-wrap img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.about-image-decoration {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    width: 68%;
    height: 68%;
    border: 1px solid var(--sand);
    z-index: -1;
    pointer-events: none;
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.about-content h2 { margin-block: .25rem; }
.about-content p {
    color: var(--taupe);
    font-size: .95rem;
    line-height: 1.85;
}

.about-signature {
    font-family: var(--serif);
    font-size: 3rem;
    font-style: italic;
    font-weight: 300;
    color: var(--charcoal);
    line-height: 1;
    margin-block: .75rem;
}

.about-services-list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-block: .5rem;
}
.about-services-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--charcoal);
}
.about-services-list li::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--taupe);
    flex-shrink: 0;
}

/* ── 13. Journal / Blog Cards ────────────────────────────────────────────── */
.journal {
    padding-block: var(--section-pad);
    background: var(--cream);
    border-top: 1px solid var(--sand);
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-block-end: clamp(2rem, 4vw, 3.5rem);
}

.journal-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.journal-card {
    display: flex;
    flex-direction: column;
}

.journal-card-image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-block-end: 1.25rem;
    flex-shrink: 0;
}
.journal-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s var(--ease);
}
.journal-card:hover .journal-card-image img { transform: scale(1.06); }

.journal-card-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
}

.journal-card-meta,
.journal-card-meta a {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--taupe);
}
.journal-card-meta a:hover { color: var(--charcoal); }

.journal-card h3,
.journal-card-title {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.25;
}
.journal-card h3 a,
.journal-card-title a { color: var(--dark); }
.journal-card h3 a:hover,
.journal-card-title a:hover { color: var(--charcoal); }

.journal-card p {
    font-size: .88rem;
    color: var(--taupe);
    line-height: 1.75;
    flex: 1;
}

.read-more {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--charcoal);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    transition: gap var(--trans);
}
.read-more:hover { gap: .9rem; }

.journal-footer,
.journal-empty { text-align: center; }

/* ── 14. Contact CTA Section ─────────────────────────────────────────────── */
.contact-cta {
    padding-block: clamp(5rem, 10vw, 9rem);
    background: var(--charcoal);
    text-align: center;
}
.contact-cta .section-eyebrow { color: var(--sand); }
.contact-cta h2 {
    color: var(--cream);
    max-width: 620px;
    margin-inline: auto;
    margin-block: 1rem;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}
.contact-cta p {
    color: var(--taupe);
    max-width: 520px;
    margin-inline: auto;
    margin-block-end: 3rem;
    font-size: .95rem;
    line-height: 1.85;
}

/* ── 15. Portfolio Filter ────────────────────────────────────────────────── */
.portfolio-filter {
    background: var(--mist);
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--sand);
}
.portfolio-filter .container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.filter-btn {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--taupe);
    padding: .5rem 1.25rem;
    border: 1px solid transparent;
    transition: all var(--trans);
}
.filter-btn:hover { color: var(--dark); border-color: var(--sand); }
.filter-btn.active {
    color: var(--dark);
    border-color: var(--charcoal);
}

/* ── 16. Archive Hero ────────────────────────────────────────────────────── */
.archive-hero {
    padding: 8rem var(--gutter) 4rem;
    background: var(--mist);
    text-align: center;
}
.archive-hero--journal { background: var(--cream); border-bottom: 1px solid var(--sand); }
.archive-description {
    max-width: 560px;
    margin-inline: auto;
    color: var(--taupe);
    margin-top: 1rem;
    font-size: .9rem;
}

/* ── 17. Blog Index ──────────────────────────────────────────────────────── */
.blog-index { padding-block: var(--section-pad); }

/* ── 18. Single Post ─────────────────────────────────────────────────────── */
.post-hero {
    position: relative;
    height: 65vh;
    min-height: 420px;
    overflow: hidden;
}
.post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,26,.65) 0%, rgba(26,26,26,.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
}
.post-hero-content { padding-block-end: 3.5rem; }
.post-hero-meta {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-block-end: .75rem;
    display: block;
}
.post-hero-meta a { color: rgba(255,255,255,.7); }
.post-hero-meta a:hover { color: #fff; }
.post-hero-content h1 { color: #fff; }

.post-hero-no-image {
    padding: 9rem var(--gutter) 4rem;
    background: var(--mist);
}
.post-hero-no-image .post-hero-meta { color: var(--taupe); }

.post-body {
    max-width: 740px;
    margin-inline: auto;
    margin-block: clamp(3rem, 6vw, 5.5rem);
    padding-inline: var(--gutter);
}
.post-body p { color: var(--charcoal); line-height: 1.9; margin-block-end: 1.5rem; font-size: 1rem; }
.post-body h2 { margin-block: 2.5rem 1rem; }
.post-body h3 { margin-block: 2rem .75rem; }
.post-body ul, .post-body ol { padding-inline-start: 1.5rem; margin-block-end: 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { color: var(--charcoal); line-height: 1.8; margin-block-end: .35rem; }
.post-body img { margin-block: 2.5rem; width: 100%; }
.post-body blockquote {
    border-left: 2px solid var(--sand);
    padding: 1rem 1.5rem;
    margin-block: 2rem;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--charcoal);
    font-style: italic;
}

.post-footer { margin-block: 3rem; }
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 2rem; }
.tag-link {
    font-family: var(--sans);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem .9rem;
    border: 1px solid var(--sand);
    color: var(--taupe);
    transition: all var(--trans);
}
.tag-link:hover { border-color: var(--charcoal); color: var(--dark); }

.post-navigation { border-top: 1px solid var(--sand); }
.post-navigation .nav-links { display: flex; gap: 2rem; padding-block: 2rem; }
.post-navigation .nav-label {
    display: block;
    font-family: var(--sans);
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-block-end: .35rem;
}
.post-navigation .nav-title { font-family: var(--serif); font-size: 1.1rem; color: var(--dark); }

/* ── 19. Single Work ─────────────────────────────────────────────────────── */
.work-hero {
    position: relative;
    height: 75vh;
    min-height: 500px;
    overflow: hidden;
}
.work-hero img { width: 100%; height: 100%; object-fit: cover; }
.work-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,26,26,.65) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
}
.work-hero-content { padding-block-end: 4rem; }
.work-hero-content .section-eyebrow { color: var(--sand); }
.work-hero-content .section-eyebrow a { color: var(--sand); }
.work-hero-content h1 { color: #fff; }

.work-body {
    padding-block: clamp(3rem, 6vw, 5rem);
}
.work-intro-text {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 300;
    color: var(--charcoal);
    line-height: 1.6;
    max-width: 700px;
    margin-block-end: 3rem;
}

.entry-content p { color: var(--charcoal); line-height: 1.85; margin-block-end: 1.5rem; }
.entry-content h2 { margin-block: 2rem .75rem; }
.entry-content img { width: 100%; margin-block: 2rem; }
.entry-content .wp-block-gallery { margin-block: 2.5rem; }
.entry-content figure { margin: 0; }
.entry-content figcaption { font-size: .78rem; color: var(--taupe); text-align: center; margin-top: .5rem; }

.work-footer {
    padding-block: clamp(2rem, 4vw, 4rem);
    border-top: 1px solid var(--sand);
}

.related-work { margin-top: 4rem; }
.related-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.related-work-item {
    position: relative;
    overflow: hidden;
    display: block;
}
.related-work-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .6s var(--ease);
}
.related-work-item:hover img { transform: scale(1.06); }
.related-work-label {
    position: absolute;
    inset: 0;
    background: rgba(26,26,26,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--trans);
    padding: 1rem;
}
.related-work-item:hover .related-work-label { opacity: 1; }
.related-work-label span {
    color: #fff;
    font-family: var(--serif);
    font-size: 1rem;
    text-align: center;
}

/* ── 20. Static Page ─────────────────────────────────────────────────────── */
.page-hero {
    position: relative;
    height: 55vh;
    min-height: 350px;
    overflow: hidden;
}
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,26,26,.45);
    display: flex;
    align-items: center;
}
.page-hero-overlay h1 { color: #fff; }

.page-hero-text {
    padding: 9rem var(--gutter) 4rem;
    background: var(--mist);
}

.page-body {
    max-width: 860px;
    margin-inline: auto;
    padding-block: clamp(3rem, 6vw, 5rem);
    padding-inline: var(--gutter);
}
.page-body p { color: var(--charcoal); line-height: 1.9; margin-block-end: 1.5rem; }
.page-body h2 { margin-block: 2.5rem 1rem; }
.page-body img { width: 100%; margin-block: 2rem; }

/* ── 21. 404 Page ────────────────────────────────────────────────────────── */
.error-404 {
    display: flex;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    background: var(--cream);
}
.error-404 .section-eyebrow { font-size: 1.2rem; letter-spacing: .05em; }
.error-404 h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-block: 1rem 1.5rem; }
.error-404 p { color: var(--taupe); max-width: 420px; margin-inline: auto; margin-block-end: 3rem; }
.error-404-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── 22. Pagination ──────────────────────────────────────────────────────── */
.pagination { text-align: center; padding-block: 3rem; }
.page-numbers {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.page-numbers a,
.page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--sand);
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--charcoal);
    transition: all var(--trans);
}
.page-numbers a:hover { border-color: var(--charcoal); background: var(--charcoal); color: var(--cream); }
.page-numbers .current { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.page-numbers .prev, .page-numbers .next {
    width: auto;
    padding-inline: 1.25rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .65rem;
    font-weight: 500;
}

/* ── 23. Site Footer ─────────────────────────────────────────────────────── */
.site-footer {
    background: var(--dark);
    color: var(--taupe);
    padding: clamp(4rem, 8vw, 7rem) 0 0;
}

.footer-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-block-end: clamp(3rem, 5vw, 5rem);
}

.footer-brand { max-width: 300px; }
.footer-logo {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--cream);
    margin-block-end: .75rem;
    letter-spacing: .02em;
}
.footer-brand p {
    font-size: .8rem;
    line-height: 1.7;
    color: var(--taupe);
}
.footer-tagline { margin-top: .5rem; font-style: italic; font-family: var(--serif); }

.footer-nav h4,
.footer-connect h4 {
    font-family: var(--sans);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sand);
    margin-block-end: 1.5rem;
}
.footer-menu {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.footer-menu a {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--taupe);
    transition: color var(--trans);
}
.footer-menu a:hover { color: var(--cream); }

.footer-social {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.footer-social a {
    font-family: var(--sans);
    font-size: .8rem;
    color: var(--taupe);
    letter-spacing: .05em;
    transition: color var(--trans);
}
.footer-social a:hover { color: var(--cream); }

.footer-contact-line {
    margin-top: 1.5rem;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.footer-contact-line a { color: var(--sand); }
.footer-contact-line a:hover { color: var(--cream); }

.footer-bottom {
    max-width: var(--max-w);
    margin-inline: auto;
    padding: 1.5rem var(--gutter);
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-bottom p {
    font-size: .7rem;
    letter-spacing: .06em;
    color: rgba(181,169,154,.6);
}
.footer-credit { font-family: var(--serif); font-style: italic; }

/* ── 24. Scroll Animations ───────────────────────────────────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── 25. WordPress Block Editor Compatibility ────────────────────────────── */
.wp-block-image img { width: 100%; }
.wp-block-quote {
    border-left: 2px solid var(--sand);
    padding: 1rem 1.5rem;
    margin-block: 2rem;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    color: var(--charcoal);
}
.wp-block-separator {
    border: none;
    border-top: 1px solid var(--sand);
    margin-block: 2.5rem;
}
.alignfull  { max-width: 100% !important; margin-inline: calc(var(--gutter) * -1) !important; }
.alignwide  { max-width: min(1100px, 100%) !important; }

/* ── 26. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .intro-strip-inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .intro-divider { width: 60px; height: 1px; }

    .services-grid { grid-template-columns: 1fr; }
    .service-image { aspect-ratio: 16 / 9; }

    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid .portfolio-item { grid-column: span 1 !important; }
    .portfolio-grid .portfolio-item img { aspect-ratio: 4 / 3 !important; }

    .about-inner { grid-template-columns: 1fr; gap: 3rem; }
    .about-image-wrap { max-width: 500px; margin-inline: auto; }
    .about-image-decoration { display: none; }

    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { max-width: 100%; grid-column: span 2; }

    .related-work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .primary-nav {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        width: min(320px, 90vw);
        background: var(--cream);
        border-left: 1px solid var(--sand);
        padding: 6rem 2rem 3rem;
        transform: translateX(100%);
        transition: transform var(--trans);
        z-index: 999;
        flex-direction: column;
        align-items: flex-start;
    }
    .primary-nav.is-open { transform: translateX(0); }

    .primary-menu {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        width: 100%;
    }
    .primary-menu a { font-size: .85rem; }
    .primary-menu .menu-btn-contact > a,
    .primary-menu li:last-child > a { width: 100%; text-align: center; }

    .nav-toggle { display: flex; }

    .journal-grid { grid-template-columns: 1fr; }
    .journal-grid--wide { grid-template-columns: 1fr; }

    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-grid--archive { grid-template-columns: repeat(2, 1fr); }

    .footer-inner { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }

    .related-work-grid { grid-template-columns: 1fr; }

    .post-navigation .nav-links { flex-direction: column; }

    .intro-strip-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .intro-divider { display: none; }

    .hero-title { font-size: clamp(3rem, 12vw, 4.5rem); }
}

@media (max-width: 480px) {
    .services-grid { gap: 1px; }
    .portfolio-grid--archive { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .about-content { text-align: center; }
    .about-services-list li { justify-content: center; }
    .about-signature { text-align: center; }
}

/* ── 27. Print ───────────────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .hero-scroll, .contact-cta, .journal { display: none; }
    body { background: white; color: black; }
}