/* ============================================================
   core-v2.css — new retro-tech design system
   Loaded only by pages that have been migrated to the redesign.
   core.css is untouched and still serves every other page.
   ============================================================ */

@font-face {
    font-family: logo;
    src: url("./fonts/Silkscreen-Regular.woff2") format("woff2"),
         url("./fonts/Silkscreen-Regular.ttf") format("truetype");
    font-display: optional;
}

@font-face {
    font-family: mainTitle;
    src: url("./fonts/Orbitron-Bold.woff2") format("woff2"),
         url("./fonts/Orbitron-Bold.ttf") format("truetype");
    font-weight: 700;
    font-display: optional;
}

@font-face {
    font-family: mainTitle;
    src: url("./fonts/Orbitron-Regular.woff2") format("woff2"),
         url("./fonts/Orbitron-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: optional;
}

@font-face {
    font-family: mainText;
    src: url("./fonts/Electrolize-Regular.woff2") format("woff2"),
         url("./fonts/Electrolize-Regular.ttf") format("truetype");
    font-display: optional;
}

:root {
    --ink: #120e1a;
    --ink-2: #1a1526;
    --paper: #efe9f5;
    --paper-dim: #c6bdd8; /* same hue/saturation as before, lightened so it still clears WCAG AA (4.5:1) against the brightened .content-section gradient corners, not just flat --ink */
    --magenta: #ff3d97;
    --fire: #ffab3d;
    --violet: #7c3aed;
    --line: rgba(239, 233, 245, 0.12);

    /* section identity — one accent per area of the site */
    --sec1: #ff3d97; /* 90s Art & Fractal History */
    --sec2: #2fe0c6; /* Current Fractal Art */
    --sec3: #ffcf3d; /* Art Prints and Gifts */
    --sec4: #8fe23a; /* Free Fractal App */

    /* fonts: reuse the site's existing self-hosted @font-face families
       (defined above in the cascade — logo=Silkscreen, mainTitle=Orbitron, mainText=Electrolize) */
    --display: 'mainTitle', 'Arial Narrow', sans-serif;
    --body-font: 'mainText', 'Segoe UI', sans-serif;
    --pixel: 'logo', 'Courier New', monospace;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--ink);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    text-wrap: balance;
    margin: 0;
}

p {
    margin: 0;
    line-height: 1.5;
}

a {
    color: var(--magenta);
    text-decoration-line: underline;
    text-decoration-color: rgba(255, 61, 151, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: var(--magenta);
}

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

img {
    display: block;
    max-width: 100%;
    box-shadow: none; /* core.css gave every image a drop shadow; the new system doesn't use one */
}

/* text directly followed by an image/figure/video otherwise has zero gap, since p/h2/h3 have no bottom
   margin. the .gallery-image/.video-embed/etc class selectors are needed here too since their own
   margin rules (higher specificity than a bare type selector) would otherwise win over p + figure */
:is(p, h2, h3) + :is(img, figure, .gallery-image, .video-embed, .video-embed--short, .embed-container, .feature-card) {
    margin-top: 20px;
}

/* the legacy .embed-container class (still used inline on a couple of pages) never had a
   margin-bottom of its own, unlike .video-embed/.video-embed--short */
.embed-container {
    margin-bottom: 24px;
}

.wrap, .innerSection {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

@media only screen and (min-width: 820px) {
    .wrap, .innerSection {
        padding: 0 24px;
    }
}

/* ---------- sticky top bar: menu + social ---------- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* the mega-menu trigger is a separate fixed-position element (not a flex child here), so this bar only ever lays out the social icons — always push them to the right */
    padding: 8px 10px;
    background: rgba(18, 14, 26, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

@media only screen and (min-width: 1112px) {
    .top-bar {
        padding: 14px 20px;
    }
}

.top-bar .social-links {
    display: flex;
    align-items: center;
    gap: 0;
    column-gap: 16px;
    justify-content: flex-end;
}

.top-bar .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--paper-dim);
    text-decoration: none;
    font-family: var(--pixel);
    font-size: 11px;
}

.top-bar .social-links a:hover {
    color: var(--magenta);
}

.top-bar .social-links svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* text label next to each icon is hidden on mobile, shown once there's room */
.top-bar .social-links a .social-links__label {
    display: none;
}

@media only screen and (min-width: 1112px) {
    .top-bar .social-links a {
        width: auto;
        height: auto;
        padding: 8px 0;
    }

    .top-bar .social-links a .social-links__label {
        display: inline;
    }
}

/* ---------- mast ---------- */
.page-header__mast {
    padding: 18px 16px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-family: var(--pixel);
    font-size: 12px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--line);
}

