/*
Theme Name:     Travelogues
Theme URI:      http://shop.restored316designs.com/themes
Template:       kadence
Author:         Restored 316 // Lauren Dierschke
Author URI:     http://shop.restored316designs.com/themes
Description:    A mobile responsive WordPress theme built for the Kadence Framework by Lauren Dierschke of Restored 316.
Version:        1.0.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Theme Customization */

/* Header */

.header-html-inner strong,
.mobile-html-inner strong {
    font-family: 'Homemade Apple', cursive;
}

.site-top-header-wrap .site-header-row-container-inner {
    mask: radial-gradient(8.94px at 50% calc(100% - 12px),#000 99%,#0000 101%) calc(50% - 8px) 0/16px 100%, radial-gradient(8.94px at 50% calc(100% + 8px),#0000 99%,#000 101%) 50% calc(100% - 4px)/16px 100% repeat-x;
}

/* Entry Layout */

.grid-lg-col-1.item-image-style-beside.half article.loop-entry.has-post-thumbnail:not(.kb-post-no-image),
.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image),
.kt-feat-image-align-left {
    align-items: center;
}

@media screen and (min-width: 768px) {
    .grid-lg-col-1.item-image-style-beside.half article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .archive .grid-cols,
    .grid-cols {
        column-gap: 1rem !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        row-gap: 1rem !important;
    }

    .full-post .wp-block-post-template.is-flex-container li {
        width: 100%;
    }

    .grid-cols.full-post {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .wp-block-post-template.is-flex-container li {
        width: 46%;
    }
}

@media (max-width: 767px) {
    .loop-entry .entry-content-wrap {
        padding: 0.5rem !important;
    }
}

.cream-posts .entry-header {
    margin-bottom: 0;
}

.grid-cols.cream-posts {
    row-gap: 1rem;
}

@media screen and (min-width: 768px) {
    .kb-posts.kb-posts-style-unboxed.grid-lg-col-1.item-image-style-beside.cream-posts article.loop-entry {
        grid-gap: 0rem;
    }
}

.cream-posts .loop-entry .entry-content-wrap {
    padding: 1rem !important;
}

.cream-posts .entry.loop-entry {
    background: var(--global-palette8);
}

.fun-fact-a {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease;
}

.fun-fact-item:hover .fun-fact-a {
    margin-top: 4px !important;
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
}

.fun-fact-q .kb-svg-icon-wrap {
    display: inline-block;
    transition: transform 0.3s ease;
}

.fun-fact-item:hover .fun-fact-q .kb-svg-icon-wrap {
    transform: translateX(4px);
}

@media (hover: none) {
    .fun-fact-a {
        margin-top: 4px !important;
        max-height: 100px;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menu */

.wp-block-navigation-item {
    width: 100%;
}

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle,
.wp-block-navigation-item.open-on-hover-click a {
    background: #fff !important;
    border: 1px solid var(--global-palette1) !important;
    border-radius: 3px;
    color: var(--global-palette3) !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 10px 30px !important;
    text-transform: none;
    width: 100%;
}

.wp-block-navigation-item .wp-block-navigation-submenu__toggle {
    transform: scale(1);
}

.wp-block-navigation__submenu-icon {
    align-items: center;
    background: var(--global-palette2) !important;
    border-radius: 50%;
    display: flex !important;
    height: 24px !important;
    justify-content: center;
    margin-left: -32px !important;
    width: 24px !important;
    z-index: 99;
}

.wp-block-navigation__submenu-icon svg {
    color: #fff;
    height: 12px !important;
    width: 12px !important;
}

.wp-block-navigation__submenu-container {
    background-color: var(--global-palette7) !important;
    border: none !important;
    box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 5%);
    left: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

.wp-block-navigation-item.open-on-hover-click .wp-block-navigation__submenu-container a {
    background-color: var(--global-palette5) !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--global-palette3) !important;
    font-size: 14px;
    padding: 10px 15px;
    z-index: 99;
}

.wp-block-navigation-item.open-on-hover-click .wp-block-navigation__submenu-container a:hover {
    background-color: var(--global-palette4) !important;
}

.wp-block-navigation__submenu-container li {
    color: var(--global-palette9) !important;
    font-size: 16px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.wp-block-navigation__submenu-container li:hover {
    background: var(--global-palette8);
    color: var(--global-palette3) !important;
}

.wp-block-navigation__submenu-container li:last-of-type {
    border: none;
}

.wp-block-navigation__submenu-container li a {
    padding: 10px 15px;
}

@media only screen and (max-width: 767px) {
    .wp-block-navigation .wp-block-navigation-item,
    .wp-block-navigation__container {
        flex-wrap: wrap !important;
        position: relative;
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        display: Block !important;
        left: auto !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
    }

    .wp-block-navigation-item .wp-block-navigation-submenu__toggle,
    .wp-block-navigation__submenu-container li a {
        padding-bottom: 14px;
        padding-top: 14px;
    }

}

@media (max-width: 440px) {
    .wp-block-navigation.no-wrap {
        --navigation-layout-wrap: wrap;
    }

}

/* Archive */
body:not(.search) #archive-container .entry {
    position: relative;
}

.archive.content-style-unboxed .wp-site-blocks .post-thumbnail,
.blog.content-style-unboxed .wp-site-blocks .post-thumbnail,
.post-type-archive.content-style-unboxed .wp-site-blocks .post-thumbnail {
    margin-bottom: 0 !important;
}

/* Keep Kadence's customizer-controlled ratio on .post-thumbnail untouched */
body:not(.search) #archive-container .post-thumbnail {
    overflow: hidden;
    position: relative;
}

/* Stamp frame lives on the INNER layer so the thumbnail ratio stays
customizer-controlled. The mat is a transparent border (not padding), so it
never fights Kadence's padding-bottom ratio, and overflow:hidden clips the
hover zoom just inside that border. */
body:not(.search) #archive-container .post-thumbnail-inner {
    --r: 8px;
    -webkit-mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round var(--r) var(--r) / calc(2 * var(--r)) calc(2 * var(--r)), conic-gradient(#000 0 0) content-box;
    background: url("images/postcard-texture.jpg") center / cover no-repeat, #efe9dc;
    background-clip: border-box;
    border: var(--r) solid transparent;
    box-sizing: border-box;
    inset: 0;
    mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round var(--r) var(--r) / calc(2 * var(--r)) calc(2 * var(--r)), conic-gradient(#000 0 0) content-box;
    overflow: hidden;
    /* perforation radius */
    position: absolute;
}

body:not(.search) #archive-container .post-thumbnail-inner img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    width: 100%;
}

body:not(.search) #archive-container .entry:hover .post-thumbnail-inner img {
    transform: scale(1.08);
}

