/* ==========================================================
   DEVTEST COLORS AND HOMEPAGE BACKGROUNDS
   Edit these values to tune the three homepage comparisons.
   ========================================================== */
:root {
    /* Header and footer: the design study's dark ink and Arial type. */
    --lieben_frame_text_color: #202c2b;
    --lieben_frame_line_color: rgba(32, 44, 43, 0.22);

    /* index.php uses the existing --frank_background_color below. */
    /* index2.php: the design study's creamy off-white. */
    --lieben_home_cream_color: #f5f1e7;

    /* index3.php: alternating, seamless diamonds. */
    --lieben_diamond_color_1: #0aa2cb;
    --lieben_diamond_color_2: #1dc5f3;
    --lieben_diamond_width: 46px;
    --lieben_diamond_height: calc(var(--lieben_diamond_width) * 1.1);
    --lieben_diamond_scale: 1;

    /* Optional sidebar: keep these dimensions easy to tune. */
    --lieben_sidebar_width: 180px;
    --lieben_sidebar_gap: 40px;
    --lieben_sidebar_image_width: 160px;

    /*
     * atan(1 / 1.1) gives this corner angle for the 10% taller shape.
     * Keeping that ratio preserves seamless joins when width changes.
     */
    --lieben_diamond_corner_angle: 42.273689deg;
}

/* ==========================================================
   RESET / BOX MODEL
   ========================================================== */
* {
    box-sizing: border-box;
}

/* ==========================================================
   ROOT VARIABLES
   ========================================================== */
.ignore {
    --frank_background_color: rgba(199, 198, 204, 1);
    /* HEX: #C7C6CC */

    --frank_text_color_1: rgba(218, 246, 209, 1);
    /* HEX: #DAF6D1 */

    --link-glow-inner: rgba(120, 180, 255, 1);
    /* HEX: #78B4FF */

    --link-glow-mid: rgba(120, 180, 255, 0.902);
    /* HEX: #78B4FF */

    --link-glow-outer: rgba(120, 180, 255, 0.702);
    /* HEX: #78B4FF */
}

:root {
    /*original from site*/
    /*--frank_background_color: rgba(199, 198, 204, 1);*/
    /* HEX: #C7C6CC */

    /*alternate*/
    /*--frank_background_color: rgba(198, 198, 204, 1);*/
    /* #c6c6cc */

    /*alternate 2*/
    /*  ***  */
    /*--frank_background_color: rgba(195, 195, 198, 1);*/
    /* #c3c3c6 */

    /*alternate 3*/
    /*  ***  */
    /*--frank_background_color: rgba(174, 174, 174, 1);*/
    /* #aeaeae */

    /*  ***  */
    /*alternate 4*/
    /*--frank_background_color: rgba(150, 150, 150, 1);*/
    /* #969696 */

    /*alternate 6*/
    /* A++  */
    /*--frank_background_color: rgba(126, 125, 129, 1);*/
    /* #7e7d81 */

    /*alternate 7*/
    /* A++  */
    /*--frank_background_color: rgba(123, 121, 128, 1);*/
    /* #7b7980 */

    /*alternate 8*/
    /* A++  */
    /*--frank_background_color: rgba(91, 92, 96, 1);*/
    /* #5b5c60 */

    /*alternate 9*/
    /* A++  */
    /*--frank_background_color: rgba(111, 112, 117, 1);*/
    /* #6f7075 */

    /*alternate 10*/
    /* A++  */
    /*--frank_background_color: rgba(108, 109, 112, 1);*/
    /* #6c6d70 */

    /*alternate 11*/
    /* A+++ CHOSEN  */
    /*--frank_background_color: rgba(105, 106, 108, 1);*/
    /* #696a6c */

    /*alternate 12*/
    /* color complement to our text color */
    /*--frank_background_color: rgba(37, 9, 46, 1);*/
    /* #25092E */

    /*alternate 13*/
    /* GOOD! Super close! */
    /* --frank_background_color: rgba(89, 85, 90, 1); */
    /* #59555a*/

    /*alternate 14*/
    /* new Chosen */
   /*--frank_background_color: rgba(90, 88, 91, 1); */
    /* #5a585b*/


    /* text colors */
    --frank_text_color_1: rgba(218, 246, 209, 1);
    /* HEX: #DAF6D1 */

    /* glows */
    --link-glow-inner: rgba(124, 255, 160, .6);
    /* HEX: #7CFFA0 */

    --link-glow-mid: rgba(140, 255, 160, 0.35);
    /* HEX: #8CFFA0 */

    --link-glow-outer: rgba(180, 255, 200, 0.25);
    /* HEX: #B4FFC8 */


    /* new lieben yoga color transisition.  06/25.  Names not converted yet. */
    --frank_background_color: rgba(10, 162, 203, 1);
    /* #0aa2cb */
    /* Cerulean Blue */

    /*--frank_background_color: rgba(10, 162, 203, 1);*/
    /* #0aa2cb */
    /* Cerulean Blue */
}