@media only screen and (min-width: 1112px) {
    .page-header__mast {
        padding: 22px 24px;
        font-size: 14px;
    }
}

.page-header__mast .page-header__logo {
    width: 30px;
    height: 30px;
    filter: invert(1);
    mix-blend-mode: screen;
    box-shadow: none;
    border: 0;
    margin: 0;
}

@media only screen and (min-width: 1112px) {
    .page-header__mast .page-header__logo {
        width: 40px;
        height: 40px;
    }
}

.page-header__mast .page-header__role {
    color: var(--paper-dim);
}

/* ---------- mega-menu: restyle only — mechanics unchanged from core.css ---------- */
.mega-menu {
    float: left;
}

.mega-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

body:has(#toggle:checked) {
    overflow: hidden;
}

.mega-menu .mega-menu__panel {
    background: var(--ink-2);
    height: 100%;
    left: -100%;
    line-height: 1.4;
    overflow: scroll;
    position: fixed;
    top: 0px;
    transition: left 0.5s ease-in-out;
    width: 100%;
    z-index: 6;
}

.mega-menu .mega-menu__panel > ul > li {
    border-top: 4px solid var(--sec-accent, var(--line));
}

.mega-menu .mega-menu__panel > ul > li:nth-child(1) { --sec-accent: var(--sec1); }
.mega-menu .mega-menu__panel > ul > li:nth-child(2) { --sec-accent: var(--sec2); }
.mega-menu .mega-menu__panel > ul > li:nth-child(3) { --sec-accent: var(--sec3); }
.mega-menu .mega-menu__panel > ul > li:nth-child(4) { --sec-accent: var(--sec4); }

.mega-menu .mega-menu__panel > ul > li li {
    background: var(--ink);
    border-style: solid;
    border-color: var(--line);
    border-width: 1px 0 0 0;
}

.mega-menu .mega-menu__panel ul ul {
    border-style: solid;
    border-color: var(--line);
    border-width: 0 0 1px 0;
    box-shadow: none;
}

.mega-menu .mega-menu__panel .mega-menu__group > div {
    border-bottom: 0px;
    color: var(--sec-accent, var(--paper));
    font-family: var(--pixel);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 18px 16px 10px;
    font-style: normal;
}

.mega-menu .mega-menu__panel .mega-menu__group > div:after {
    display: none;
}

.mega-menu .mega-menu__panel a {
    align-items: center;
    color: var(--paper-dim);
    display: flex;
    gap: 6px;
    justify-content: space-between;
    padding: 14px 16px;
    text-decoration: none;
    font-family: var(--body-font);
    font-weight: 400;
    font-size: 17px;
}

.mega-menu .mega-menu__panel a:hover {
    color: var(--paper);
}

.mega-menu .mega-menu__panel a::after {
    display: none;
}

.mega-menu .mega-menu__panel .mega-menu__panel-header {
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    height: 50px;
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 1;
}

.mega-menu .mega-menu__close,
.mega-menu .mega-menu__toggle-label {
    background: transparent;
    cursor: pointer;
}

.mega-menu .mega-menu__toggle-label {
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    left: 8px;
    top: 8px;
    padding: 0;
    position: fixed;
    z-index: 6;
}

