/* PINEGROW: select the rule for the current screen width in Style > Active.
   Each range contains its own editable hero settings. */
/* Below 600px */
@media (max-width: 599.98px) {
    section.hero--gallery {
        background-position: 60% 50%;
        --hero-bg-offset-x: 0px;
        --hero-bg-offset-y: 0px;
        padding: 0 clamp(16px, 2vw, 40px) clamp(18px, 2vw, 40px);
    }
    section.hero--gallery::before {
        inset: 0;
        background-image: url("assets/hero-design-background.jpg");
        background-position: inherit;
        translate: var(--hero-bg-offset-x, 0px) var(--hero-bg-offset-y, 0px);
        background-size: cover;
        filter: blur(var(--hero-blur, 0px));
    }
    .hero--gallery .hero__composition {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 28px);
        margin-bottom: 0;
        container-type: inline-size;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .hero--gallery h1.hero__title {
        display: flex;
        flex-direction: column;
        margin: 0;
        gap: 0;
        font-size: inherit;
    }
    .hero--gallery .hero__title-main {
        display: flex;
        align-items: baseline;
        max-width: 100%;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 3.36cqw;
        font-size: 18cqw;
        line-height: 1.05;
        min-width: 0;
        white-space: normal;
        transform: none;
        flex-wrap: wrap;
        column-gap: .15em;
        row-gap: .08em;
    }
    .hero--gallery .hero__title-name-star {
        font-size: 1em;
    }
    .hero--gallery .hero__title-name-star > .brand-name {
        font-style: italic;
    }
    .hero--gallery .hero__title-art {
        position: static;
        margin-left: 0;
        font-size: .65em;
        letter-spacing: .025em;
        white-space: normal;
        flex-basis: auto;
        overflow-wrap: anywhere;
    }
    .hero--gallery .hero__title-last {
        align-self: flex-end;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .03em;
        transform: none;
        font-size: 11cqw;
    }
    .hero--gallery .hero-gallery-y {
        position: relative;
        display: inline-block;
    }
    .hero--gallery .hero-dark-2 {
        position: absolute;
        left: calc(100% - .4em);
        top: -.3em;
        margin: 0;
    }
    .hero--gallery .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.75cqw 4.2cqw;
        font-size: 1.65cqw;
        line-height: 1.5;
        white-space: normal;
        flex-direction: row;
        align-items: flex-start;
        min-width: 0;
    }
    .hero-time-label-full {
        display: inline;
    }
    .hero-time-label-short {
        display: none;
    }
    .hero--gallery .hero-meta > span:last-child {
        margin-left: 0;
        text-align: left;
    }
}
/* 600px through 700px */
@media (min-width: 600px) and (max-width: 700px) {
    section.hero--gallery {
        background-position: 50% 50%;
        --hero-bg-offset-x: 0px;
        --hero-bg-offset-y: 0px;
        padding: 0 clamp(16px, 2vw, 40px) clamp(18px, 2vw, 40px);
    }
    section.hero--gallery::before {
        inset: 0;
        background-image: url("assets/hero-design-background.jpg");
        background-position: inherit;
        translate: var(--hero-bg-offset-x, 0px) var(--hero-bg-offset-y, 0px);
        background-size: cover;
        filter: blur(var(--hero-blur, 0px));
        left: -245px;
    }
    .hero--gallery .hero__composition {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 28px);
        margin-bottom: 0;
        container-type: inline-size;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .hero--gallery h1.hero__title {
        display: flex;
        flex-direction: column;
        margin: 0;
        gap: 0;
        font-size: inherit;
    }
    .hero--gallery .hero__title-main {
        display: flex;
        align-items: baseline;
        max-width: 100%;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 2.99cqw;
        font-size: 18cqw;
        line-height: 1.05;
        min-width: 0;
        white-space: normal;
        transform: none;
        flex-wrap: wrap;
        column-gap: .15em;
        row-gap: .08em;
    }
    .hero--gallery .hero__title-name-star {
        font-size: 1em;
    }
    .hero--gallery .hero__title-name-star > .brand-name {
        font-style: italic;
    }
    .hero--gallery .hero__title-art {
        position: static;
        margin-left: 0;
        font-size: .65em;
        letter-spacing: .025em;
        white-space: normal;
        flex-basis: auto;
        overflow-wrap: anywhere;
    }
    .hero--gallery .hero__title-last {
        align-self: flex-end;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        font-size: 11cqw;
        line-height: 1;
        letter-spacing: .03em;
        transform: none;
    }
    .hero--gallery .hero-gallery-y {
        position: relative;
        display: inline-block;
    }
    .hero--gallery .hero-dark-2 {
        position: absolute;
        left: calc(100% - .4em);
        top: -.3em;
        margin: 0;
    }
    .hero--gallery .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.75cqw 4.2cqw;
        font-size: 1.65cqw;
        line-height: 1.5;
        white-space: normal;
        flex-direction: row;
        align-items: flex-start;
        min-width: 0;
    }
    .hero-time-label-full {
        display: inline;
    }
    .hero-time-label-short {
        display: none;
    }
    .hero--gallery .hero-meta > span:last-child {
        margin-left: 0;
        text-align: left;
    }
}
@media (min-width: 800px) {
    .hero--gallery .hero__composition {
        bottom: 1px;
    }
}
@media (min-width: 1200px) {
    .hero--gallery .hero__composition {
    }
}