/* Gradient sits over the image (inside the stamp border), not the perforated edge */
body:not(.search) #archive-container .post-thumbnail-inner::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
    bottom: 0;
    content: "";
    height: 65%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 1;
}

body:not(.search) #archive-container .entry-content-wrap {
    bottom: 5%;
    left: 50%;
    margin: 0 auto;
    max-width: 85%;
    position: absolute;
    transform: translate(-50%, 0%);
    width: 100%;
    z-index: 2;
}

body:not(.search) #archive-container .entry-title a {
    background: none;
    color: #fff;
    padding: 0;
}

body:not(.search) #archive-container .entry .entry-taxonomies a {
    background: var(--global-palette2) !important;
    border-radius: 100px;
    color: white !important;
    font-size: 11px;
    font-weight: inherit;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 5px 15px;
}

/* Single Post Hero */
.post-hero-split {
    background: var(--global-palette8);
    padding: 40px 0 50px;
}

.post-hero-split-inner {
    align-items: center;
    display: flex;
    gap: 48px;
}

.post-hero-split-text {
    flex: 1 1 60%;
    min-width: 280px;
    order: 1;
}

.post-hero-split-image {
    align-items: center;
    display: flex;
    flex: 1 1 38%;
    justify-content: center;
    min-width: 220px;
    order: 2;
}