.mega-menu .mega-menu__toggle-label div {
    background: var(--paper);
    height: 2px;
    width: 22px;
}

.mega-menu .mega-menu__close {
    align-items: center;
    color: var(--paper-dim);
    cursor: pointer;
    display: flex;
    float: right;
    font-family: var(--pixel);
    font-size: 11px;
    font-weight: 400;
    height: 49px;
    padding-right: 16px;
}

.mega-menu .mega-menu__close:hover {
    color: var(--paper);
}

.mega-menu #toggle {
    display: none;
}

.mega-menu #toggle:checked ~ .mega-menu__panel {
    left: 0px;
}

@media only screen and (min-width: 1112px) {
    .mega-menu {
        float: none;
    }

    .mega-menu .mega-menu__toggle-label {
        display: none;
    }

    .mega-menu .mega-menu__panel {
        display: block;
        overflow: initial;
        position: static;
        width: auto;
        background: transparent;
    }

    .mega-menu .mega-menu__panel > ul {
        justify-content: center;
        margin-bottom: 0px;
        position: relative;
        display: flex !important;
    }

    .mega-menu .mega-menu__panel > ul > li {
        border-top: 0;
        border-bottom: 3px solid var(--sec-accent, transparent);
    }

    .mega-menu .mega-menu__panel > ul > li > div {
        align-items: center;
        display: flex;
        height: 36px;
        margin: 0 6px 0 0;
        padding: 0 !important;
    }

    .mega-menu .mega-menu__panel ul {
        display: none;
    }

    .mega-menu .mega-menu__panel li:hover ul {
        background: var(--ink-2);
        border: 1px solid var(--line);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        display: block;
        position: absolute;
        top: 36px;
        z-index: 1;
    }

    .mega-menu .mega-menu__panel li:hover ul li {
        background: var(--ink-2);
        border-bottom: 1px solid var(--line);
    }

    .mega-menu .mega-menu__panel li:hover ul li:hover {
        background: var(--ink);
    }

    .mega-menu .mega-menu__panel-header {
        display: none;
    }
}

/* ---------- hero ---------- */
.hero {
    padding: 36px 16px 44px;
    background:
        radial-gradient(70% 55% at 30% 0%, rgba(255, 61, 151, 0.16), transparent 65%),
        var(--ink);
    border-bottom: 7px solid var(--sec1);
}

.hero__grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media only screen and (min-width: 1112px) {
    .hero {
        padding: 64px 24px 72px;
    }

    .hero__grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 48px;
        align-items: center;
    }
}

.hero h1 {
    font-family: var(--display);
    font-weight: 900;
    letter-spacing: 0.005em;
    font-size: clamp(1.9rem, 8vw, 3.2rem);
    background: linear-gradient(100deg, var(--sec1) 0%, var(--fire) 32%, var(--sec2) 64%, var(--sec4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 50px rgba(255, 61, 151, 0.3);
}

.hero .strapLine {
    margin: 14px 0 0;
    color: var(--paper);
    font-size: 1.15rem;
    max-width: 52ch;
    text-align: left;
}

.hero .strapLine + .strapLine {
    margin-top: 10px;
}

.hero__figure {
    position: relative;
    border: 1px solid var(--line);
    line-height: 0;
}

.hero__figure img {
    width: 100%;
    height: auto;
}

.hero__figure .hero__tag {
    position: absolute;
    top: -1px;
    left: -1px;
    font-family: var(--pixel);
    font-size: 10px;
    letter-spacing: 0.04em;
    background: var(--sec1);
    color: var(--ink);
    padding: 4px 8px;
}

/* ---------- content sections: each carries its own accent so it reads as a distinct zone ---------- */
.content-section {
    padding: 44px 16px 48px;
    border-top: 7px solid var(--sec-accent);
    background:
        radial-gradient(130% 75% at 0% 0%, color-mix(in srgb, var(--sec-accent) 28%, transparent), transparent 58%),
        radial-gradient(110% 65% at 100% 100%, color-mix(in srgb, var(--sec-accent) 17%, transparent), transparent 60%),
        var(--ink);
}

.content-section.content-section--sec1 { --sec-accent: var(--sec1); }
.content-section.content-section--sec2 { --sec-accent: var(--sec2); }
.content-section.content-section--sec3 { --sec-accent: var(--sec3); }
.content-section.content-section--sec4 { --sec-accent: var(--sec4); }

@media only screen and (min-width: 1112px) {
    .content-section {
        padding: 64px 24px;
    }
}

.content-section .kicker {
    display: inline-flex;
    font-family: var(--pixel);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--sec-accent);
    padding: 5px 10px;
    margin-bottom: 14px;
}

.content-section h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    color: var(--paper);
    text-align: left;
}