/* ==========================================================
   BASE
   ========================================================== */
body {
    margin: 0;
    padding: 0;
    background: var(--frank_background_color);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--frank_text_color_1);

    /* A minimum height, not a fixed height: long pages keep growing. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

/* ==========================================================
   HOMEPAGE BACKGROUND VARIANTS
   These classes change only the background, never the layout.
   ========================================================== */
.home-background-blue {
    background-color: var(--frank_background_color);
}

.home-background-cream {
    background-color: var(--lieben_home_cream_color);
}

.home-background-diamonds {
    background-color: var(--lieben_diamond_color_1);

    /*
     * One small, repeating CSS tile; no bitmap, script or extra request.
     * The five hard color stops meet at the rectangular tile's corners.
     * Adjacent triangles therefore join into identical 46 x 50.6px
     * diamonds, alternating like a chessboard without gaps.
     */
    background-image: conic-gradient(
        var(--lieben_diamond_color_1)
            0deg
            var(--lieben_diamond_corner_angle),
        var(--lieben_diamond_color_2)
            var(--lieben_diamond_corner_angle)
            calc(180deg - var(--lieben_diamond_corner_angle)),
        var(--lieben_diamond_color_1)
            calc(180deg - var(--lieben_diamond_corner_angle))
            calc(180deg + var(--lieben_diamond_corner_angle)),
        var(--lieben_diamond_color_2)
            calc(180deg + var(--lieben_diamond_corner_angle))
            calc(360deg - var(--lieben_diamond_corner_angle)),
        var(--lieben_diamond_color_1)
            calc(360deg - var(--lieben_diamond_corner_angle))
            360deg
    );
    background-size:
        calc(var(--lieben_diamond_width) * var(--lieben_diamond_scale))
        calc(var(--lieben_diamond_height) * var(--lieben_diamond_scale));
}

/* Scale the entire tile so the diamonds retain their 10% taller shape. */
.home-background-diamonds-double {
    --lieben_diamond_scale: 2;
}

.home-background-diamonds-triple {
    --lieben_diamond_scale: 3;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 0 1em 0;
}

.vertical-space {
    height: 20px;
}

/* ==========================================================
   HEADER BANNER (OPTIONAL)
   ========================================================== */
.header-banner {
    max-width: 980px;
    margin: 0 auto 24px;
}

.header-banner img {
    width: 100%;
    height: auto;
    display: block;
}


/* ==========================================================
   LAYOUT
   ========================================================== */
.page-frame {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================
   EDITORIAL TEXT COLUMN (NEW)
   ========================================================== */
/*
   Use this to constrain reading width to the editorial measure.
   No visual styling, no behavior changes.
*/
.text-column {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px;
    padding-right: 6px;
}

/* Chakra detail pages: space below the artwork and comfortable reading. */
.chakra-description {
    margin-top: 32px;
    line-height: 1.6;
}

/* ==========================================================
   HOME IMAGE
   ========================================================== */
.home-img {
    width: 70%;
    max-width: 420px;
    margin: 0 auto;
}

/* ==========================================================
   HEADER / WORDMARK / FLAT NAVIGATION
   Retain the existing title-row and menu-link naming.
   ========================================================== */
.site-header {
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
    flex-shrink: 0;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--lieben_frame_line_color);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: var(--lieben_frame_text_color);
}

.site-brand-figure {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.site-brand-text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

.site-navigation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    color: var(--lieben_frame_text_color);
}

.menu-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    white-space: nowrap;
}

.menu-link:hover,
.social-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-brand:focus-visible,
.menu-link:focus-visible,
.social-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

/* Keep the existing content-page heading on its familiar 420px axis. */
.site-title {
    max-width: 420px;
    margin: 36px auto 0;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    overflow-wrap: break-word;
}