.post-hero-split-image-inner {
    --r: 11px;
    -webkit-mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round var(--r) var(--r) / calc(2 * var(--r)) calc(2 * var(--r)), conic-gradient(#000 0 0) content-box;
    aspect-ratio: 4 / 5;
    background: url("images/postcard-texture.jpg") center / cover no-repeat, #efe9dc;
    /* perforation radius */
    box-sizing: border-box;
    mask: radial-gradient(50% 50%, #0000 66%, #000 67%) round var(--r) var(--r) / calc(2 * var(--r)) calc(2 * var(--r)), conic-gradient(#000 0 0) content-box;
    max-width: 400px;
    padding: var(--r);
    width: 100%;
}

.post-hero-split-image-inner img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.post-hero-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.post-hero-pill {
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
}

.post-hero-date {
    background: var(--global-palette1);
}

.post-hero-cat {
    background: var(--global-palette6);
}

a.post-hero-cat {
    text-decoration: none;
}

a.post-hero-cat:hover {
    color: #fff;
    text-decoration: underline;
}

.post-hero-title {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    margin: 0 0 20px;
}

.post-hero-excerpt {
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 24px;
    opacity: 0.8;
}

@media (max-width: 781px) {
    .post-hero-split-inner {
        flex-direction: column-reverse;
    }
}

/* Table of Contents */
.post-toc {
    display: inline-block;
    position: relative;
}

.post-toc-toggle {
    align-items: center;
    background: var(--global-palette2);
    border: none;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.03em;
    padding: 14px 22px;
    text-transform: uppercase;
}

.post-toc-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    display: none;
    left: 0;
    list-style: none;
    margin: 10px 0 0;
    max-width: min(92vw, 460px);
    min-width: 280px;
    padding: 16px 20px;
    position: absolute;
    top: 100%;
    width: max-content;
    z-index: 10;
}

.post-toc.is-open .post-toc-list {
    display: block;
}

.post-toc-list li + li {
    margin-top: 10px;
}

.post-toc-list a {
    color: inherit;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.post-toc-list a:hover {
    text-decoration: underline;
}

/* Scrolling Categories */
.scrolling-categories .kt-inside-inner-col {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.scrolling-categories .wp-block-kadence-infobox {
    flex: 0 0 auto;
}

.scrolling-categories .kt-inside-inner-col {
    scrollbar-width: none;
}

.scrolling-categories .kt-inside-inner-col::-webkit-scrollbar {
    display: none;
}

.scrolling-categories .kt-inside-inner-col {
    cursor: grab;
}

.scrolling-categories:hover .kt-inside-inner-col {
    outline: 0;
}

.scrolling-categories {
    overflow: visible;
    position: relative;
}

.scrolling-categories::before {
    opacity: 0;
    transition: opacity .25s ease;
}

.scrolling-categories.is-scrolled::before {
    opacity: .9;
}

/* Eraser Reveal */

.eraser-host {
    -webkit-user-select: none;
    cursor: none;
    user-select: none;
}

/* Content columns stay fully interactive: normal cursor + selectable text.
(Targets the column boxes, NOT the wrapper's padding, so the padding bands
above/below the content remain erasable.) */
.eraser-host .wp-block-kadence-column {
    -webkit-user-select: auto;
    cursor: auto;
    user-select: auto;
}

.eraser-row-canvas {
    display: block;
}

/* Circular brush cursor */
.eraser-brush-ring {
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    height: calc(var(--brush, 100px) * 2);
    margin-left: calc(var(--brush, 100px) * -1);
    margin-top: calc(var(--brush, 100px) * -1);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s ease;
    width: calc(var(--brush, 100px) * 2);
    z-index: 6;
}

.eraser-host.is-active .eraser-brush-ring {
    opacity: 1;
}

@media (hover: none) {
    .eraser-host {
        cursor: default;
    }
    .eraser-brush-ring {
        display: none;
    }
}

/* Touch + phone: the eraser can't run (a finger drag scrolls the page instead
of painting), so the canvas would sit there permanently covering the image.
eraser-reveal.js adds .eraser-disabled on those devices; here we drop the
overlay so the artwork underneath is simply shown. */
/* .eraser-disabled = eraser skipped AND the overlay was a plain colour, so the
overlay is dropped to expose the row's background image.
.eraser-skipped   = eraser skipped but the overlay has its own image, which is
the intended mobile artwork, so it is left alone. */
.eraser-row.eraser-disabled .kt-row-layout-overlay {
    display: none !important;
}

.eraser-row.eraser-disabled,
.eraser-row.eraser-skipped {
    cursor: auto;
}

/* Backstop in case the script is cached or fails to run. Only the eraser's own
artefacts are hidden here — NOT .kt-row-layout-overlay, because a row can use
a mobile overlay image (Kadence > Overlay > Mobile tab) as its phone artwork.
Whether that overlay stays is decided in JS, via .eraser-disabled. */
@media (hover: none), (pointer: coarse), (max-width: 767px) {
    .eraser-row-canvas {
        display: none !important;
    }
}

/* Stack Cards */
.stack-card {
    margin-bottom: 30px;
    position: sticky;
    /* must match STICKY_TOP in assets/stack-cards.js */
    top: 100px;
    transform-origin: center top;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Stack order */
.stack-1 {
    z-index: 1;
}
.stack-2 {
    z-index: 2;
}
.stack-3 {
    z-index: 3;
}
.stack-4 {
    z-index: 4;
}

/* Tilt states */
.tilt-left {
    transform: rotate(-2deg);
}

.tilt-right {
    transform: rotate(2deg);
}

.stack-card.tilt-left {
    transform: rotate(-2deg);
}
.stack-card.tilt-right {
    transform: rotate(2deg);
}

/* Mobile: Stack Cards */
/* Sticky stacking pins every card under the header, so on a phone the taller
   cards overflow the viewport and their content can't be read. Below 768px the
   cards flow normally instead. stack-cards.js also skips the tilt there; the
   !important is the backstop for a cached script. */
@media (max-width: 767px) {
    .stack-card {
        margin-bottom: 24px;
        position: static;
        top: auto;
        transform: none !important;
        will-change: auto;
    }
}

/* Scroll Plane */
.scroll-plane-stage {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: 5;
    /* above the row content */
}

.scroll-plane-stage .scroll-plane {
    bottom: 0;
    left: 0;
    margin: 0;
    /* default plane size; set a width on the image block to override */
    max-width: 40vw;
    position: absolute;
    transform: translate(-150%, 0);
    width: 220px;
    will-change: transform;
    /* parked off-screen until the script positions it */
}

.scroll-plane-stage .scroll-plane img {
    display: block;
    height: auto;
    width: 100%;
}

@media (max-width: 767px) {
    .scroll-plane-stage .scroll-plane {
        width: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-plane-stage .scroll-plane {
        transform: translate(30vw, -30vh) !important;
    }
}

/* Scroll Days */
.scroll-days .scroll-day-circle {
    /* muted / not-in-focus — uses a neutral from the customizer palette */
    background-color: var(--global-palette2) !important;
    transition: background-color 0.5s ease;
}

.scroll-days .is-active-day .scroll-day-circle {
    /* in-focus — the accent from the customizer palette */
    background-color: var(--global-palette1) !important;
}

/* Slide-Out Panel */
.hp-toggle,
.hp-toggle:hover,
.hp-toggle:focus,
.hp-toggle:active {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
}

.hp-toggle {
    align-items: center;
    align-self: center;
    color: var(--global-palette3, #363631);
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-left: 0.5em;
    padding: 0;
    transition: color 0.25s ease;
    width: 44px;
}

.hp-toggle:hover {
    color: var(--global-palette1, #5cbcc5);
}

.hp-toggle:focus-visible {
    outline: 2px solid var(--global-palette1, #5cbcc5);
    outline-offset: 3px;
}

.hp-toggle-bars {
    display: block;
    width: 24px;
}

.hp-toggle-bars span {
    background: currentColor;
    border-radius: 2px;
    display: block;
    height: 2px;
    width: 100%;
}

.hp-toggle-bars span + span {
    margin-top: 5px;
}

.hp-overlay {
    background: rgba(0, 0, 0, 0.45);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    visibility: hidden;
    z-index: 9998;
}

.hp-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.hp-panel {
    background: var(--global-palette8, #faf7f4);
    bottom: 0;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
    color: var(--global-palette3, #363631);
    max-width: 92vw;
    overflow-y: auto;
    padding: 4.5rem 2rem 2rem;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    width: 480px;
    z-index: 9999;
}

.hp-panel.is-open {
    transform: translateX(0);
}

.hp-close,
.hp-close:hover,
.hp-close:focus,
.hp-close:active {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none;
}

.hp-close {
    /* !important so Kadence's generic `button { color: var(--global-palette-btn) }`
    (white) can never win, including on cached or reordered stylesheets. */
    color: var(--global-palette3, #363631) !important;
    cursor: pointer;
    font-size: 30px;
    height: 40px;
    line-height: 1;
    position: absolute;
    right: 1.25rem;
    top: 1rem;
    transition: color 0.25s ease;
    width: 40px;
}

.hp-close:hover {
    color: var(--global-palette1, #5cbcc5) !important;
}

.hp-close:focus-visible {
    outline: 2px solid var(--global-palette1, #5cbcc5);
    outline-offset: 3px;
}

.hp-inner .hp-widget + .hp-widget {
    margin-top: 1.75rem;
}

.hp-empty {
    font-size: 0.95em;
    opacity: 0.7;
}

body.hp-open {
    overflow: hidden;
}

/* Round post thumbnails inside the panel need a square box. Kadence sets
   height:auto on images, so a portrait thumbnail stays portrait and a
   border-radius of 100% draws an ellipse — which reads as a stretched photo.
   Forcing a 1:1 box and cover-cropping gives a true circle. */
.hp-panel .post-thumbnail-inner img,
.hp-panel .kb-post-list-item .post-thumbnail img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

/* Image blocks in the panel can carry a fixed width wider than the panel's
   columns, which pushes them out under the padding. Keep them inside. */
.hp-panel .wp-block-kadence-image,
.hp-panel .kb-is-ratio-image {
    max-width: 100%;
}

/* The slide-out panel is a desktop-only feature. Kadence's own mobile menu
takes over at 1024px and below, so the extra hamburger is hidden on tablet
and phone. (header-panel.js also skips #mobile-header; this is the backstop
for the sticky/transparent header variants.) */
@media (max-width: 1024px) {
    .hp-toggle {
        display: none !important;
    }
}

/* Feature Toggles */
body.r316-ruffle-off .site-top-header-wrap .site-header-row-container-inner {
    -webkit-mask: none !important;
    mask: none !important;
}

body.r316-archive-stamp-off #archive-container .post-thumbnail-inner {
    -webkit-mask: none !important;
    background: none !important;
    border: 0 !important;
    mask: none !important;
}

body.r316-single-stamp-off .post-hero-split-image-inner {
    -webkit-mask: none !important;
    background: none !important;
    mask: none !important;
    overflow: hidden;
    padding: 0 !important;
}

/* Scrolling Categories: Arrows */
.scroll-cat-arrow {
    align-items: center;
    background: var(--global-palette9, #fff);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    color: var(--global-palette3, #2a2821);
    cursor: pointer;
    display: flex;
    height: 46px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.2s ease, color 0.2s ease, opacity 0.25s ease;
    width: 46px;
    z-index: 10;
}

.scroll-cat-arrow::before {
    -webkit-mask: center / contain no-repeat;
    background: currentColor;
    content: "";
    height: 20px;
    mask: center / contain no-repeat;
    width: 20px;
}

.scroll-cat-arrow--prev::before {
    -webkit-mask-image: url("images/left-arrow.svg");
    mask-image: url("images/left-arrow.svg");
}

.scroll-cat-arrow--next::before {
    -webkit-mask-image: url("images/right-arrow.svg");
    mask-image: url("images/right-arrow.svg");
}

.scroll-cat-arrow--prev {
    left: -25px;
}
.scroll-cat-arrow--next {
    right: -25px;
}

.scroll-cat-arrow:hover {
    background: var(--global-palette1);
    color: #fff;
}

.scroll-cat-arrow:focus-visible {
    outline: 2px solid var(--global-palette1);
    outline-offset: 2px;
}

.scroll-cat-arrow[hidden] {
    display: none;
}

/* Read More Button */
.post-more-link {
    align-items: center;
    background: var(--global-palette1);
    border-radius: 50%;
    display: inline-flex;
    font-size: 0 !important;
    height: 40px;
    justify-content: center;
    /* hides the "Read More" text (screen-reader text stays) */
    line-height: 0 !important;
    padding: 0;
    transition: background 0.25s ease, transform 0.2s ease;
    width: 40px;
}

.post-more-link:hover,
.post-more-link:focus {
    background: var(--global-palette2);
    transform: translateY(-1px);
}

/* Hide Kadence's built-in arrow; use the theme's right-arrow.svg instead */
.post-more-link .kadence-svg-iconset {
    display: none;
}

.post-more-link::after {
    -webkit-mask: url("images/right-arrow.svg") center / contain no-repeat;
    background: currentColor;
    content: "";
    height: 18px;
    mask: url("images/right-arrow.svg") center / contain no-repeat;
    width: 18px;
}
/* Posts Overlay */
.r316-posts-overlay .loop-entry {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    position: relative;
}
.r316-posts-overlay .post-thumbnail {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    position: relative;
}
.r316-posts-overlay .post-thumbnail img {
    display: block;
}
.r316-posts-overlay .post-thumbnail::after {
    background: linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 34%,rgba(0,0,0,0) 68%);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}
.r316-posts-overlay .loop-entry .entry-content-wrap {
    align-self: end;
    background: transparent;
    grid-column: 1;
    grid-row: 1;
    padding: 1.9em 1.6em 1.55em !important;
    z-index: 2;
}
.r316-posts-overlay .entry-header,
.r316-posts-overlay .entry-title {
    margin: 0;
}
.r316-posts-overlay .entry-title,
.r316-posts-overlay .entry-title a {
    color: #fff !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.r316-posts-overlay .entry-title a:hover {
    color: #fff !important;
    opacity: .85;
}
.r316-posts-overlay .entry-meta,
.r316-posts-overlay .entry-meta a,
.r316-posts-overlay .entry-footer,
.r316-posts-overlay .entry-footer a {
    color: rgba(255,255,255,.85) !important;
}

/* Home 4 Accents */
.r316-ondark .wp-block-kadence-advancedheading {
    color: #fff !important;
}
.r316-polaroid .wp-block-kadence-image {
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.15);
    padding: 12px 12px 38px !important;
}
.r316-polaroid .wp-block-kadence-image img {
    display: block;
    height: auto;
    width: 100%;
}
.r316-rot-l {
    transform: rotate(-3deg);
    transition: transform .35s ease;
}
.r316-rot-r {
    transform: rotate(3deg);
    transition: transform .35s ease;
}
.r316-rot-l:hover,
.r316-rot-r:hover {
    transform: rotate(0);
}
.r316-postcard {
    border: 1px solid rgba(0,0,0,.08);
}

/* Mobile: Stamp Cards */
/* At roughly 156px wide the overlaid title spills outside the stamp frame, so
   on phones the category and title flow underneath the artwork instead of
   sitting on top of it. The stamp frame and perforated edge are unchanged. */
@media (max-width: 767px) {
    body:not(.search) #archive-container .entry-content-wrap {
        margin: 0;
        max-width: 100%;
        padding: 0.75em 0.15em 0;
        position: static;
        text-align: center;
        transform: none;
        width: auto;
    }

    /* Nothing sits on the image now, so the darkening gradient is just noise */
    body:not(.search) #archive-container .post-thumbnail-inner::after {
        display: none;
    }

    body:not(.search) #archive-container .entry-header {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    body:not(.search) #archive-container .entry-title {
        font-size: 0.95rem;
        line-height: 1.3;
        margin: 0;
    }

    body:not(.search) #archive-container .entry-title a {
        color: var(--global-palette3);
        text-shadow: none;
    }

    body:not(.search) #archive-container .entry .entry-taxonomies a {
        font-size: 9px;
        letter-spacing: 1px;
        padding: 4px 10px;
    }
}