@media only screen and (min-width: 1112px) {
    .content-section h2 {
        font-size: 1.6rem;
    }
}

.content-section p {
    color: var(--paper-dim);
    max-width: 62ch;
}

.content-section p + p {
    margin-top: 10px;
}

.content-section a {
    color: var(--paper);
    text-decoration-color: color-mix(in srgb, var(--sec-accent) 60%, transparent);
}

/* ---------- feature grid (replaces .grid / .grid.small from core.css) ---------- */
.feature-grid {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media only screen and (min-width: 640px) {
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
    }
}

.feature-card {
    display: block;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--sec-accent) 45%, var(--line));
    background: var(--ink-2);
    overflow: hidden;
    max-width: 380px;
}

.feature-grid .feature-card {
    max-width: none;
}

.feature-card img {
    width: 100%;
    height: auto;
    transition: transform 0.35s ease;
}

.feature-card:hover img {
    transform: scale(1.03);
}

.feature-card p {
    padding: 12px 16px;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--paper);
    max-width: none;
    margin: 0;
}

.also-see {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.also-see .also-see__label {
    font-family: var(--pixel);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper-dim);
}

.also-see__grid {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media only screen and (min-width: 640px) {
    .also-see__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
}

.also-see__grid a {
    display: block;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--sec-accent) 45%, var(--line));
    background: var(--ink-2);
    line-height: 0;
}

.also-see__grid img {
    width: 100%;
    height: auto;
}

.also-see__grid p {
    padding: 10px 14px;
    font-size: 0.85rem;
    color: var(--paper-dim);
    font-family: var(--body-font);
    border-top: 1px solid color-mix(in srgb, var(--sec-accent) 45%, var(--line));
    max-width: none;
    margin: 0;
}

.also-see__grid a:hover p {
    color: var(--paper);
}

/* ---------- product card (shop section) ---------- */
/* Mounts a full Shopify product widget (image + title + price + button), not just
   an image, so it needs to size to its content rather than a fixed aspect-ratio. */
.product-mount {
    width: 100%;
    flex: 1 1 auto;
    min-height: 420px;
    background: var(--ink-2);
    padding-bottom: 16px;
}

/* NOTE: the Shopify Buy Button SDK renders each product into its own cross-origin <iframe>
   (confirmed via rendered-DOM inspection), so core-v2.css cannot style anything inside it -
   no selector, however specific, and no !important, can cross that boundary. All visual
   styling of the widget's title/price/image/button must go through the `styles` key in the
   `options` object passed to `ui.createComponent()` in each shop page's own <script> block. */