.hero--gallery .hero__composition {
    display: grid;
    flex-direction: column;
    align-items: baseline;
    container-type: inline-size;
    width: 100%;
    max-width: none;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "main main" "meta experience";
    gap: 1px;
    row-gap: 0px;
    column-gap: 5px;
}
@media (min-width: 701px) and (max-width: 1200px) {
    section.hero--gallery {
        background-position: 50% 50%;
        --hero-bg-offset-x: 0px;
        --hero-bg-offset-y: 0px;
        padding: 0 clamp(16px, 2vw, 40px) clamp(18px, 2vw, 40px);
    }
    section.hero--gallery::before {
        inset: 0;
        background-image: url("assets/hero-design-background.jpg");
        background-position: inherit;
        translate: var(--hero-bg-offset-x, 0px) var(--hero-bg-offset-y, 0px);
        background-size: cover;
        filter: blur(var(--hero-blur, 0px));
        left: -253px;
    }
    .hero--gallery h1.hero__title {
        display: contents;
        flex-direction: column;
        margin: 0;
        gap: 0;
        font-size: inherit;
    }
    .hero--gallery .hero__title-main {
        display: flex;
        align-items: baseline;
        max-width: 100%;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: -2.64cqw;
        font-size: 10.7cqw;
        line-height: 1.05;
        min-width: 0;
        white-space: normal;
        transform: none;
        grid-area: main;
        flex-wrap: wrap;
        column-gap: .15em;
        row-gap: .08em;
    }
    .hero--gallery .hero__title-name-star {
        font-size: 1em;
    }
    .hero--gallery .hero__title-name-star > .brand-name {
        font-style: italic;
    }
    .hero--gallery .hero__title-art {
        position: static;
        margin-left: 0;
        font-size: .58em;
        letter-spacing: .025em;
        white-space: normal;
        flex-basis: auto;
        overflow-wrap: anywhere;
    }
    .hero--gallery .hero__title-last {
        align-self: baseline;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        font-size: 6.2cqw;
        line-height: 1;
        letter-spacing: .03em;
        transform: none;
        grid-area: experience;
        justify-self: end;
        padding-right: 13px;
    }
    .hero--gallery .hero-gallery-y {
        position: relative;
        display: inline-block;
    }
    .hero--gallery .hero-dark-2 {
        position: absolute;
        left: calc(100% - .4em);
        top: -.3em;
        margin: 0;
    }
    .hero--gallery .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8cqw;
        font-size: 1.1cqw;
        line-height: 1.5;
        white-space: normal;
        grid-area: meta;
        align-self: baseline;
        justify-content: space-between;
        flex-direction: row;
        min-width: 0;
    }
    .hero-time-label-full {
        display: inline;
    }
    .hero-time-label-short {
        display: none;
    }
    .hero--gallery .hero-meta > span {
        white-space: normal;
    }
}
@media (min-width: 800px) {
    .hero--gallery .hero__title-last {
    }
}
@media (min-width: 1201px) {
    section.hero--gallery {
        background-position: 50% 50%;
        --hero-bg-offset-x: 0px;
        --hero-bg-offset-y: 0px;
        padding: 0 clamp(16px, 2vw, 40px) clamp(18px, 2vw, 40px);
    }
    section.hero--gallery::before {
        inset: 0;
        background-image: url("assets/hero-design-background.jpg");
        background-position: inherit;
        translate: var(--hero-bg-offset-x, 0px) var(--hero-bg-offset-y, 0px);
        background-size: cover;
        filter: blur(var(--hero-blur, 0px));
    }
    .hero--gallery .hero__composition {
        display: grid;
        flex-direction: column;
        align-items: baseline;
        gap: clamp(12px, 1.5vw, 28px);
        margin-bottom: 0;
        container-type: inline-size;
        width: 100%;
        max-width: none;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-areas: "main main" "meta experience";
        column-gap: clamp(12px, 2vw, 36px);
    }
    .hero--gallery h1.hero__title {
        display: contents;
        flex-direction: column;
        margin: 0;
        gap: 0;
        font-size: inherit;
    }
    .hero--gallery .hero__title-main {
        display: flex;
        align-items: baseline;
        max-width: 100%;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: -2.64cqw;
        font-size: 10.7cqw;
        line-height: 1.05;
        min-width: 0;
        white-space: normal;
        transform: none;
        grid-area: main;
        flex-wrap: wrap;
        column-gap: .15em;
        row-gap: .08em;
    }
    .hero--gallery .hero__title-name-star {
        font-size: 1em;
    }
    .hero--gallery .hero__title-name-star > .brand-name {
        font-style: italic;
    }
    .hero--gallery .hero__title-art {
        position: static;
        margin-left: 0;
        font-size: .58em;
        letter-spacing: .025em;
        white-space: normal;
        flex-basis: auto;
        overflow-wrap: anywhere;
    }
    .hero--gallery .hero__title-last {
        align-self: baseline;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        font-size: 6.2cqw;
        line-height: 1;
        letter-spacing: .03em;
        transform: none;
        grid-area: experience;
        justify-self: end;
    }
    .hero--gallery .hero-gallery-y {
        position: relative;
        display: inline-block;
    }
    .hero--gallery .hero-dark-2 {
        position: absolute;
        left: calc(100% - .4em);
        top: -.3em;
        margin: 0;
    }
    .hero--gallery .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8cqw;
        font-size: 1.1cqw;
        line-height: 1.5;
        white-space: normal;
        grid-area: meta;
        align-self: baseline;
        justify-content: space-between;
        flex-direction: row;
        min-width: 0;
    }
    .hero-time-label-full {
        display: inline;
    }
    .hero-time-label-short {
        display: none;
    }
    .hero--gallery .hero-meta > span {
        white-space: normal;
    }
}
/* Allow metadata to wrap alongside Archived without overlapping it. */
.hero--gallery .hero-meta > span:last-child {
    flex-wrap: wrap;
    white-space: normal;
}
.hero--gallery .hero__title-brand {
    max-width: 100%;
}
.hero--gallery .hero-gallery-word {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Override legacy no-wrap spans so the requested minimum size can wrap. */
.hero--gallery .hero__title-main .hero__title-art {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.hero--gallery .hero__title-main .hero-gallery-word {
    display: inline;
    white-space: pre;
    overflow-wrap: anywhere;
}

/* Pinegrow: 450px and smaller, independent visual settings. */
@media (max-width: 450px) {
    section.hero--gallery {
        background-position: 50% 50%;
        --hero-bg-offset-x: 0px;
        --hero-bg-offset-y: 0px;
        padding: 0 clamp(16px, 2vw, 40px) clamp(18px, 2vw, 40px);
    }
    section.hero--gallery::before {
        inset: 0;
        background-image: url("assets/hero-design-background.jpg");
        background-position: inherit;
        translate: var(--hero-bg-offset-x, 0px) var(--hero-bg-offset-y, 0px);
        background-size: auto 80%;
        background-repeat: no-repeat;
        background-color: #dedede;
        filter: blur(var(--hero-blur, 0px));
    }
    .hero--gallery .hero__composition {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(12px, 1.5vw, 28px);
        margin-bottom: 0;
        container-type: inline-size;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .hero--gallery h1.hero__title {
        display: flex;
        flex-direction: column;
        margin: 0;
        gap: 0;
        font-size: inherit;
    }
    .hero--gallery .hero__title-main {
        display: flex;
        align-items: baseline;
        max-width: 100%;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 1.3599999999999999cqw;
        font-size: 18cqw;
        line-height: 1.05;
        min-width: 0;
        white-space: normal;
        transform: none;
        flex-wrap: wrap;
        column-gap: .15em;
        row-gap: .08em;
    }
    .hero--gallery .hero__title-name-star {
        font-size: 1em;
    }
    .hero--gallery .hero__title-name-star > .brand-name {
        font-style: italic;
    }
    .hero--gallery .hero__title-art {
        position: static;
        margin-left: 0;
        font-size: .65em;
        letter-spacing: .025em;
        white-space: normal;
        flex-basis: auto;
        overflow-wrap: anywhere;
    }
    .hero--gallery .hero__title-last {
        align-self: flex-end;
        font-family: "Agoka Family", Georgia, serif;
        font-weight: 400;
        line-height: 1;
        letter-spacing: .03em;
        transform: none;
        font-size: 11cqw;
    }
    .hero--gallery .hero-gallery-y {
        position: relative;
        display: inline-block;
    }
    .hero--gallery .hero-dark-2 {
        position: absolute;
        left: calc(100% - .4em);
        top: -.3em;
        margin: 0;
    }
    .hero--gallery .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.75cqw 4.2cqw;
        line-height: 1.5;
        white-space: normal;
        flex-direction: row;
        align-items: flex-start;
        min-width: 0;
        font-size: 1.65cqw;
    }
    .hero-time-label-full {
        display: inline;
    }
    .hero-time-label-short {
        display: none;
    }
}
@media (min-width:450px) {
    .hero--gallery .hero-meta > span:last-child {
        margin-left: 0;
        text-align: left;
    }
}
/* Smooth resizing: animate only the properties used by the hero layout. */
@media (min-width:800px) {
    .hero--gallery .hero__title-main,
    

.hero--gallery .hero__title-last,
    

.hero--gallery .hero__title-main .hero__title-art,
    

.hero--gallery .hero-meta {
        transition: font-size 100ms ease-out,
                letter-spacing 100ms ease-out,
                line-height 100ms ease-out,
                margin 100ms ease-out,
                gap 100ms ease-out;
        padding-right: 11px;
    }
}
@media (min-width: 1200px) {
    .hero--gallery .hero__title-main,
    

.hero--gallery .hero__title-last,
    

.hero--gallery .hero__title-main .hero__title-art,
    

.hero--gallery .hero-meta {
        margin-right: 23px;
    }
}
@media (min-width:1200px) {
    .hero--gallery .hero__composition {
        transition: gap 100ms ease-out, margin 100ms ease-out;
        gap: 3px;
        row-gap: 3px;
        column-gap: 10px;
        margin: 0;
        z-index: 0;
    }
}

section.hero--gallery {
    transition: padding 100ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    section.hero--gallery,
    
    
    .hero--gallery .hero__composition,
    
    
    .hero--gallery .hero__title-main,
    
    
    .hero--gallery .hero__title-last,
    
    
    .hero--gallery .hero__title-main .hero__title-art,
    
    
    .hero--gallery .hero-meta {
        transition: none;
    }
}
/* The hero uses the same floating + cursor as Hello. */
@media (hover: hover) and (pointer: fine) {
    body.orb-cursor-active .hero--gallery {
        cursor: none;
    }
    body.orb-cursor-active .cursor {
        opacity: 0 !important;
    }
}
/* Theme icon previews the destination theme colour. */
body[data-theme="light"] .theme-btn {
    --theme-target-colour: #d0f4ff;
    --theme-target-outline: #152eff;
}
body[data-theme="dark"] .theme-btn {
    --theme-target-colour: #152eff;
    --theme-target-outline: #d0f4ff;
}
.theme-btn .theme-icon__base,


.theme-btn .theme-icon__overlay {
    fill: var(--theme-target-colour);
    stroke: var(--theme-target-outline);
    stroke-width: 0.25px;
    transition: fill 350ms ease, stroke 350ms ease;
}
.theme-btn.is-spinning .theme-icon__base {
    animation: none;
}

/* Select the Hero section in Pinegrow and edit Background > Position.
   50% 50% = centre; 0% 50% = left; 100% 50% = right.
   For a vertical shift when cover fits the image height exactly, adjust
   --hero-bg-offset-y (for example -40px); x controls horizontal offset.
   Offsets move the artwork only and may expose an edge if shifted too far. */

/* Hello remains an entry snap point when its content exceeds the viewport. */
body:has(.hero--gallery) > .hello-page.home-snap-target {
    scroll-snap-align: start;
}

/* Show Hello while editing, even if preview scripts are paused. */
html:not(:has(#pageLoader)) .hello-page:not(.is-entered) .hello-page__title,
html:not(:has(#pageLoader)) .hello-page:not(.is-entered) .hello-page__profile,
html:not(:has(#pageLoader)) .hello-page:not(.is-entered) .hello-page__portrait,
html:not(:has(#pageLoader)) .hello-page:not(.is-entered) .hello-page__copy {
    opacity: 1;
    transform: none;
}

/* Shared site cursor, with native feedback over interactive controls. */
.hello-page { cursor: auto; }
@media (hover: hover) and (pointer: fine) {
    body.orb-cursor-active,
    body.orb-cursor-active * { cursor: none; }


}

/* Simple frosted circle and centred +, shared across the site. */
.hello-page__orb {
    z-index: 150;
    width: clamp(40px, 4vw, 64px);
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    color: var(--accent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 100ms ease;
}
@media (hover: hover) and (pointer: fine) {
    html.site-cursor-active,
    html.site-cursor-active body,
    html.site-cursor-active body * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hello-page__orb { transition: none; }
}

/* Soft glass deformation and slow hover transition; no guides or readout. */
.hello-page__orb {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: width 320ms ease-in-out, opacity 100ms ease;
}
.cursor-drop {
    position: absolute;
    inset: 0;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: rotate(var(--drop-angle, 0rad)) scale(var(--drop-stretch, 1), var(--drop-squash, 1));
    transition: background-color 320ms ease, border-width 320ms ease, backdrop-filter 320ms ease;
}
.cursor-plus {
    position: absolute;
    left: calc(50% + var(--plus-x, 0%));
    top: calc(50% + var(--plus-y, 0%));
    transform: translate(-50%, -50%);
    line-height: 1;
    transition: opacity 250ms ease;
}
.hello-page__orb.is-control { width: clamp(28px, 2.5vw, 44px); }
.hello-page__orb.is-control .cursor-drop {
    background: transparent;
    backdrop-filter: none;
    border-width: 1.5px;
}
.hello-page__orb.is-control .cursor-plus { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .hello-page__orb, .cursor-drop, .cursor-plus { transition: none; }
    .cursor-drop { transform: none; }
}

/* Compact circular cursor: 20px diameter, without oval deformation. */
.hello-page__orb,
.hello-page__orb.is-control {
    width: 20px;
    height: 20px;
    font-size: 10px;
}
.hello-page__orb .cursor-drop { transform: none; border-radius: 50%; }
.hello-page__orb .cursor-plus { left: 50%; top: 50%; }

/* Match the hovered icon's bounds, returning to 20px when leaving. */
.hello-page__orb {
    transition: width 320ms ease-in-out, height 320ms ease-in-out, opacity 100ms ease;
}
.hello-page__orb.is-control {
    width: 60px;
    height: 60px;
}
@media (prefers-reduced-motion: reduce) {
    .hello-page__orb { transition: none; }
}