/* Custom CSS for CurlyGirlyTravely — edit this file for visual tweaks */

/* 
    === Astra Colors === 
    Color1: #2B2A28
    Color2: #8E7A55
    Color3: #2B2A28
    Color4: #5C5853
    Color5: #FAF7F2
    Color6: #F0EAE0
    Color7: #A8917A
    Color8: #E8DFD2
    Color9: #FFFFFF
*/

/* === Social icons === */
.cgt-socials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    line-height: 1;
}

.cgt-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cgt-social-link:hover,
.cgt-social-link:focus {
    transform: scale(1.1);
    opacity: 0.92;
    color: #ffffff;
}

.cgt-social-facebook {
    background: #1877F2;
    border-radius: 50%;
}

.cgt-social-instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    border-radius: 8px;
}

.cgt-social-youtube {
    background: #FF0000;
    border-radius: 50%;
}

/* === Hero card grid (Kadence Info Box) === */

/* Target the actual image — simpler than wrestling with Kadence's nested wrappers */
/* Force the image into a 4:5 box regardless of source dimensions */
.kt-row-column-wrap .kt-blocks-info-box-media-container {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 10px;
}

.kt-row-column-wrap .kt-blocks-info-box-media {
    width: 100%;
    height: 100%;
}

.kt-row-column-wrap img.kt-info-box-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
    border-radius: 10px;
}

/* Card is a flex column so content sits naturally below the image */
.kt-row-column-wrap .kt-blocks-info-box-link-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

/* Force all columns in the row to equal height */
.kt-row-column-wrap.kt-has-3-columns {
    align-items: stretch !important;
}

.kt-row-column-wrap .wp-block-kadence-column > .kt-inside-inner-col {
    height: 100%;
}

/* Text content below the image */
.kt-row-column-wrap .kt-infobox-textcontent {
    padding: 4px 4px 0;
}

.kt-row-column-wrap .kt-blocks-info-box-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 20px !important;
    line-height: 1.25 !important;
}

.kt-row-column-wrap .kt-blocks-info-box-text {
    font-size: 14px;
    line-height: 1.6;
    color: #5C5853;
    margin: 0;
}

/* Force ALL Kadence wrapper layers to fill the aspect-ratio container */
.kt-row-column-wrap .kadence-info-box-image-inner-intrisic-container,
.kt-row-column-wrap .kadence-info-box-image-intrisic,
.kt-row-column-wrap .kadence-info-box-image-inner-intrisic {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    position: relative !important;
}

/* Belt-and-braces: ensure the rounded clipping is fully enforced */
.kt-row-column-wrap .kt-blocks-info-box-media-container {
    position: relative;
    isolation: isolate;
}

/* === Featured card asymmetric magazine layout === */
/* For 2-column "left-golden" Kadence rows: left = wide featured, right = stacked */

/* Right column: stack the 2 cards vertically and distribute height */
.kt-row-layout-left-golden > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.kt-row-layout-left-golden > .wp-block-kadence-column:last-child .wp-block-kadence-infobox {
    flex: 1;
}

/* Featured (left) card: landscape 4:3 image ratio */
.kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kt-blocks-info-box-media-container {
    aspect-ratio: 4 / 3 !important;
}

/* Featured card title bigger to emphasize hierarchy */
.kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kt-blocks-info-box-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
}

/* Right column cards: smaller titles to match smaller cards */
.kt-row-layout-left-golden > .wp-block-kadence-column:last-child .kt-blocks-info-box-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
}

/* Right column cards: tighter description text */
.kt-row-layout-left-golden > .wp-block-kadence-column:last-child .kt-blocks-info-box-text {
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Force the Kadence image wrappers in the featured card to fill correctly */
.kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kadence-info-box-image-inner-intrisic-container,
.kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kadence-info-box-image-intrisic,
.kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kadence-info-box-image-inner-intrisic {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    position: relative !important;
}

.kt-row-layout-left-golden > .wp-block-kadence-column:first-child img.kt-info-box-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Mobile: stack everything to a single column */
@media (max-width: 768px) {
    .kt-row-layout-left-golden > .wp-block-kadence-column:first-child .kt-blocks-info-box-media-container {
        aspect-ratio: 4 / 5 !important;
    }
    .kt-row-layout-left-golden > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
        flex-direction: column;
    }
}

/* Subtle hover lift on the entire card */
.kt-row-column-wrap .wp-block-kadence-infobox {
    transition: transform 0.25s ease;
}

.kt-row-column-wrap .wp-block-kadence-infobox:hover {
    transform: translateY(-4px);
}

.kt-row-column-wrap .wp-block-kadence-infobox:hover img.kt-info-box-image {
    filter: brightness(1.03);
    transition: filter 0.25s ease;
}

/* =========================================================
   Phase 3: Polish pass
   ========================================================= */

/* === Newsletter section (MailerLite embed) === */
.ml-form-embedContainer {
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center;
}

.ml-form-embedContainer .ml-form-align-center {
    text-align: center;
}

.ml-form-embedContainer .ml-form-embedContent {
    text-align: center;
    margin-bottom: 18px;
}