.product-teaser {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media only screen and (min-width: 640px) {
    .product-teaser {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 22px;
    }
}

.product-teaser .product-mount {
    border: 1px solid color-mix(in srgb, var(--sec-accent) 45%, var(--line));
}

.see-all-link {
    display: inline-block;
    margin-top: 28px;
    font-family: var(--pixel);
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* ---------- footer ---------- */
.site-footer {
    padding: 32px 16px 44px;
    border-top: 1px solid var(--line);
    background: var(--ink);
    text-align: left;
}

@media only screen and (min-width: 640px) {
    .site-footer {
        padding: 40px 24px 56px;
    }
}

.site-footer p {
    color: var(--paper-dim);
    max-width: none;
}

.site-footer .social-links {
    display: flex;
    gap: 16px;
    margin: 16px 0;
    justify-content: flex-start;
}

.site-footer .social-links a {
    display: flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 0;
    color: var(--paper-dim);
    text-decoration: none;
    font-family: var(--pixel);
    font-size: 11px;
}

.site-footer .social-links a:hover {
    color: var(--magenta);
}

.site-footer .social-links svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.site-footer .site-footer__copyright {
    margin-top: 16px;
    color: var(--paper-dim);
    font-size: 11px;
    font-family: var(--pixel);
}

/* ============================================================
   Components for subpages (added when migrating beyond the homepage)
   ============================================================ */

/* ---------- breadcrumb ---------- */
.breadcrumb {
    padding: 14px 16px 0;
    margin: 0;
}

@media only screen and (min-width: 1112px) {
    .breadcrumb {
        padding: 18px 24px 0;
    }
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--pixel);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--paper-dim);
}

.breadcrumb a {
    color: var(--paper-dim);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--page-accent, var(--magenta));
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin-left: 6px;
    color: var(--page-accent, var(--magenta));
}

.breadcrumb li[aria-current="page"] {
    color: var(--paper);
}

/* ---------- subpage header (a single-topic page's own hero) ---------- */
.page-header {
    padding: 20px 16px 40px;
    background:
        radial-gradient(90% 60% at 20% 0%, color-mix(in srgb, var(--page-accent, var(--magenta)) 18%, transparent), transparent 60%),
        var(--ink);
}

@media only screen and (min-width: 1112px) {
    .page-header {
        padding: 32px 24px 56px;
    }
}

.page-header .kicker {
    display: inline-flex;
    font-family: var(--pixel);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--page-accent, var(--magenta));
    padding: 5px 10px;
    margin-bottom: 14px;
}

.page-header h1 {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    background: linear-gradient(100deg, var(--page-accent, var(--magenta)), var(--fire));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: left;
    letter-spacing: 0.005em;
}

.page-header .strapLine {
    margin-top: 14px;
    color: var(--paper);
    max-width: 60ch;
    font-size: 1.4rem;
    text-align: left;
}

.page-header .strapLine + .strapLine {
    margin-top: 8px;
}

/* ---------- primary CTA button (e.g. "Start the Fractal Art app") ---------- */
.goLinkWrapper {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;
}

.goLink {
    display: inline-flex;
    align-items: center;
    font-family: var(--pixel);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--page-accent, var(--sec4));
    border: 2px solid var(--page-accent, var(--sec4));
    padding: 14px 22px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.goLink:hover {
    opacity: 0.85;
}

/* "Also see" inline link row (nav.related-links) used at the top of subpages */
nav.related-links {
    margin: 20px 0 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

nav.related-links a {
    font-family: var(--body-font);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--paper);
    border: 1px solid color-mix(in srgb, var(--page-accent, var(--magenta)) 45%, var(--line));
    padding: 6px 12px;
}

nav.related-links a:hover {
    border-color: var(--page-accent, var(--magenta));
    color: var(--page-accent, var(--magenta));
}

nav.related-links a.related-links__link--active {
    background: var(--page-accent, var(--magenta));
    color: var(--ink);
    border-color: var(--page-accent, var(--magenta));
}

/* .page-header already has generous bottom padding, so skip the extra margin when the nav is the last
   thing in the header - but keep it when other content (e.g. a gallery image) follows within the header. */
.page-header nav.related-links:last-child {
    margin-bottom: 0;
}

/* ---------- gallery images (figure.gallery-image) ---------- */
.gallery-image {
    display: block;
    width: 100%;
    margin: 0 0 24px;
    border: 1px solid var(--line);
    background: var(--ink-2);
    line-height: 0;
}