.site-title.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.site-header .header-banner {
    margin: 36px auto 0;
}


/* ==========================================================
   CONTENT SYSTEM
   =========================================================== */
.content-page {
    /* Fill short pages naturally; added cards still push the footer down. */
    flex: 1 0 auto;
    width: 100%;
    margin-top: 70px;
    margin-bottom: 80px;
    padding: 0 20px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

/* GRID SYSTEM */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* +20px slack */
    gap: 60px;
    justify-items: stretch;
    overflow-x: hidden;
    /* padding-inline: 10px; */  /* deleting this 01-17-25 for alignment conformity */
}

/* GRID MODIFIERS */

/* Max 4 columns on desktop */
.content-grid.four-col {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Max 3 columns on desktop */
.content-grid.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Max 2 columns on desktop */
.content-grid.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Force single column even on desktop */
.content-grid.one-col {
    grid-template-columns: 1fr;
}

/* Alignment rules for different column layouts */

/* Single column: center everything, constrain to same max-width for alignment */
.content-grid.one-col {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.content-grid.one-col .content-card {
    align-items: center;
}

.content-grid.one-col .content-image {
    margin-left: auto;
    margin-right: auto;
}

/* Two columns: center-align (default behavior) */
.content-grid.two-col .content-card {
    align-items: center;
}

.content-grid.two-col .content-image {
    margin-left: auto;
    margin-right: auto;
}

/* Three columns: center-align (default behavior) */
.content-grid.three-col .content-card {
    align-items: center;
}

.content-grid.three-col .content-image {
    margin-left: auto;
    margin-right: auto;
}

/* Four columns: center-align (default behavior) */
.content-grid.four-col .content-card {
    align-items: center;
}

.content-grid.four-col .content-image {
    margin-left: auto;
    margin-right: auto;
}

.content-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
}

.content-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 4px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* CONTENT IMAGE SIZE VARIANTS (NEW) */
.content-image420px { max-width: 420px; }
.content-image360px { max-width: 360px; }
.content-image240px { max-width: 240px; }
.content-image120px { max-width: 120px; }

.content-meta {
    text-align: center;
    margin-top: 14px;
}

.content-meta h2 {
    font-size: 20px;
    margin: 6px 0 4px;
}

.content-meta p {
    font-size: 15px;
    opacity: 0.7;
    margin: 0;
}

/* ==========================================================
   GALLERY
   Keep the usual 980px island; every card stays at or below 420px.
   These rules are scoped so the existing page grids do not change.
   ========================================================== */
.content-grid.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    overflow: visible;
}

.gallery-card {
    width: 100%;
    max-width: 420px;
    min-width: 0;
    margin: 0 auto;
}

.gallery-image-link {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
}

.gallery-image-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 6px;
}

.gallery-card .content-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}

.gallery-card .content-meta {
    width: 100%;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (min-width: 960px) {
    .content-grid.gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .content-grid.gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   OPTIONAL TWO-COLUMN GALLERY
   The original gallery keeps its three-column desktop layout.
   ========================================================== */
@media (min-width: 601px) {
    .content-grid.gallery-grid.gallery-grid-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   OPTIONAL RESPONSIVE SIDEBAR
   Opt in with .sidebar-layout; other pages are not rearranged.
   Keep the 900px breakpoint in sync with the helper in script.js.
   ========================================================== */
.sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lieben_sidebar_width);
    gap: var(--lieben_sidebar_gap);
    align-items: start;
}

.sidebar-main {
    display: flex;
    flex-direction: column;
    gap: 60px;
    min-width: 0;
}

.sidebar-section,
.sidebar-desktop-slot {
    min-width: 0;
}

.sidebar-section-text {
    margin-bottom: 24px;
    line-height: 1.6;
}

.sidebar-section-text h2 {
    margin: 0 0 16px;
    font-size: 20px;
    text-align: center;
}

.responsive-sidebar {
    width: 100%;
    min-width: 0;
    color: var(--lieben_frame_text_color);
}

.sidebar-label {
    margin: 0 0 18px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.sidebar-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.sidebar-card {
    width: 100%;
    max-width: var(--lieben_sidebar_width);
    min-width: 0;
    margin: 0 auto;
    text-align: center;
}

.sidebar-image-link {
    display: block;
    width: 100%;
    max-width: var(--lieben_sidebar_image_width);
    margin: 0 auto;
}

.sidebar-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 4px;
}

.sidebar-meta {
    margin-top: 10px;
    overflow-wrap: anywhere;
}

.sidebar-meta h2 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.sidebar-meta p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.sidebar-card a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sidebar-card a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

@media (max-width: 900px) {
    .sidebar-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Hide the empty slot only after JS has moved the sidebar inline. */
    .sidebar-layout.sidebar-is-inline > .sidebar-desktop-slot {
        display: none;
    }

    .sidebar-items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .sidebar-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }
}