.ml-form-embedContainer .ml-form-embedContent h4 {
    font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #2B2A28 !important;
    line-height: 1.2 !important;
    margin: 0 0 8px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.ml-form-embedContainer .ml-form-embedContent p {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    color: #5C5853 !important;
    margin: 0 !important;
}

.ml-form-embedContainer .ml-form-horizontalRow {
    display: flex !important;
    gap: 0 !important;
    justify-content: center;
    max-width: 420px;
    margin: 0 auto;
}

.ml-form-embedContainer .ml-input-horizontal {
    flex: 1;
}

.ml-form-embedContainer input[type="email"] {
    width: 100% !important;
    padding: 12px 18px !important;
    border: 1px solid #E8DFD2 !important;
    border-radius: 999px 0 0 999px !important;
    background: #FFFFFF !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    color: #2B2A28 !important;
}

.ml-form-embedContainer .ml-button-horizontal button {
    padding: 12px 28px !important;
    background: #2B2A28 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 999px 999px 0 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ml-form-embedContainer .ml-button-horizontal button:hover {
    background: #5C4D38 !important;
}

/* Hide the mobile-specific second button on desktop */
@media (min-width: 768px) {
    .ml-mobileButton-horizontal {
        display: none !important;
    }
}

/* === "More from the journal" heading alignment === */
/* Pad it so it aligns with the cards below it */
.entry-content > h2 {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 32px;
    box-sizing: border-box;
}

/* === Khadakwasla card font fix === */
/* Reset any code/preformatted styling that leaked into journal card descriptions */
.kt-row-column-wrap .kt-blocks-info-box-text,
.kt-row-column-wrap .kt-blocks-info-box-text code,
.kt-row-column-wrap .kt-blocks-info-box-text pre {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    background: transparent !important;
    padding: 0 !important;
    white-space: normal !important;
    font-size: 14px !important;
    color: #5C5853 !important;
}

/* === "READ MORE →" link in About section === */
.entry-content a[href*="/about"]:not(.custom-logo-link):not(.menu-link) {
    /* Default catchall — refine if needed */
}

/* Better: style any standalone paragraph that's just "READ MORE →" */
.entry-content p > a {
    color: #8E7A55;
    text-decoration: none;
    border-bottom: 1px solid #8E7A55;
    padding-bottom: 2px;
    font-size: 13px;
    letter-spacing: 1.5px;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.entry-content p > a:hover {
    color: #5C4D38;
    border-color: #5C4D38;
}

/* === Section spacing rhythm === */
/* More breathing room between hero, journal grid, About, newsletter */
.wp-block-kadence-rowlayout {
    padding-top: 32px;
    padding-bottom: 32px;
}

/* === Footer typography === */
.site-footer,
.site-footer .footer-widget-area,
.site-footer .ast-builder-html-element {
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: #5C5853;
}

/* === CGT footer brand block === */
.cgt-footer-brand {
    text-align: center;
    padding: 12px 0;
}

.cgt-footer-brand .cgt-wordmark {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 24px;
    color: #2B2A28;
    display: block;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.cgt-footer-brand .cgt-tagline {
    font-size: 11px;
    letter-spacing: 2px;
    color: #A8917A;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cgt-footer-brand .cgt-socials {
    justify-content: center;
}

/* === Footer copyright strip === */
.site-below-footer-wrap,
.site-below-footer-inner-wrap,
.ast-builder-grid-row-container.site-below-footer-wrap {
    background: #FAF7F2 !important;
    border-top: 1px solid #E8DFD2;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: auto !important;
}

.site-below-footer-wrap .ast-builder-html-element,
.site-below-footer-wrap [data-section="section-footer-copyright"] {
    font-size: 11px !important;
    letter-spacing: 0.5px;
    color: #A8917A !important;
}

/* Tighten the main footer row too */
.site-footer .site-primary-footer-wrap {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
}

/* Smaller featured image */
.kt-row-layout-left-golden>.wp-block-kadence-column:first-child .kt-blocks-info-box-media-container {
    aspect-ratio: 16 / 9 !important;
    /* was 4/3, this is more rectangular */
}

/* Better focal point on the kachori */
.kt-row-layout-left-golden>.wp-block-kadence-column:first-child img.kt-info-box-image {
    object-position: center 25% !important;
    /* favors the top portion where the food is */
}

/* === Right column height matching (fix for stacked cards overflowing) === */

/* Force the row to stretch its columns to equal height */
.kt-row-layout-left-golden,
.kt-row-layout-left-golden.kt-row-column-wrap {
    align-items: stretch !important;
}

/* Right column: flex container that splits height between its two cards */
.kt-row-layout-left-golden>.wp-block-kadence-column:last-child>.kt-inside-inner-col {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* Each right-column card takes equal share of available height */
.kt-row-layout-left-golden>.wp-block-kadence-column:last-child .wp-block-kadence-infobox {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.kt-row-layout-left-golden>.wp-block-kadence-column:last-child .kt-blocks-info-box-link-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Drop the 4:5 aspect ratio on right-column images — let flex decide */
.kt-row-layout-left-golden>.wp-block-kadence-column:last-child .kt-blocks-info-box-media-container {
    aspect-ratio: auto !important;
    flex: 1;
    min-height: 0;
}

/* Mobile: restore aspect ratio so cards don't collapse when stacked */
@media (max-width: 768px) {
    .kt-row-layout-left-golden>.wp-block-kadence-column:last-child .kt-blocks-info-box-media-container {
        aspect-ratio: 4 / 5 !important;
        flex: none;
    }

    .kt-row-layout-left-golden>.wp-block-kadence-column:last-child>.kt-inside-inner-col {
        height: auto;
    }
}

.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-title a {
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 24px !important;
    color: #2B2A28 !important;
    font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
}

/* Nav links — Hanken Grotesk, uppercase, tracked (mockup chrome) */
.main-header-menu .menu-link,
.ast-nav-menu .menu-link,
.main-header-menu a,
.ast-nav-menu a {
    font-weight: 400 !important;
    font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #5C5853 !important;
}

.main-header-menu .current-menu-item > .menu-link,
.ast-nav-menu .current-menu-item > .menu-link {
    color: #2B2A28 !important;
    font-weight: 600 !important;
}

/* Cream header with a hairline rule, matching the mockup */
.site-header,
.ast-primary-header-bar,
.main-header-bar {
    background-color: #FAF7F2 !important;
    border-bottom: 1px solid #E8DFD2 !important;
}

/* Search icon in the brand gold */
.ast-header-search .astra-search-icon,
.ast-header-search .ast-icon {
    color: #A8917A !important;
}

/* Mobile-only search button, injected next to the hamburger by assets/search.js.
   Sits inside .site-header-primary-section-right which is a flex row, so this lays
   out to the left of the hamburger automatically. */
.cgt-mobile-search-btn {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    margin: 0 4px 0 0;
    color: #A8917A;
    cursor: pointer;
    align-self: center;
    line-height: 0;
}
.cgt-mobile-search-btn:hover,
.cgt-mobile-search-btn:focus { color: #7a6650; outline: none; }
.cgt-mobile-search-btn svg { display: block; }
@media (max-width: 921px) {
    .cgt-mobile-search-btn { display: inline-flex; align-items: center; }
    /* Make sure the right-side header section is a horizontal flex row. Astra
       sometimes stacks elements in a column inside this container on mobile. */
    .ast-mobile-header-wrap .site-header-primary-section-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }
}

.ast-site-title-wrap,
.site-branding,
.ast-site-title-wrap .site-title,
.ast-site-title-wrap .site-title a {
    padding: 0 !important;
}

.site-header-primary-section-left .ast-builder-layout-element,
.site-header-primary-section-left .site-branding,
.site-header-primary-section-left .ast-site-title-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* ============================================================
   About page (107) — mockup "AboutA" editorial rebuild
   Tokens mirror the shared design system (CG palette + fonts).
   ============================================================ */
body.page-id-107 {
    --cg-bg: #FAF7F2;
    --cg-bgAlt: #F0EAE0;
    --cg-ink: #2B2A28;
    --cg-soft: #5C5853;
    --cg-gold: #A8917A;
    --cg-goldDeep: #8E7A55;
    --cg-line: #E8DFD2;
    background: var(--cg-bg);
}

/* Let the page bands run edge-to-edge; kill stray top/bottom gaps */
body.page-id-107 .entry-content > .alignfull {
    margin-top: 0;
    margin-bottom: 0;
}
body.page-id-107 .entry-content { margin-top: 0; }

/* Helper classes (mirror mockup .ser / .em / .kick) */
.cgt-about .ser,
.cgt-about .cgt-h1,
.cgt-about .cgt-h3,
.cgt-about .cgt-card-title,
.cgt-about .cgt-stat-n,
.cgt-about .cgt-quote,
.cgt-about .cgt-sign {
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-weight: 400;
}
.cgt-about em {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    color: var(--cg-goldDeep);
}
.cgt-about .cgt-kick {
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--cg-gold);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.4;
}

/* Neutralize WP's block-gap margin-block-start inside nested About groups.
   Spacing here is controlled explicitly (margins + grid gap); the stray 24px
   top-margin was offsetting grid cards/stats so their top edges didn't line up. */
.cgt-about .wp-block-group > * { margin-block-start: 0 !important; }

/* — Section 1: hero intro — */
.cgt-hero { text-align: center; }
.cgt-hero .cgt-kick { margin-bottom: 14px; }
.cgt-hero .cgt-h1 {
    font-size: 44px;
    line-height: 1.12;
    max-width: 720px;
    margin: 0 auto;
    color: var(--cg-ink);
}

/* — Section 2: portrait + story — */
.cgt-story {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: center;
}
.cgt-story .cgt-ph-clay { aspect-ratio: 4/5; border-radius: 16px; }
.cgt-story .cgt-lead {
    font-family: "Newsreader", Georgia, serif;
    font-size: 17px;
    line-height: 1.8;
    color: var(--cg-ink);
    margin: 0 0 18px;
}
.cgt-story .cgt-bodytext {
    font-size: 14px;
    line-height: 1.85;
    color: var(--cg-soft);
    margin: 0 0 16px;
}
.cgt-story .cgt-bodytext.is-last { margin-bottom: 26px; }
.cgt-sign { font-size: 30px; color: var(--cg-ink); margin: 0; line-height: 1.1; font-style: italic; }
.cgt-credit {
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--cg-gold);
    margin: 4px 0 0;
    text-transform: uppercase;
}

/* — Section 3: pillars — */
.cgt-pillars-head { text-align: center; margin-bottom: 34px; }
.cgt-pillars-head .cgt-kick { margin-bottom: 10px; }
.cgt-pillars-head .cgt-h3 { font-size: 28px; margin: 0; color: var(--cg-ink); }
.cgt-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* space between the "Three slow threads" heading and the cards
   (high-specificity to beat WP's generated blockGap:0 container rule) */
body.page-id-107 .cgt-pillars { margin-top: 24px; }
.cgt-card {
    background: var(--cg-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--cg-line);
}
.cgt-card .cgt-ph { border-radius: 0; aspect-ratio: 16/10; }
.cgt-card-body { padding: 20px 22px 24px; }
.cgt-card-body .cgt-kick { margin-bottom: 8px; }
.cgt-card-title { font-size: 19px; margin: 0 0 8px; color: var(--cg-ink); }
.cgt-card-desc { font-size: 13px; line-height: 1.65; color: var(--cg-soft); margin: 0; }

/* — Section 4: stats — removed from the About page markup (page 107) per request.
   The .cgt-stat* rules below are now unused but kept harmless in case it returns. */
.cgt-stat-n { font-size: 40px; line-height: 1; color: var(--cg-goldDeep); margin: 0; }
.cgt-stat-l {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--cg-soft);
    margin: 8px 0 0;
    text-transform: uppercase;
}

/* — Section 5: pull quote — */
.cgt-quote {
    font-size: 30px;
    line-height: 1.4;
    max-width: 760px;
    margin: 0 auto;
    color: var(--cg-ink);
}

/* — Gradient image placeholders (swap for real photos) — */
.cgt-ph { width: 100%; }
.cgt-ph-clay  { background: linear-gradient(150deg, #E5D4C0 0%, #B59E89 100%); }
.cgt-ph-sage  { background: linear-gradient(150deg, #C7D4C1 0%, #6B8266 100%); }
.cgt-ph-terra { background: linear-gradient(150deg, #F4D6C3 0%, #A87858 100%); }
.cgt-ph-gold  { background: linear-gradient(150deg, #D4CAB4 0%, #8E7A55 100%); }

/* — Real photos slot into the same boxes — */
.cgt-story .cgt-portrait { margin: 0; width: 100%; }
.cgt-story .cgt-portrait img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 16px; display: block; }
.cgt-card .cgt-cardimg img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }

/* — Mobile — */
@media (max-width: 768px) {
    body.page-id-107 .cgt-band { padding-left: 20px !important; padding-right: 20px !important; }
    .cgt-hero .cgt-h1 { font-size: 32px; }
    .cgt-story { grid-template-columns: 1fr; gap: 28px; }
    .cgt-pillars { grid-template-columns: 1fr; }
    .cgt-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .cgt-quote { font-size: 24px; }
}

/* ============================================================
   Global footer + "Slow Letters" newsletter (mockup chrome)
   ============================================================ */
/* Release Astra's footer container so our bands run full-bleed */
.site-footer .ast-container,
.site-primary-footer-wrap,
.site-primary-footer-wrap .ast-builder-grid-row-container-inner {
    max-width: 100% !important;
    padding: 0 !important;
}
.site-primary-footer-inner-wrap.ast-builder-footer-grid-columns { display: block !important; }
.site-footer-primary-section-1,
.site-footer-primary-section-3 { display: none !important; }
.site-footer-primary-section-2 { width: 100% !important; }
.site-footer .footer-widget-area { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.site-footer .site-primary-footer-wrap { padding: 0 !important; }
.site-below-footer-wrap { display: none !important; }
.site-footer { border: 0 !important; background: transparent !important; }

/* Newsletter band */
.cgt-newsletter {
    background: #F0EAE0;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding: 40px 56px;
    text-align: center;
}
.cgt-nl-inner { max-width: 1080px; margin: 0 auto; }
.cgt-newsletter .cgt-kick {
    color: #A8917A; font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 12px;
}
.cgt-nl-title {
    font-family: "Newsreader", Georgia, serif; font-size: 26px;
    color: #2B2A28; margin-bottom: 6px;
}
.cgt-nl-sub {
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 13px;
    color: #5C5853; margin-bottom: 20px;
}
.cgt-nl-form {
    display: flex; gap: 0; background: #fff; border-radius: 999px;
    padding: 5px; width: 100%; max-width: 380px; margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.cgt-nl-input,
.cgt-nl-input:focus,
.cgt-nl-input:focus-visible {
    flex: 1 1 auto; min-width: 0; padding: 9px 16px;
    font-size: 13px; color: #5C5853;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
    /* override Astra's default input border + focus box-shadow so only the
       outer white pill shows (no square inside) */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}
.cgt-nl-join {
    background: #2B2A28; color: #fff; border: none; padding: 9px 20px;
    font-size: 11px; letter-spacing: 1.5px; border-radius: 999px; cursor: pointer;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.cgt-nl-join:hover { background: #5C4D38; }
.cgt-nl-join[disabled] { opacity: .7; cursor: default; }

/* subscribe status message */
.cgt-nl-msg { min-height: 0; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 13px; line-height: 1.5; margin-top: 12px; transition: opacity .2s; }
.cgt-nl-msg:empty { margin-top: 0; }
.cgt-nl-msg.is-ok { color: #6B7A53; }
.cgt-nl-msg.is-err { color: #A8553F; }

/* Dark footer */
.cgt-foot { background: #2B2A28; color: #E9E2D6; padding: 46px 56px 28px; }
.cgt-foot-inner { max-width: 1080px; margin: 0 auto; }
.cgt-foot-top {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px;
    padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cgt-foot-word {
    font-family: "Newsreader", Georgia, serif; font-style: italic;
    font-size: 24px; color: #FAF7F2; margin-bottom: 12px;
}
.cgt-foot-tag {
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 13px;
    line-height: 1.7; color: rgba(233,226,214,0.7); max-width: 280px; margin: 0;
}
.cgt-foot-h {
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(168,145,122,0.9); margin-bottom: 14px;
}
.cgt-foot-col a {
    display: block; width: fit-content;
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 13px;
    color: rgba(233,226,214,0.82); margin-bottom: 9px; text-decoration: none;
}
.cgt-foot-col a:hover { color: #fff; }
.cgt-foot-bottom {
    display: flex; justify-content: space-between; align-items: center; padding-top: 22px;
}
.cgt-foot-copy {
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 10px;
    letter-spacing: 1px; color: #A8917A; text-transform: uppercase;
}

/* Footer socials → keep the colorful brand icons (just size them for the footer) */
.cgt-foot .cgt-socials { gap: 12px; }
.cgt-foot .cgt-social-link {
    width: 30px !important; height: 30px !important;
    color: #fff !important;
}

/* Mobile footer */
@media (max-width: 768px) {
    .cgt-foot-top { grid-template-columns: 1fr; gap: 28px; }
    .cgt-foot, .cgt-newsletter { padding-left: 24px; padding-right: 24px; }
    .cgt-foot-bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ============================================================
   Contact page (100) — mockup "ContactA" (split + form card)
   ============================================================ */
body.page-id-100 {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
    background: var(--cg-bg);
}
body.page-id-100 .entry-content { margin-top: 0; }
body.page-id-100 .entry-content > .alignfull { margin-top: 0; margin-bottom: 0; }

/* helper classes */
.cgt-contact .ser,
.cgt-contact .cgt-h1,
.cgt-contact .cgt-formcard-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.cgt-contact em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--cg-goldDeep); }
.cgt-contact .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin: 0; line-height: 1.4; }
/* kill WP block-gap inside nested contact groups (same fix as About) */
.cgt-contact .wp-block-group > * { margin-block-start: 0 !important; }

/* — Section 1: split intro + form card — */
.cgt-contact-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
.cgt-contact-intro .cgt-kick { margin-bottom: 16px; }
.cgt-contact-intro .cgt-h1 { font-size: 42px; line-height: 1.15; margin: 0 0 18px; color: var(--cg-ink); }
.cgt-contact-lead { font-size: 15px; line-height: 1.8; color: var(--cg-soft); max-width: 380px; margin: 0 0 32px; }

/* social rail */
.cgt-social-rail { display: flex; flex-direction: column; }
.cgt-rail-item { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-top: 1px solid var(--cg-line); cursor: pointer; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-rail-item:hover { transform: translateY(-2px); }
.cgt-rail-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--cg-bgAlt); color: var(--cg-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cgt-rail-ic svg { width: 17px; height: 17px; }
.cgt-rail-label { font-size: 11px; letter-spacing: 1.5px; color: var(--cg-gold); text-transform: uppercase; }
.cgt-rail-handle { font-size: 14px; color: var(--cg-ink); }
.cgt-rail-arrow { margin-left: auto; color: var(--cg-gold); display: inline-flex; }
.cgt-rail-arrow svg { width: 16px; height: 16px; }

/* Colorful brand icon circles (matches footer/about socials). Targeted by href so
   no markup change is needed. White glyph on the brand colour. */
.cgt-rail-item[href*="instagram"] .cgt-rail-ic { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); color: #fff; }
.cgt-rail-item[href*="youtube"]   .cgt-rail-ic { background: #FF0000; color: #fff; }
.cgt-rail-item[href*="facebook"]  .cgt-rail-ic { background: #1877F2; color: #fff; }
.cgt-rail-item[href^="mailto"]    .cgt-rail-ic { background: #8E7A55; color: #fff; }

/* form card */
.cgt-contact-formcard { background: var(--cg-bgAlt); border-radius: 20px; padding: 32px; align-self: start; }
.cgt-formcard-title { font-size: 22px; color: var(--cg-ink); margin: 0 0 4px; }
.cgt-formcard-sub { font-size: 13px; color: var(--cg-soft); margin: 0 0 24px; }

/* — SureForms styled to match the mockup — */
.cgt-contact-formcard .srfm-input-content label,
.cgt-contact-formcard .srfm-label,
.cgt-contact-formcard label .srfm-block-label {
    font-size: 10px !important; letter-spacing: 1.5px !important; color: var(--cg-gold) !important;
    text-transform: uppercase !important; font-weight: 500 !important; margin-bottom: 8px !important;
    font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}
.cgt-contact-formcard .srfm-input-common,
.cgt-contact-formcard input[type="text"],
.cgt-contact-formcard input[type="email"],
.cgt-contact-formcard textarea {
    width: 100% !important; border: 1px solid var(--cg-line) !important; background: #fff !important;
    border-radius: 10px !important; padding: 12px 14px !important; font-size: 14px !important;
    color: var(--cg-ink) !important; box-shadow: none !important;
    font-family: "Hanken Grotesk", system-ui, sans-serif !important;
}
.cgt-contact-formcard textarea { resize: none !important; line-height: 1.6 !important; min-height: 120px !important; }
.cgt-contact-formcard .srfm-submit-btn,
.cgt-contact-formcard button[type="submit"],
.cgt-contact-formcard .srfm-button {
    background: var(--cg-ink) !important; color: #fff !important; border: none !important;
    border-radius: 999px !important; padding: 13px 28px !important; font-size: 11px !important;
    letter-spacing: 1.8px !important; text-transform: uppercase !important; cursor: pointer !important;
    font-family: "Hanken Grotesk", system-ui, sans-serif !important; box-shadow: none !important;
}
.cgt-contact-formcard .srfm-submit-btn:hover { background: #5C4D38 !important; }

/* — Section 2: based-in info strip — */
.cgt-contact-info { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.cgt-info-item { display: flex; align-items: center; gap: 14px; }
.cgt-info-ic { color: var(--cg-goldDeep); display: inline-flex; }
.cgt-info-ic svg { width: 20px; height: 20px; }
.cgt-info-label { margin-bottom: 3px; }
.cgt-info-val { font-size: 14px; color: var(--cg-ink); }

/* — Mobile — */
@media (max-width: 768px) {
    body.page-id-100 .cgt-band { padding-left: 20px !important; padding-right: 20px !important; }
    .cgt-contact-split { grid-template-columns: 1fr; gap: 36px; }
    .cgt-contact-intro .cgt-h1 { font-size: 32px; }
    .cgt-contact-formcard { padding: 24px; }
    .cgt-contact-info { flex-direction: column; align-items: flex-start; gap: 22px; }
}
/* info strip top divider */
body.page-id-100 .cgt-contact-infoband { border-top: 1px solid var(--cg-line); }
.cgt-rail-txt { display: flex; flex-direction: column; gap: 1px; }
.cgt-info-txt { display: flex; flex-direction: column; }
/* SureForms container: drop its white bg so the cream card shows through */
.cgt-contact-formcard .srfm-form-container,
.cgt-contact-formcard .srfm-form-container.srfm-bg-color {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
}
.cgt-contact-formcard .srfm-form { gap: 0 !important; }
.cgt-contact-formcard .srfm-block,
.cgt-contact-formcard .srfm-block-single { margin-bottom: 16px !important; }
.cgt-contact-formcard .srfm-submit-container { margin-top: 4px !important; }
/* collapse SureForms' reserved (empty) error slot so field gaps match the mockup */
.cgt-contact-formcard .srfm-error-wrap:empty { display: none !important; }
.cgt-contact-formcard .srfm-input-common { margin-bottom: 0 !important; }
.cgt-contact-formcard .srfm-block,
.cgt-contact-formcard .srfm-block-single { margin-bottom: 18px !important; }

/* === Contact page refinements === */
/* #3 space above the social rail */
body.page-id-100 .cgt-social-rail { margin-top: 24px; }
/* #4 tighten the gap between rail label and handle */
.cgt-rail-txt { gap: 0; }
.cgt-rail-label { line-height: 1.25; margin: 0; }
.cgt-rail-handle { line-height: 1.25; margin: 0; }
/* labels now render on top of the inputs — style + space them */
.cgt-contact-formcard .srfm-block-label,
.cgt-contact-formcard .srfm-input-label,
.cgt-contact-formcard label.srfm-block-label,
.cgt-contact-formcard .srfm-block > label:first-child {
    display: block !important;
    font-size: 10px !important; letter-spacing: 1.5px !important; color: var(--cg-gold) !important;
    text-transform: uppercase !important; font-weight: 500 !important; margin-bottom: 8px !important;
    font-family: "Hanken Grotesk", system-ui, sans-serif !important; line-height: 1.4 !important;
}
/* hide SureForms required-asterisk clutter to keep labels clean */
.cgt-contact-formcard .srfm-required { color: var(--cg-gold) !important; }

/* ============================================================
   Travel page (13345) — mockup "TravelA" (featured + filter + grid)
   ============================================================ */
/* Scoped to the .cgt-travel wrapper (in page content) — NOT the page ID, so it
   works regardless of the page's ID on each environment (new pages differ live vs local). */
.cgt-travel {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
}
.entry-content:has(> .cgt-travel) { margin-top: 0; }
.entry-content > .cgt-travel.alignfull { margin-top: 0; margin-bottom: 0; }

.cgt-travel .ser, .cgt-travel .cgt-h1,
.cgt-tfeat-title, .cgt-tcard-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.cgt-travel em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--cg-goldDeep); }
.cgt-travel .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin: 0 0 12px; line-height: 1.4; }
.cgt-travel .wp-block-group > * { margin-block-start: 0 !important; }

/* intro head */
.cgt-travel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 44px; margin-bottom: 26px; }
.cgt-travel-head .cgt-h1 { font-size: 44px; line-height: 1.1; margin: 0; color: var(--cg-ink); }
.cgt-travel-sub { font-size: 14px; line-height: 1.7; color: var(--cg-soft); max-width: 280px; margin: 0; padding-bottom: 6px; }

/* gradient fallbacks for cards without a featured image */
.cgt-ph-sage   { background-color: #9fb295; background-image: linear-gradient(150deg, #C7D4C1 0%, #6B8266 100%); }
.cgt-ph-terra  { background-color: #c89a78; background-image: linear-gradient(150deg, #F4D6C3 0%, #A87858 100%); }
.cgt-ph-gold   { background-color: #b3a071; background-image: linear-gradient(150deg, #D4CAB4 0%, #8E7A55 100%); }
.cgt-ph-clay   { background-color: #cdb59e; background-image: linear-gradient(150deg, #E5D4C0 0%, #B59E89 100%); }
.cgt-ph-olive  { background-color: #a9ab84; background-image: linear-gradient(150deg, #D4D2B4 0%, #7E8255 100%); }
.cgt-ph-dusk   { background-color: #9a93a3; background-image: linear-gradient(150deg, #C9C2CE 0%, #6E6678 100%); }
.cgt-ph-ocean  { background-color: #8fa7aa; background-image: linear-gradient(150deg, #BFD0D2 0%, #5E7E84 100%); }
.cgt-ph-rose   { background-color: #d4b59a; background-image: linear-gradient(150deg, #E8D4C0 0%, #C9A989 100%); }
.cgt-ph-taupe  { background-color: #b0a092; background-image: linear-gradient(150deg, #D9CABF 0%, #8E7A66 100%); }
.cgt-ph-forest { background-color: #7e9173; background-image: linear-gradient(180deg, #A8B89C 0%, #5C7256 100%); }

/* featured hero */
.cgt-tfeat { display: block; margin-bottom: 30px; text-decoration: none; }
.cgt-tfeat-media { position: relative; height: 380px; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-tfeat:hover .cgt-tfeat-media { transform: translateY(-3px); }
.cgt-tfeat-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(43,42,40,0.62) 100%); }
.cgt-tfeat-overlay { position: absolute; left: 30px; right: 30px; bottom: 28px; color: #fff; z-index: 1; }
.cgt-tfeat-badge { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; background: rgba(0,0,0,0.32); padding: 5px 11px; border-radius: 999px; }
.cgt-tfeat-title { font-size: 34px; line-height: 1.15; margin: 14px 0 0; max-width: 560px; color: #fff; }
.cgt-tfeat-meta { font-size: 12px; opacity: .85; margin-top: 10px; }

/* filter chips */
.cgt-tfilter { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--cg-line); margin-bottom: 28px; }
.cgt-chip { border: 1px solid rgba(0,0,0,0.14); background: transparent; color: var(--cg-soft); border-radius: 999px; padding: 7px 16px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .25s; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-chip:hover { border-color: var(--cg-ink); color: var(--cg-ink); }
.cgt-chip.is-active { background: var(--cg-ink); color: var(--cg-bg); border-color: var(--cg-ink); }

/* grid */
.cgt-tgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 38px 26px; }
.cgt-tcard { display: block; text-decoration: none; }
.cgt-tcard-media { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; margin-bottom: 13px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-tcard:hover .cgt-tcard-media { transform: translateY(-3px); }
.cgt-tcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.55) 100%); }
.cgt-tcard-cat { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 9px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 9px; border-radius: 999px; }
.cgt-tcard-title { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: 16px; line-height: 1.2; margin: 0; }
.cgt-tcard-meta { font-size: 9px; color: var(--cg-gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 7px; }
.cgt-tcard-excerpt { font-size: 13px; line-height: 1.6; color: var(--cg-soft); margin: 0; }

/* load more */
.cgt-tmore-wrap { text-align: center; margin-top: 44px; }
.cgt-tmore { background: transparent; border: 1px solid var(--cg-ink); color: var(--cg-ink); border-radius: 999px; padding: 11px 22px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; font-family: "Hanken Grotesk", system-ui, sans-serif; transition: all .25s; }
.cgt-tmore:hover { background: var(--cg-ink); color: var(--cg-bg); }

/* mobile */
@media (max-width: 768px) {
    .cgt-travel.cgt-band { padding-left: 20px !important; padding-right: 20px !important; }
    .cgt-travel-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .cgt-travel-head .cgt-h1 { font-size: 32px; }
    .cgt-travel-sub { max-width: 100%; }
    .cgt-tfeat-media { height: 300px; }
    .cgt-tfeat-title { font-size: 26px; }
    .cgt-tgrid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}
@media (max-width: 480px) {
    .cgt-tgrid { grid-template-columns: 1fr; }
}

/* Travel: restore spacing between the shortcode's top-level blocks.
   The band's blockGap:0 makes WP zero all child margins, so out-specify it. */
.cgt-travel .cgt-tfeat      { margin-top: 28px; }  /* head -> featured */
.cgt-travel .cgt-tfilter    { margin-top: 30px; }  /* featured -> filter chips */
.cgt-travel .cgt-tgrid      { margin-top: 30px; }  /* filter divider -> first grid row */
.cgt-travel .cgt-tmore-wrap { margin-top: 44px; }  /* last grid row -> Load more */

/* ============================================================
   Journal page (13344) — mockup "JournalA"
   (centered head + filter pills + split featured card + grid)
   Scoped to the .cgt-journal wrapper class — NOT the page ID, so it works
   regardless of the page's ID per environment (new pages differ live vs local).
   ============================================================ */
.cgt-journal {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
}
.entry-content:has(> .cgt-journal) { margin-top: 0; }
.entry-content > .cgt-journal.alignfull { margin-top: 0; margin-bottom: 0; }

.cgt-journal .ser,
.cgt-jh1, .cgt-jfeat-title, .cgt-jcard-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.cgt-journal em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--cg-goldDeep); }
.cgt-journal .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin: 0 0 14px; line-height: 1.4; }
.cgt-journal .wp-block-group > * { margin-block-start: 0 !important; }

/* centered head */
.cgt-journal-head { text-align: center; }
.cgt-jh1 { font-size: 46px; line-height: 1.1; margin: 0 auto 14px; max-width: 680px; color: var(--cg-ink); }
.cgt-journal-sub { font-size: 14.5px; line-height: 1.7; color: var(--cg-soft); max-width: 440px; margin: 0 auto; }

/* filter pills (centered) */
.cgt-jfilter { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cgt-jchip { border: 1px solid rgba(0,0,0,0.14); background: transparent; color: var(--cg-soft); border-radius: 999px; padding: 7px 16px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .25s; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-jchip:hover { border-color: var(--cg-ink); color: var(--cg-ink); }
.cgt-jchip.is-active { background: var(--cg-ink); color: var(--cg-bg); border-color: var(--cg-ink); }

/* split featured card (image left, cream text panel right) */
.cgt-jfeat { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--cg-line); text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.cgt-jfeat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(43,42,40,0.10); }
.cgt-jfeat-media { min-height: 340px; background-size: cover; background-position: center; }
.cgt-jfeat-body { background: var(--cg-bgAlt); padding: 38px 34px; display: flex; flex-direction: column; justify-content: center; }
.cgt-jfeat-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin-bottom: 12px; }
.cgt-jfeat-title { font-size: 28px; line-height: 1.2; margin: 0 0 12px; color: var(--cg-ink); }
.cgt-jfeat-excerpt { font-size: 14px; line-height: 1.75; color: var(--cg-soft); margin: 0 0 20px; }
.cgt-jfeat-meta { font-size: 11px; letter-spacing: 1.5px; color: var(--cg-gold); }

/* grid (vertical post cards, identical to Travel cards) */
.cgt-jgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 38px 26px; }
.cgt-jcard { display: block; text-decoration: none; }
.cgt-jcard-media { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; margin-bottom: 13px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-jcard:hover .cgt-jcard-media { transform: translateY(-3px); }
.cgt-jcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.55) 100%); }
.cgt-jcard-cat { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 9px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 9px; border-radius: 999px; }
.cgt-jcard-title { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: 16px; line-height: 1.2; margin: 0; }
.cgt-jcard-meta { font-size: 9px; color: var(--cg-gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 7px; }
.cgt-jcard-excerpt { font-size: 13px; line-height: 1.6; color: var(--cg-soft); margin: 0; }

/* load more */
.cgt-jmore-wrap { text-align: center; }
.cgt-jmore { background: transparent; border: 1px solid var(--cg-ink); color: var(--cg-ink); border-radius: 999px; padding: 11px 22px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; font-family: "Hanken Grotesk", system-ui, sans-serif; transition: all .25s; }
.cgt-jmore:hover { background: var(--cg-ink); color: var(--cg-bg); }

/* restore spacing between the band's top-level blocks (blockGap:0 zeroes them) */
.cgt-journal .cgt-jfilter   { margin-top: 26px; }  /* head -> pills */
.cgt-journal .cgt-jfeat     { margin-top: 26px; }  /* pills -> featured */
.cgt-journal .cgt-jgrid     { margin-top: 36px; }  /* featured -> grid */
.cgt-journal .cgt-jmore-wrap { margin-top: 44px; } /* grid -> load more */

/* mobile */
@media (max-width: 768px) {
    .cgt-journal.cgt-band { padding-left: 20px !important; padding-right: 20px !important; }
    .cgt-jh1 { font-size: 34px; }
    .cgt-jfeat { grid-template-columns: 1fr; }
    .cgt-jfeat-media { min-height: 220px; }
    .cgt-jfeat-body { padding: 28px 24px; }
    .cgt-jfeat-title { font-size: 24px; }
    .cgt-jgrid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}
@media (max-width: 480px) {
    .cgt-jgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Home page (78, front page) — mockup "HomeA"
   (centered hero head + mosaic + "more from the journal" + about band)
   Scoped to .cgt-home / .cgt-home-about wrapper classes (not page id).
   ============================================================ */
.cgt-home, .cgt-home-about {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
}
.entry-content:has(> .cgt-home) { margin-top: 0; }
.entry-content > .cgt-home.alignfull,
.entry-content > .cgt-home-about.alignfull { margin-top: 0; margin-bottom: 0; }

.cgt-home .ser, .cgt-home-about .ser,
.cgt-hh1, .cgt-mtile-title, .cgt-hcard-title, .cgt-aboutband-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; }
.cgt-home em, .cgt-home-about em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--cg-goldDeep); }
.cgt-home .cgt-kick, .cgt-home-about .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin: 0 0 14px; line-height: 1.4; }
.cgt-home .wp-block-group > *, .cgt-home-about .wp-block-group > * { margin-block-start: 0 !important; }

/* hero head (centered) */
.cgt-hero-head { text-align: center; }
.cgt-hh1 { font-size: 46px; line-height: 1.12; margin: 0; color: var(--cg-ink); }

/* mosaic */
.cgt-mosaic { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; }
.cgt-mosaic-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.cgt-mtile { position: relative; display: block; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-mtile:hover { transform: translateY(-3px); }
.cgt-mtile-feat { aspect-ratio: 16/10; }
.cgt-mtile-side { min-height: 150px; }
.cgt-mtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,0.58) 100%); }
.cgt-mtile-inner { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.cgt-mtile-kick { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: .92; margin-bottom: 5px; }
.cgt-mtile-feat .cgt-mtile-title { font-size: 30px; line-height: 1.18; }
.cgt-mtile-side .cgt-mtile-title { font-size: 20px; line-height: 1.2; }
.cgt-mtile-sub { font-size: 11px; letter-spacing: 1px; opacity: .85; margin-top: 8px; }

/* "more from the journal" head */
.cgt-sechead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--cg-line); padding-bottom: 12px; }
.cgt-sechead-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 22px; color: var(--cg-ink); margin: 0; }
.cgt-sechead-action { font-size: 11px; letter-spacing: 2px; color: var(--cg-gold); text-transform: uppercase; text-decoration: none; }
.cgt-sechead-action:hover { color: var(--cg-goldDeep); }

/* 4-up grid */
.cgt-hgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cgt-hcard { display: block; text-decoration: none; }
.cgt-hcard-media { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; margin-bottom: 12px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-hcard:hover .cgt-hcard-media { transform: translateY(-3px); }
.cgt-hcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.55) 100%); }
.cgt-hcard-cat { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 9px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 9px; border-radius: 999px; }
.cgt-hcard-title { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font-size: 15px; line-height: 1.2; margin: 0; }
.cgt-hcard-meta { font-size: 9px; color: var(--cg-gold); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
.cgt-hcard-excerpt { font-size: 12.5px; line-height: 1.55; color: var(--cg-soft); margin: 0; }

/* spacing between the cream band's top-level blocks (blockGap:0 zeroes them) */
.cgt-home .cgt-mosaic   { margin-top: 30px; }
.cgt-home .cgt-sechead  { margin-top: 44px; }
.cgt-home .cgt-hgrid    { margin-top: 22px; }

/* about band (image left, text right) */
.cgt-aboutband { display: grid; grid-template-columns: 1fr 1.6fr; gap: 44px; align-items: center; }
.cgt-aboutband-img { aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; background-color: #b3a071; }
.cgt-aboutband-title { font-size: 34px; line-height: 1.15; margin: 0 0 18px; color: var(--cg-ink); }
.cgt-aboutband-text { font-size: 15px; line-height: 1.85; color: var(--cg-soft); margin: 0 0 22px; max-width: 520px; }
.cgt-aboutband-link { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cg-ink); text-decoration: none; border-bottom: 1px solid var(--cg-ink); padding-bottom: 2px; }

/* mobile */
@media (max-width: 768px) {
    .cgt-home.cgt-band, .cgt-home-about.cgt-band { padding-left: 20px !important; padding-right: 20px !important; }
    .cgt-hh1 { font-size: 32px; }
    .cgt-mosaic { grid-template-columns: 1fr; }
    .cgt-mtile-feat { aspect-ratio: 16/11; }
    .cgt-mtile-side { min-height: 180px; }
    .cgt-hgrid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .cgt-aboutband { grid-template-columns: 1fr; gap: 24px; }
    .cgt-aboutband-img { max-width: 320px; }
    .cgt-aboutband-title { font-size: 28px; }
}
@media (max-width: 480px) {
    .cgt-hgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Shop page (11) — "Coming soon" banner (no products yet)
   Full-bleed warm gradient hero in the CG design language.
   Scoped to .cgt-shop wrapper class (not page id).
   ============================================================ */
.cgt-shop {
    --cg-bg: #FAF7F2; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(152deg, #A8B89C 0%, #8E9A6F 28%, #A8917A 68%, #8E7A55 100%);
}
.entry-content:has(> .cgt-shop) { margin-top: 0; }
.entry-content > .cgt-shop.alignfull { margin-top: 0; margin-bottom: 0; }

/* readability veil + a soft top vignette */
.cgt-shop::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(90% 80% at 50% 38%, rgba(43,42,40,0) 0%, rgba(43,42,40,0.20) 70%, rgba(43,42,40,0.42) 100%),
        linear-gradient(180deg, rgba(43,42,40,0.10) 0%, rgba(43,42,40,0.22) 100%);
    pointer-events: none;
}
/* faint oversized serif monogram flourish */
.cgt-shop::after {
    content: "01";
    position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
    font-family: "Newsreader", Georgia, serif; font-style: italic;
    font-size: 320px; line-height: 1; color: rgba(255,255,255,0.06);
    pointer-events: none; user-select: none;
}

.cgt-shop-inner { position: relative; z-index: 1; max-width: 720px; padding: 80px 40px; color: #fff; }
.cgt-shop-kick { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: rgba(255,255,255,0.88); margin: 0 0 18px; }
.cgt-shop-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 56px; line-height: 1.1; margin: 0 0 20px; color: #fff; }
.cgt-shop-title em { font-style: italic; color: #FAF2E4; }
.cgt-shop-sub { font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,0.9); max-width: 520px; margin: 0 auto 28px; }

.cgt-shop-tags { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 0 0 34px; }
.cgt-shop-tags span { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 7px 15px; }

.cgt-shop-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--cg-bg); color: var(--cg-ink); border-radius: 999px; padding: 13px 26px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.cgt-shop-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(43,42,40,0.28); }
.cgt-shop-alt { display: block; margin-top: 18px; font-size: 12px; letter-spacing: 1px; }
.cgt-shop-alt a { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 3px; }
.cgt-shop-alt a:hover { color: #fff; }

@media (max-width: 768px) {
    .cgt-shop { min-height: 480px; }
    .cgt-shop::after { font-size: 200px; right: 2%; }
    .cgt-shop-inner { padding: 64px 24px; }
    .cgt-shop-title { font-size: 38px; }
}

/* ============================================================
   Single post (all posts) — mockup "PostA"
   Centered header + hero + body w/ sticky TOC + share rail,
   tags, author bio, comments, related posts. Scoped to .cgt-post*.
   ============================================================ */
.cgt-post, .cgt-post-related {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
}
/* Let our layout own the full width on single posts. Astra's container uses its
   newer CSS-grid layout (display:grid, max-width, side margins) printed as dynamic
   CSS, so we must !important-override it to reset to a centered full-width block. */
.cgt-single #content .ast-container {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cgt-single #primary { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.cgt-post { margin-left: auto !important; margin-right: auto !important; }
.cgt-post .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; line-height: 1.4; }

/* reading progress bar */
.cgt-post-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(43,42,40,0.08); z-index: 1000; }
.cgt-post-progress-bar { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cg-gold), var(--cg-goldDeep)); transition: width .08s linear; }

/* article shell */
.cgt-post { max-width: 1080px; margin: 0 auto; padding: 0; background: var(--cg-bg); }

/* header */
.cgt-post-head { max-width: 760px; margin: 0 auto; padding: 48px 56px 30px; text-align: center; }
.cgt-post-cat { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cg-goldDeep); margin-bottom: 18px; }
.cgt-post-title { font-size: 46px; line-height: 1.14; margin: 0 0 22px; color: var(--cg-ink); font-weight: 400; }
.cgt-post-meta { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 13px; color: var(--cg-soft); }
.cgt-post-av { width: 34px; height: 34px; border-radius: 50%; background-size: cover; background-position: center; background-color: #b3a071; }
.cgt-post-author { color: var(--cg-ink); font-weight: 600; }
.cgt-post-dot { color: var(--cg-gold); }

/* hero (centered fallback, used when a post has no featured image) */
.cgt-post-hero { padding: 0 56px 36px; }
.cgt-post-hero-img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 18px; }

/* full-bleed hero with overlaid title (default when a featured image exists) */
.cgt-post-herofull { position: relative; min-height: 520px; display: flex; align-items: flex-end; justify-content: center; background-size: cover; background-position: center; overflow: hidden; }
.cgt-post-herofull::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,42,40,0) 0%, rgba(43,42,40,0.10) 38%, rgba(43,42,40,0.55) 78%, rgba(43,42,40,0.9) 100%); }
.cgt-post-herofull-inner { position: relative; z-index: 1; max-width: 1240px; width: 100%; padding: 0 56px 26px; text-align: center; color: #fff; }
.cgt-post-cat--hero { color: rgba(255,255,255,0.92); margin-bottom: 16px; }
.cgt-post-title--hero { color: #fff; font-size: 46px; line-height: 1.1; margin: 0 auto 12px; max-width: none; }
.cgt-post-meta--hero { justify-content: center; color: rgba(255,255,255,0.92); }
.cgt-post-meta--hero .cgt-post-author { color: #fff; }
.cgt-post-meta--hero .cgt-post-av { box-shadow: 0 0 0 1px rgba(255,255,255,0.5); }

/* body grid: sticky share rail | article */
.cgt-post-body { display: grid; grid-template-columns: 180px minmax(0, 680px) 60px; gap: 40px; justify-content: center; padding: 50px 56px 56px; }
.cgt-post-body--notoc { grid-template-columns: minmax(0, 720px); }
.cgt-post-body--rail { grid-template-columns: 46px minmax(0, 720px); gap: 44px; }

/* sticky left share rail */
.cgt-post-rail-sticky { position: sticky; top: 96px; }
.cgt-post-share-mobile { display: none; }

/* prev / next */
.cgt-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.cgt-post-nav-item { display: block; padding: 20px; background: var(--cg-bgAlt); border-radius: 14px; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.cgt-post-nav-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43,42,40,0.10); }
.cgt-post-nav-next { text-align: right; }
.cgt-post-nav-dir { display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--cg-gold); text-transform: uppercase; margin-bottom: 8px; }
.cgt-post-nav-title { display: block; font-size: 17px; line-height: 1.25; color: var(--cg-ink); }

/* sticky TOC */
.cgt-post-toc { position: sticky; top: 30px; align-self: start; height: fit-content; }
.cgt-post-toc .cgt-kick { margin-bottom: 14px; }
.cgt-toc-nav { display: flex; flex-direction: column; gap: 11px; }
.cgt-toc-nav a { font-size: 13px; line-height: 1.4; color: var(--cg-soft); text-decoration: none; border-left: 2px solid var(--cg-line); padding-left: 12px; transition: color .2s, border-color .2s; }
.cgt-toc-nav a:hover { color: var(--cg-ink); }
.cgt-toc-nav a.is-active { color: var(--cg-ink); border-left-color: var(--cg-goldDeep); }
.cgt-toc-nav a.cgt-toc-l1 { padding-left: 22px; font-size: 12.5px; }
.cgt-toc-nav a.cgt-toc-l2 { padding-left: 30px; font-size: 12.5px; }

/* article body typography (renders arbitrary post content) */
.cgt-post-content { font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-post-content > p { font-size: 17px; line-height: 1.85; color: var(--cg-soft); margin: 0 0 20px; }
.cgt-post-content > p:first-of-type { font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1.7; color: var(--cg-ink); margin-bottom: 28px; }
.cgt-post-content h2, .cgt-post-content h3, .cgt-post-content h4 { font-family: "Newsreader", Georgia, serif; font-weight: 400; color: var(--cg-ink); scroll-margin-top: 24px; }
.cgt-post-content h2 { font-size: 27px; margin: 38px 0 16px; }
.cgt-post-content h3 { font-size: 22px; margin: 32px 0 12px; }
.cgt-post-content h4 { font-size: 19px; margin: 28px 0 10px; }
.cgt-post-content a { color: var(--cg-goldDeep); text-decoration: underline; text-underline-offset: 2px; }
.cgt-post-content img { max-width: 100%; height: auto; border-radius: 14px; }
.cgt-post-content figure { margin: 32px 0; }
/* Block alignment — block-library CSS is not enqueued, so center .aligncenter figures explicitly. */
.cgt-post-content figure.aligncenter,
.cgt-post-content .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.cgt-post-content figure.aligncenter > img,
.cgt-post-content .wp-block-image.aligncenter > img { display: block; margin-left: auto; margin-right: auto; }
.cgt-post-content figure.alignleft,
.cgt-post-content .wp-block-image.alignleft { float: left; margin: 0 24px 16px 0; }
.cgt-post-content figure.alignright,
.cgt-post-content .wp-block-image.alignright { float: right; margin: 0 0 16px 24px; }
.cgt-post-content figcaption { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 12.5px; color: var(--cg-gold); margin-top: 10px; text-align: center; }
.cgt-post-content ul, .cgt-post-content ol { font-size: 17px; line-height: 1.85; color: var(--cg-soft); margin: 0 0 20px; padding-left: 22px; }
.cgt-post-content li { margin-bottom: 8px; }
.cgt-post-content blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--cg-gold); }
.cgt-post-content blockquote p { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.45; color: var(--cg-ink); }

/* tags + share foot */
.cgt-post-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--cg-line); }
.cgt-post-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cgt-post-tag { font-size: 11px; letter-spacing: .5px; color: var(--cg-soft); background: var(--cg-bgAlt); padding: 6px 13px; border-radius: 999px; text-decoration: none; }
.cgt-post-tag:hover { color: var(--cg-ink); }
.cgt-post-share { display: inline-flex; align-items: center; gap: 10px; }
.cgt-share-label { margin-right: 4px; }
.cgt-share-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .2s, box-shadow .2s, opacity .2s; }
.cgt-share-btn svg { width: 15px; height: 15px; }
.cgt-share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43,42,40,0.18); opacity: .94; }
.cgt-share-fb   { background: #1877F2; }
.cgt-share-x    { background: #000000; }
.cgt-share-wa   { background: #25D366; }
.cgt-share-copy { background: #8E7A55; }
.cgt-share-copy.is-copied { background: #2B2A28; }
/* vertical rail variant */
.cgt-post-share--v { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cgt-post-share--v .cgt-share-label { margin: 0 0 4px; writing-mode: horizontal-tb; }
.cgt-post-share--v .cgt-share-btn { width: 40px; height: 40px; }

/* author bio */
.cgt-post-bio { display: flex; gap: 18px; margin-top: 32px; padding: 24px; background: var(--cg-bgAlt); border-radius: 16px; }
.cgt-post-bio-av { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; background-color: #b3a071; flex-shrink: 0; }
.cgt-post-bio-name { font-size: 20px; color: var(--cg-ink); margin: 6px 0; }
.cgt-post-bio-text { font-size: 13.5px; line-height: 1.7; color: var(--cg-soft); margin: 0; }

/* comments — custom design */
.cgt-post-comments { margin-top: 44px; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-comments-title { font-size: 22px; color: var(--cg-ink); margin-bottom: 20px; }
.cgt-comment-list { list-style: none; margin: 34px 0 0; padding: 30px 0 0; border-top: 1px solid var(--cg-line); display: flex; flex-direction: column; gap: 18px; }
.cgt-comment-list .children { list-style: none; margin: 18px 0 0; padding: 0 0 0 30px; display: flex; flex-direction: column; gap: 18px; }
.cgt-comment { padding-top: 18px; border-top: 1px solid var(--cg-line); }
.cgt-comment-list > .cgt-comment:first-child { padding-top: 0; border-top: none; }
.cgt-comment-row { display: flex; gap: 14px; }
.cgt-comment-av img { width: 42px; height: 42px; border-radius: 50%; display: block; }
.cgt-comment-main { flex: 1; min-width: 0; }
.cgt-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cgt-comment-name { font-size: 14px; font-weight: 600; color: var(--cg-ink); }
.cgt-comment-time { font-size: 11px; color: var(--cg-gold); }
.cgt-comment-text { font-size: 14px; line-height: 1.7; color: var(--cg-soft); }
.cgt-comment-text p { margin: 0 0 8px; }
.cgt-comment-moderation { font-size: 12px; font-style: italic; color: var(--cg-gold); margin: 0 0 6px; }
.cgt-comment-reply { display: inline-block; margin-top: 8px; }
.cgt-comment-reply a { font-size: 11px; letter-spacing: 1px; color: var(--cg-gold); text-transform: uppercase; text-decoration: none; }
.cgt-comment-reply a:hover { color: var(--cg-goldDeep); }

/* comment form */
.cgt-post-comments .comment-respond, .cgt-post-comments form { margin-top: 8px; }
.cgt-comments-formtitle, .cgt-post-comments .comment-reply-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 20px; color: var(--cg-ink); margin: 0 0 14px; }
.cgt-comment-textarea, .cgt-post-comments input[type="text"], .cgt-post-comments input[type="email"], .cgt-post-comments input[type="url"], .cgt-post-comments textarea {
    width: 100%; border: 1px solid var(--cg-line); border-radius: 12px; padding: 12px 14px;
    font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 14px; line-height: 1.6;
    color: var(--cg-ink); background: #fff; outline: none; resize: vertical; box-sizing: border-box;
}
.cgt-comment-textarea:focus, .cgt-post-comments input:focus, .cgt-post-comments textarea:focus { border-color: var(--cg-gold); }
.cgt-post-comments .comment-form-author, .cgt-post-comments .comment-form-email, .cgt-post-comments .comment-form-url { display: inline-block; width: calc(33.333% - 8px); margin: 10px 8px 0 0; vertical-align: top; }
.cgt-post-comments .comment-form-cookies-consent { font-size: 12px; color: var(--cg-soft); margin-top: 10px; }
.cgt-post-comments label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--cg-gold); display: block; margin-bottom: 5px; }
.cgt-post-comments .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; color: var(--cg-soft); }
.cgt-comment-submit, .cgt-post-comments input[type="submit"] {
    margin-top: 14px; background: var(--cg-ink); color: #fff; border: none; border-radius: 999px;
    padding: 11px 24px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer;
    font-family: "Hanken Grotesk", system-ui, sans-serif; transition: background .2s;
}
.cgt-comment-submit:hover, .cgt-post-comments input[type="submit"]:hover { background: #5C4D38; }
.cgt-post-comments .comment-navigation { margin: 18px 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--cg-gold); }
.cgt-comments-closed { font-size: 13px; color: var(--cg-soft); font-style: italic; }

/* related posts band (full-bleed bgAlt) */
.cgt-post-related { background: var(--cg-bgAlt); padding: 50px 0; }
.cgt-post-related-inner { max-width: 1080px; margin: 0 auto; padding: 0 56px; }
.cgt-post-related .cgt-sechead { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 12px; margin-bottom: 22px; }
.cgt-post-related .cgt-sechead-title { font-family: "Newsreader", Georgia, serif; font-weight: 400; font-size: 22px; color: var(--cg-ink); margin: 0; }
.cgt-post-related .cgt-sechead-action { font-size: 11px; letter-spacing: 2px; color: var(--cg-gold); text-transform: uppercase; text-decoration: none; }
.cgt-relgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.cgt-relcard { display: block; text-decoration: none; }
.cgt-relcard-media { position: relative; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background-size: cover; background-position: center; margin-bottom: 12px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.cgt-relcard:hover .cgt-relcard-media { transform: translateY(-3px); }
.cgt-relcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.55) 100%); }
.cgt-relcard-cat { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 9px; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 9px; border-radius: 999px; }
.cgt-relcard-title { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-family: "Newsreader", Georgia, serif; font-weight: 400; color: #fff; font-size: 16px; line-height: 1.2; margin: 0; }
.cgt-relcard-meta { font-size: 9px; color: var(--cg-gold); letter-spacing: 1.5px; text-transform: uppercase; }

/* mobile */
@media (max-width: 880px) {
    .cgt-post-body, .cgt-post-body--rail { grid-template-columns: minmax(0, 720px); gap: 0; }
    .cgt-post-rail { display: none; }
    .cgt-post-share-mobile { display: block; }
}
@media (max-width: 768px) {
    .cgt-post-head { padding: 36px 22px 24px; }
    .cgt-post-title { font-size: 32px; }
    .cgt-post-herofull { min-height: 380px; }
    .cgt-post-title--hero { font-size: 32px; }
    .cgt-post-herofull-inner { padding: 0 22px 36px; }
    .cgt-post-hero { padding: 0 22px 28px; }
    .cgt-post-hero-img { height: 260px; }
    .cgt-post-body, .cgt-post-body--rail { padding: 40px 22px 44px; }
    .cgt-post-related { padding: 40px 0; }
    .cgt-post-related-inner { padding: 0 22px; }
    .cgt-relgrid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .cgt-post-foot { flex-direction: column; align-items: flex-start; }
    .cgt-post-nav { grid-template-columns: 1fr; }
    .cgt-post-nav-next { text-align: left; }
    .cgt-post-comments .comment-form-author, .cgt-post-comments .comment-form-email, .cgt-post-comments .comment-form-url { width: 100%; margin-right: 0; }
}
@media (max-width: 480px) {
    .cgt-relgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Search overlay (mockup "search") — opens from header search icon.
   Top-drop panel: serif input, browse-by-topic, live results + chips.
   ============================================================ */
.cgt-search {
    --cg-bg: #FAF7F2; --cg-bgAlt: #F0EAE0; --cg-ink: #2B2A28; --cg-soft: #5C5853;
    --cg-gold: #A8917A; --cg-goldDeep: #8E7A55; --cg-line: #E8DFD2;
    position: fixed; inset: 0; z-index: 99999;
}
body.cgt-search-open { overflow: hidden; }
.cgt-search[hidden] { display: none; }
/* our flex/grid children set display, which would beat the UA [hidden] rule — force it */
.cgt-search-chips[hidden], .cgt-search-loading[hidden], .cgt-search-topics[hidden],
.cgt-search-results[hidden], .cgt-search-empty[hidden], .cgt-search-clear[hidden] { display: none !important; }
.cgt-search-backdrop { position: fixed; inset: 0; background: rgba(43,42,40,0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cgt-search-panel {
    position: fixed; top: 0; left: 50%; transform: translateX(-50%);
    width: 1080px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column;
    background: var(--cg-bg); border-radius: 0 0 20px 20px; box-shadow: 0 30px 80px rgba(43,42,40,0.32);
    animation: cgtSearchDrop .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes cgtSearchDrop { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* input row */
.cgt-search-inputrow { display: flex; align-items: center; gap: 16px; padding: 26px 32px; border-bottom: 1px solid var(--cg-line); }
.cgt-search-ic { color: var(--cg-gold); display: inline-flex; flex-shrink: 0; }
.cgt-search-ic svg { width: 24px; height: 24px; }
.cgt-search-input { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; font-size: 30px; color: var(--cg-ink); padding: 0 !important; height: auto; }
.cgt-search-input::placeholder { color: #b6aea2; }
.cgt-search-input::-webkit-search-cancel-button { display: none; }
.cgt-search-clear { background: none; border: none; cursor: pointer; color: var(--cg-soft); display: inline-flex; padding: 4px; }
.cgt-search-clear svg { width: 20px; height: 20px; }
.cgt-search-esc { background: none; border: 1px solid var(--cg-line); border-radius: 999px; padding: 7px 14px; cursor: pointer; color: var(--cg-soft); font-size: 11px; letter-spacing: 1.5px; font-family: "Hanken Grotesk", system-ui, sans-serif; flex-shrink: 0; }
.cgt-search-esc:hover { color: var(--cg-ink); border-color: var(--cg-goldDeep); }

/* scope chips */
.cgt-search-chips { display: flex; gap: 9px; padding: 16px 32px 4px; flex-wrap: wrap; }
.cgt-search-chip { border: 1px solid rgba(0,0,0,0.14); background: transparent; color: var(--cg-soft); border-radius: 999px; padding: 7px 15px; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; transition: all .2s; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-search-chip span { opacity: .6; }
.cgt-search-chip:hover { border-color: var(--cg-ink); color: var(--cg-ink); }
.cgt-search-chip.is-active { background: var(--cg-ink); color: var(--cg-bg); border-color: var(--cg-ink); }

/* body */
.cgt-search-body { overflow-y: auto; padding: 24px 24px 30px; }

/* browse by topic */
.cgt-search-topics .cgt-kick { font-size: 10px; letter-spacing: 3px; color: var(--cg-gold); text-transform: uppercase; margin: 6px 8px 14px; }
.cgt-search-topicgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.cgt-search-topic { position: relative; height: 96px; border-radius: 12px; overflow: hidden; border: none; cursor: pointer; padding: 0; transition: transform .3s; }
.cgt-search-topic:hover { transform: translateY(-3px); }
.cgt-search-topic::after { content: ""; position: absolute; inset: 0; background: rgba(43,42,40,0.26); }
.cgt-search-topic span { position: absolute; left: 12px; bottom: 11px; z-index: 1; color: #fff; font-size: 11px; letter-spacing: 2px; }

/* results */
.cgt-search-count { padding: 4px 14px 12px; font-size: 12px; color: var(--cg-soft); }
.cgt-search-count strong { color: var(--cg-ink); font-weight: 600; }
.cgt-search-count span { color: var(--cg-goldDeep); }
.cgt-search-rows { display: flex; flex-direction: column; gap: 2px; }
.cgt-search-row { display: flex; gap: 16px; align-items: center; padding: 13px 14px; border-radius: 12px; text-decoration: none; transition: background .2s; }
.cgt-search-row:hover { background: var(--cg-bgAlt); }
.cgt-search-thumb { width: 64px; height: 64px; border-radius: 9px; flex-shrink: 0; background-size: cover; background-position: center; }
.cgt-search-rowmain { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.cgt-search-rowmeta { font-size: 9px; letter-spacing: 2px; color: var(--cg-goldDeep); margin-bottom: 5px; text-transform: uppercase; }
.cgt-search-rowtitle { font-size: 18px; line-height: 1.25; color: var(--cg-ink); margin-bottom: 4px; }
.cgt-search-rowexcerpt { font-size: 12.5px; line-height: 1.55; color: var(--cg-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.cgt-search-row mark { background: #EAD9BE; color: var(--cg-ink); border-radius: 3px; padding: 0 2px; }
.cgt-search-rowarrow { color: var(--cg-gold); flex-shrink: 0; display: inline-flex; }
.cgt-search-rowarrow svg { width: 16px; height: 16px; }

/* empty state */
.cgt-search-empty { text-align: center; padding: 46px 20px 40px; }
.cgt-search-empty-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--cg-bgAlt); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--cg-gold); }
.cgt-search-empty-ic svg { width: 26px; height: 26px; }
.cgt-search-empty-title { font-size: 24px; color: var(--cg-ink); margin-bottom: 8px; }
.cgt-search-empty-sub { font-size: 13.5px; color: var(--cg-soft); max-width: 360px; margin: 0 auto 24px; line-height: 1.6; }
.cgt-search-empty-pop { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.cgt-search-pop { border: 1px solid var(--cg-line); background: #fff; border-radius: 999px; padding: 8px 15px; font-size: 12.5px; cursor: pointer; color: var(--cg-ink); font-family: "Hanken Grotesk", system-ui, sans-serif; }
.cgt-search-pop:hover { border-color: var(--cg-goldDeep); }

/* loading */
.cgt-search-loading { display: flex; justify-content: center; padding: 50px; }
.cgt-search-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--cg-line); border-top-color: var(--cg-goldDeep); animation: cgtSpin .7s linear infinite; }
@keyframes cgtSpin { to { transform: rotate(360deg); } }

/* mobile */
@media (max-width: 768px) {
    .cgt-search-panel { border-radius: 0; max-height: 100vh; height: 100%; }
    .cgt-search-inputrow { padding: 18px 18px; gap: 10px; }
    .cgt-search-input { font-size: 22px; }
    .cgt-search-chips { padding: 14px 18px 2px; }
    .cgt-search-body { padding: 18px 14px 24px; }
    .cgt-search-topicgrid { grid-template-columns: repeat(2, 1fr); }
    .cgt-search-esc { display: none; }
}

/* === Instagram embeds (direct /embed/ iframe) ===
   Height capped to 50vh so the embed never dominates the screen; width is
   derived from a fixed aspect-ratio per content type (Reel 9:20, Post 3:5,
   accounting for IG's ~150px header+footer chrome inside /embed/). The
   browser solves: "height = min(50vh, intrinsic), width = height * ratio". */
.cgt-ig-embed {
    margin: 2em 0 !important;
    padding: 0;
    text-align: center;
    max-width: none;
}
.cgt-ig-embed-inner {
    display: inline-block;
    max-width: 100%;
}
.cgt-ig-iframe {
    display: block;
    margin: 0 auto;
    height: clamp(420px, 62vh, 640px);
    max-width: 100%;
    border: 1px solid var(--cg-line);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
/* Aspect ratios reflect IG's /embed/ page composition:
   reel = 9:16 portrait video + ~135px chrome -> width:height ratio widens to ~4:7
   post = 1:1 (or 4:5) media + chrome             -> ratio ~3:4 */
.cgt-ig-iframe--reel { aspect-ratio: 4 / 7; }
.cgt-ig-iframe--post { aspect-ratio: 3 / 4; }
@media (max-width: 480px) {
    .cgt-ig-iframe { height: clamp(400px, 64vh, 560px); }
}