.gallery-image__img,
.gallery-image img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-image figcaption {
    padding: 10px 14px;
    font-family: var(--pixel);
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--paper-dim);
    border-top: 1px solid var(--line);
}

.gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media only screen and (min-width: 640px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
        align-items: start;
    }

    .gallery > br {
        display: none;
    }

    /* quote-entry cards need more room to breathe than the auto-fit image grid gives them */
    .gallery:has(.quote-entry) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- special insert: narrative/FAQ content marked apart from gallery sections ---------- */
.special-insert {
    position: relative;
    border: 2px dashed var(--page-accent, var(--fire));
    background:
        radial-gradient(130% 75% at 0% 0%, color-mix(in srgb, var(--violet) 28%, transparent), transparent 58%),
        radial-gradient(110% 65% at 100% 100%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 60%),
        var(--ink-2);
    padding: 28px 20px 24px;
    margin: 32px 0;
    border-radius: 0;
    color: var(--paper);
}

.special-insert::before,
.special-insert::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--page-accent, var(--fire));
    border-style: solid;
    border-width: 0;
}

.special-insert::before {
    top: -2px;
    left: -2px;
    border-top-width: 3px;
    border-left-width: 3px;
}

.special-insert::after {
    top: -2px;
    right: -2px;
    border-top-width: 3px;
    border-right-width: 3px;
}

.special-insert__tab {
    display: inline-flex;
    font-family: var(--pixel);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--page-accent, var(--fire));
    padding: 5px 10px;
    margin-bottom: 14px;
}

.special-insert h2, .special-insert h3 {
    color: var(--paper);
    text-align: left;
}

.special-insert p {
    color: var(--paper-dim);
    max-width: 66ch;
}

.special-insert__body div {
    background: transparent;
    border: none;
}

.special-insert figure, .special-insert img {
    display: block;
    height: auto;
}

/* ---------- FAQ ---------- */
.faq h3, .faq__heading {
    font-family: var(--display);
}

.special-insert__body h4 {
    font-family: var(--display);
    font-size: 1rem;
    color: var(--paper);
    margin: 20px 0 0;
    display: flex;
    gap: 8px;
}

.special-insert__body h4::before {
    content: "Q.";
    color: var(--page-accent, var(--fire));
    font-family: var(--pixel);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.special-insert__body p {
    margin-top: 6px;
    color: var(--paper-dim);
}

/* ---------- quote block ---------- */
.quote-entry__quote {
    display: block;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--page-accent, var(--magenta));
    padding: 20px 22px 4px;
    position: relative;
}

/* separates each quote+image entry from the one before it, without a line above the first in a section */
.quote-entry + .quote-entry {
    margin-top: 24px;
    padding-top: 28px;
    border-top: 3px dashed var(--paper-dim);
}

/* single-column-only divider — once the grid puts quotes side by side (see .gallery:has(.quote-entry) below),
   the margin/padding/border here would land on some cells and not others depending on row position and
   throw off the grid's row alignment, so drop all of it and let the grid's own gap handle spacing instead */
@media only screen and (min-width: 640px) {
    .quote-entry + .quote-entry {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

/* ---------- video embeds ---------- */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: 1px solid var(--line);
    background: var(--ink-2);
    margin-bottom: 24px;
}

.video-embed iframe,
.video-embed object,
.video-embed embed,
.video-embed img,
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ---------- video facade: a thumbnail + play button, swapped for the real
   iframe only on click, so the ~1MB of YouTube player JS never loads unless
   someone actually plays the video (see /video-facade.js) ---------- */
[data-yt] {
    cursor: pointer;
}

.video-embed__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(18, 14, 26, 0.8);
    border: 2px solid var(--paper);
    border-radius: 10px;
    cursor: pointer;
    z-index: 1;
}