/* ==========================================================
   PURCHASE LINKS (NEW – ZERO STYLING SYSTEM)
   ========================================================== */

.purchase-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 40px;
    margin-bottom: 30px;
}

/* ==========================================================
   ILLUMINATION
   ========================================================== */
.illuminate-on-hover:hover {
    text-shadow:
            0 0 1px var(--link-glow-inner),
            0 0 2px var(--link-glow-mid),
            0 0 4px var(--link-glow-outer);
}

.illuminate-on-hover:hover a,
.illuminate-on-hover:hover h1,
.illuminate-on-hover:hover h2,
.illuminate-on-hover:hover h3,
.illuminate-on-hover:hover p,
.illuminate-on-hover:hover button
{
    text-shadow:
            0 0 1px var(--link-glow-inner),
            0 0 2px var(--link-glow-mid),
            0 0 3px var(--link-glow-outer);
}

.illuminate-on-hover-small:hover span {
    text-shadow:
            0 0 1px var(--link-glow-inner),
            0 0 2px var(--link-glow-outer);
}

/* ==========================================================
   EMAIL CONTACT FORM
 ============================================================*/
.contact-form {
    width: 400px;          /* FIXED visual width */
    max-width: 100%;      /* still responsive on small screens */
    margin: 40px auto 0;  /* center exactly */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    align-self: flex-start;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

.contact-success {
    width: 400px;         /* EXACT match to form */
    max-width: 100%;
    margin: 16px auto 0; /* centered under button */
    text-align: center;
    font-size: 14px;
    color: var(--frank_text_color_1);
    text-shadow:
            0 0 1px var(--link-glow-inner),
            0 0 2px var(--link-glow-mid),
            0 0 3px var(--link-glow-outer);
}

.contact-error {
    width: 400px;         /* EXACT match to form */
    max-width: 100%;
    margin: 16px auto 0; /* centered under button */
    text-align: center;
    font-size: 14px;
    color: #ee0c27;
}

/* ==========================================================
   FOOTER
   Never fixed or absolutely positioned; follows all page content.
   ========================================================== */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 18px 24px;
    width: calc(100% - 40px);
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 0 36px;
    border-top: 1px solid var(--lieben_frame_line_color);
    color: var(--lieben_frame_text_color);
}

.social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
}

.meta {
    font-size: 13px;
    line-height: 1.5;
}


/* ==========================================================
   MOBILE
   ========================================================== */
/* Keep every navigation link visible on small screens. */
@media (max-width: 760px) {
    .title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 22px 0 16px;
    }

    .site-navigation {
        gap: 0 22px;
    }

    .site-footer {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .home-img { width: 90%; }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .content-image {
        width: 80%;
        max-width: none;
    }

    /* KEEP SIZE VARIANTS CLAMPED ON MOBILE (NEW) */
    .content-image420px { max-width: 420px; }
    .content-image360px { max-width: 360px; }
    .content-image240px { max-width: 240px; }
    .content-image120px { max-width: 120px; }
}


/* ----------------------------------------------------------------------
   SVG artwork asset loading formatting etc
   ---------------------------------------------------------------------- */

/* GENERAL SVG CONTENT */
.content-svg {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border: 0;
}

/* CHAKRA SVG ARTWORK */
.chakra-svg {
    aspect-ratio: 420 / 2000;
}

/* chakras2.php: remove the original SVG canvas's unused lower 800 units. */
.chakra-svg.chakra-svg-compact {
    aspect-ratio: 420 / 1200;
}


/* CHAKRA SVG — INTERACTION APPEARANCE */
.svg-chakra {
    --svg-hover-scale: 1.2;
    --svg-transition: 250ms;

    --svg-label-color: #DAF6D1;
    --svg-label-size: 18px;
    --svg-label-weight: 600;
    --svg-label-spacing: 2px;
    --svg-label-offset: 45px;

    --svg-pulse-duration: 5.0s;
    --svg-pulse-scale: 1.8;
}