.video-embed__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent var(--paper);
}

.video-embed__play:hover {
    border-color: var(--page-accent, var(--magenta));
}

.video-embed__play:hover::before {
    border-left-color: var(--page-accent, var(--magenta));
}

@media only screen and (min-width: 886px) {
    .video-embed.video-embed--desktop {
        display: block;
    }
}

.video-embed.video-embed--mobile {
    display: block;
}

@media only screen and (min-width: 886px) {
    .video-embed.video-embed--mobile {
        display: none;
    }
}

.video-embed--short {
    position: relative;
    max-width: 315px;
    aspect-ratio: 315 / 560;
    margin: 0 auto 24px;
    border: 1px solid var(--line);
    overflow: hidden;
}

.video-embed--short iframe,
.video-embed--short img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* ---------- read more toggle ---------- */
.read-more__toggle-label {
    cursor: pointer;
    font-weight: 600;
    color: var(--page-accent, var(--magenta));
    font-size: 0.9em;
}

.read-more__content,
#readMoreToggle {
    display: none;
}

#readMoreToggle:checked ~ .read-more__content {
    display: inline;
}

/* ---------- long-page section tints (fractal-rave-flyers): breaks up a very long page into
   distinct zones, same graduated-blend technique as .content-section, cycling through the
   site's accent palette instead of the old pastel bg1-bg6 colours ---------- */
.bg1, .bg7 { --bg-accent: var(--sec1); }
.bg2, .bg8 { --bg-accent: var(--sec2); }
.bg3, .bg9 { --bg-accent: var(--sec3); }
.bg4, .bg10 { --bg-accent: var(--sec4); }
.bg5, .bg11 { --bg-accent: var(--fire); }
.bg6, .bg12 { --bg-accent: color-mix(in srgb, var(--magenta) 55%, var(--fire) 45%); }

.bg1, .bg2, .bg3, .bg4, .bg5, .bg6,
.bg7, .bg8, .bg9, .bg10, .bg11, .bg12 {
    background:
        radial-gradient(130% 75% at 0% 0%, color-mix(in srgb, var(--bg-accent) 28%, transparent), transparent 58%),
        radial-gradient(110% 65% at 100% 100%, color-mix(in srgb, var(--bg-accent) 17%, transparent), transparent 60%),
        var(--ink);
}

/* ---------- real product grid (shop pages: caWrapper/ca_cells and productGrid patterns) ---------- */
.product-carousel {
    max-width: 1080px;
    margin: 48px auto 0;
    padding: 32px 16px 0;
    border-top: 1px solid var(--line);
}

@media only screen and (min-width: 820px) {
    .product-carousel {
        padding: 32px 24px 0;
    }
}

.product-carousel__title {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--paper);
    text-align: left;
    margin-bottom: 20px;
    padding: 0;
    border: none;
}

.product-carousel__body {
    width: 100%;
}

.product-carousel__track {
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.product-carousel__item {
    flex: 0 0 auto;
    width: 66%;
    display: flex;
    padding: 0;
    list-style: none;
    scroll-snap-align: start;
}

@media only screen and (min-width: 431px) {
    .product-carousel__item {
        width: 40%;
    }
}

@media only screen and (min-width: 886px) {
    .product-carousel__item {
        width: 27%;
    }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 22px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.product-grid__item {
    display: flex;
    min-width: 0;
}

.product-mount {
    border: 1px solid color-mix(in srgb, var(--page-accent, var(--sec3)) 45%, var(--line));
}

/* ---------- per-page single accent (subpages belong to exactly one nav group) ---------- */
body.page-sec1 { --page-accent: var(--sec1); } /* 90s Art & Fractal History */
body.page-sec2 { --page-accent: var(--sec2); } /* Current Fractal Art */
body.page-sec3 { --page-accent: var(--sec3); } /* Art Prints and Gifts */
body.page-sec4 { --page-accent: var(--sec4); } /* Free Fractal App */