/* ===========================================================================
   The line-art home page (inc/home/lines.php, 2026-09-28).

   One thread through the page: a tangle that settles into the app names
   (hero), winds into the Yumee mark (a pinned scroll), comes down into the
   plans and lies down as the footer's rule. assets/js/home-lines.js draws
   every line; this file lays out the words the lines lead to.

   `@media (scripting: enabled)` guards every hidden-until-drawn state, so
   without the script the page is plain, complete and still. There is no
   endless motion: the entrance plays once and everything else follows the
   reader's own scrolling, so reduced motion changes nothing here (Windows
   reports it whenever "Animation effects" is off, which many people switch
   off for speed rather than need).
   =========================================================================== */

/* ------------------------------------------------------------- shared --- */

.art-kicker {
    margin: 0 0 18px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--ink);
}

.art-accent { color: var(--art-violet); }

.art-title {
    margin: 0;
    font-family: var(--yu-font-display, inherit);
    font-weight: 600;
    font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--ink);
}

.art-hero__line { display: block; width: fit-content; }
.art-kicker { width: fit-content; }
@media (min-width: 761px) { .art-hero__title .art-hero__line { white-space: nowrap; } }

.art-body {
    margin: 22px 0 0;
    max-width: 34ch;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------- hero --- */

/* The header floats over the art with no paper behind it until the page
   moves, as in the owner's references; site.js sets data-scrolled. */
body:has(.art-hero) .site-header:not([data-scrolled='true']) .site-header__inner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
body:has(.art-hero) .site-header__inner {
    transition: box-shadow var(--slow) var(--ease), background-color var(--slow) var(--ease), border-color var(--slow) var(--ease);
}

/* The hero's strands: a canvas behind the words that scrolls with them,
   fading out at the foot of the section rather than ending on an edge. */
.art-hero__canvas,
.art-hero__glow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent);
    mask-image: linear-gradient(to bottom, black 78%, transparent);
    transition: opacity .35s var(--ease);
}
/* Hovering a name: that app's bundle, drawn once on a second canvas, fades
   in over the others, which step back. Only opacity changes. */
.art-hero__glow { opacity: 0; }
.art-hero.is-focus .art-hero__glow { opacity: 1; }
.art-hero.is-focus .art-hero__canvas { opacity: .45; }

/* The mark's strands: a canvas in the pinned part of the mark section. */
.art-mark__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.art-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    /* Pulled up under the floating header, like the inner pages' bands. */
    margin-top: calc(-1 * (var(--header-h) + var(--header-gap)));
    padding-top: calc(var(--header-total) + clamp(20px, 5vh, 64px));
    padding-bottom: clamp(40px, 8vh, 96px);
}

.art-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto 1fr;
    column-gap: clamp(24px, 5vw, 80px);
    min-height: calc(100svh - var(--header-total) - clamp(20px, 5vh, 64px) - clamp(40px, 8vh, 96px));
}

.art-hero__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 640px;
}

.art-hero__title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(2.75rem, 1.1rem + 4.3vw, 5.1rem);
    line-height: .98;
    letter-spacing: -.04em;
    color: var(--ink);
}

.art-hero__lead {
    margin: 26px 0 0;
    max-width: 30ch;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-soft);
}
.art-hero__lead strong { color: var(--ink); }

.art-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

/* The second button: an outlined pill on the paper. */
.art-btn-line {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
}
.art-btn-line:hover { background: var(--card); }

/* --------------------------------------------------- the names (hero) --- */

.art-apps {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    /* A little below the middle, where the strands arrive in the references. */
    padding-top: clamp(40px, 10vh, 120px);
    padding-right: clamp(0px, 3vw, 48px);
}

.art-apps__list {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 3.2vh, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each app's own colour: its dot, and every strand of its bundle. */
.art-app { --tone: var(--art-app-1); }
.art-app:nth-child(6n + 2) { --tone: var(--art-app-2); }
.art-app:nth-child(6n + 3) { --tone: var(--art-app-3); }
.art-app:nth-child(6n + 4) { --tone: var(--art-app-4); }
.art-app:nth-child(6n + 5) { --tone: var(--art-app-5); }
.art-app:nth-child(6n + 6) { --tone: var(--art-app-6); }

.art-app__link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: inherit;
    text-decoration: none;
    outline: none;
}

.art-app__dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: .62em;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 4px var(--bg);
    transition: transform .35s var(--ease);
}

.art-app__text { display: flex; flex-direction: column; min-width: 0; }

/* The underline draws in from the left on hover and leaves to the right:
   the gradient sits at the right edge at rest and at the left edge while
   hovered, so growing and shrinking happen from opposite ends. */
.art-app__name {
    align-self: flex-start;
    padding-bottom: 3px;
    font-weight: 600;
    font-size: clamp(1.25rem, 1rem + .6vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--art-violet);
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 100% 100%;
    transition: background-size .38s cubic-bezier(.65, 0, .35, 1);
}

.art-app__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

/* The main app: first in the list, a larger name and its label. */
.art-app--top .art-app__name { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); }
.art-app--top .art-app__dot {
    width: 14px;
    height: 14px;
    margin: .7em -2px 0;
}
.art-app__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 0 11px 0 9px;
    border-radius: var(--r-pill);
    background: var(--art-violet);
    color: var(--on-contrast);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}
.art-app__badge svg { width: 12px; height: 12px; fill: currentColor; }

.art-app__desc {
    margin-top: 4px;
    max-width: 36ch;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.art-app__link:is(:hover, :focus-visible) .art-app__name {
    background-size: 100% 1.5px;
    background-position: 0% 100%;
}
.art-app__link:is(:hover, :focus-visible) .art-app__dot { transform: scale(1.35); }
.art-app__link:focus-visible .art-app__text {
    outline: 2px solid var(--purple);
    outline-offset: 4px;
    border-radius: 4px;
}

.art-apps__also {
    margin: 28px 0 0 26px;
    font-size: .8125rem;
    color: var(--ink-faint);
}
.art-apps__also a { color: var(--purple-ink); }

/* Names wait for their strand. The script lights each one as its strand
   arrives (.is-lit); the fallback animation shows them anyway after a few
   seconds should the script never run. */
@media (scripting: enabled) {
    .art-app {
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity .6s var(--ease), transform .7s cubic-bezier(.2, .7, .2, 1);
        animation: art-show 0s linear 4s forwards;
    }
    .art-app.is-lit { opacity: 1; transform: none; animation: none; }
    .art-apps__also { opacity: 0; transition: opacity .8s var(--ease); animation: art-show 0s linear 4s forwards; }
    .art-apps.is-lit .art-apps__also { opacity: 1; animation: none; }
}
@keyframes art-show { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- mark --- */

.art-mark { position: relative; }

.art-mark__stick {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 12vh, 140px);
}

/* The apps' names riding on their threads as they come in (?mark=apps). */
.art-mark__tags { position: absolute; inset: 0; pointer-events: none; }
.art-mark__tag {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    font-family: var(--yu-font-display, inherit);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--art-app-1);
    text-shadow: 0 0 4px var(--yu-bg), 0 0 8px var(--yu-bg), 0 0 12px var(--yu-bg);
    will-change: transform, opacity;
}
.art-mark__tag:nth-child(6n + 2) { color: var(--art-app-2); }
.art-mark__tag:nth-child(6n + 3) { color: var(--art-app-3); }
.art-mark__tag:nth-child(6n + 4) { color: var(--art-app-4); }
.art-mark__tag:nth-child(6n + 5) { color: var(--art-app-5); }
.art-mark__tag:nth-child(6n + 6) { color: var(--art-app-6); }

.art-mark__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    height: 100%;
}

.art-mark__copy { max-width: 520px; }

.art-mark__slot {
    position: relative;
    justify-self: center;
    width: min(100%, 30rem, 62vh);
    aspect-ratio: 1;
}

.art-mark__still {
    position: absolute;
    inset: 4%;
    width: 92%;
    height: 92%;
    object-fit: contain;
}

/* With the script and motion: a tall section whose inside stays on screen,
   so scrolling through it winds the strands into the mark. */
@media (scripting: enabled) {
    .art-mark { height: 230svh; }
    .art-mark__stick {
        position: sticky;
        top: 0;
        height: 100svh;
        padding-block: calc(var(--header-total) + 12px) 32px;
    }
    .art-mark.is-live .art-mark__still { visibility: hidden; }
    .art-mark.is-live .art-mark__copy > * {
        opacity: var(--copy-in, 0);
        transform: translateY(calc((1 - var(--copy-in, 0)) * 18px));
    }
}

/* ------------------------------------------------------------ plans --- */

.art-plans {
    position: relative;
    isolation: isolate;
    padding-block: clamp(72px, 12vh, 140px) clamp(40px, 8vh, 96px);
}

.art-plans__inner { position: relative; z-index: 1; }

.art-plans__head { max-width: 640px; }

/* The line of plans is /pricing's own (pricing.css, loaded after this file):
   here it only gets its place under the words. */
.art-plans.pp { padding-block: clamp(72px, 12vh, 140px) clamp(40px, 8vh, 96px); }
.art-plans .pp-terms-wrap { margin-top: clamp(40px, 7vh, 72px); }

.art-plans__more { margin: clamp(26px, 4vh, 40px) 0 0; text-align: center; }

@media (scripting: enabled) {
    .art-plans__head > *, .art-plans__more {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .7s var(--ease), transform .8s cubic-bezier(.2, .7, .2, 1);
        animation: art-show 0s linear 6s forwards;
    }
    .art-plans__head.is-in > *, .art-plans__more.is-in {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ------------------------------------------------------------- coda --- */

.art-coda {
    position: relative;
    height: clamp(90px, 14vh, 150px);
}
.art-coda__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* The coda's strand is this page's footer rule. */
body:has(.art-coda) .site-footer { border-top: 0; }

/* ------------------------------------------------------------ narrow --- */

/* ------------------------------------------------------------- phone --- */
/* On a phone (owner's mockup, 2026-09-28): the words, then the apps as a
   column of tinted row cards (icon tile, name, short line, a chip) with the
   strands coming in from the left edge into a dot beside each card, then one
   wide button. Below the hero no line art: the mark is a tinted card with
   the logo picture, the plans the line from /pricing, the footer the
   ordinary one. */
.art-app__icon, .art-app__short, .art-app__chip, .art-apps__cta { display: none; }

@media (max-width: 760px) {
    .art-mark__canvas, .art-coda { display: none; }
    body:has(.art-coda) .site-footer { border-top: var(--outline-soft); }
    .art-hero__canvas, .art-hero__glow { -webkit-mask-image: none; mask-image: none; }

    /* The menu is a round ink button on this page. */
    body:has(.art-hero) .site-menu {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--on-contrast);
    }

    /* Hero: the words, then the apps. */
    .art-hero { min-height: 0; padding-top: calc(var(--header-total) + 8px); padding-bottom: 32px; }
    .art-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        min-height: 0;
    }
    .art-kicker { margin-bottom: 12px; font-size: .6875rem; letter-spacing: .28em; }
    .art-hero__title { font-size: clamp(2.35rem, 1.5rem + 4.6vw, 3rem); }
    .art-hero__lead { margin-top: 14px; font-size: 1rem; line-height: 1.45; max-width: 36ch; }
    .art-hero__actions { margin-top: 22px; gap: 10px; flex-wrap: nowrap; }
    .art-hero__actions .yu-btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 14px; justify-content: center; font-size: .9375rem; }

    /* The apps: a column of row cards, room on the left for the strands. */
    .art-apps { grid-column: 1; grid-row: 2; align-self: stretch; padding: 26px 0 0; }
    .art-apps__list { gap: 10px; margin-left: clamp(62px, 19vw, 100px); }
    .art-app { position: relative; }
    .art-app__link {
        align-items: center;
        gap: 11px;
        min-height: 62px;
        padding: 9px 10px 9px 9px;
        background: var(--yu-surface-accent);
        border: 1px solid var(--line-card);
        border-radius: 16px;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s var(--ease), transform .2s var(--ease);
    }
    .art-app__link:active { background: var(--tint); transform: scale(.985); }
    /* The dot the app's strand ends in, just outside the card. */
    .art-app__dot {
        position: absolute;
        left: -14px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0;
        box-shadow: 0 0 0 3px var(--bg);
    }
    .art-app__icon {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: var(--tone);
        color: var(--on-contrast);
    }
    .art-app__icon svg { width: 20px; height: 20px; }
    .art-app__text { flex: 1; min-width: 0; }
    .art-app__name { font-size: 1rem; padding-bottom: 0; }
    .art-app__desc { display: none; }
    /* The main app's card: a purple edge, a larger name, the label beside it
       (under it where the card is narrow). */
    .art-app--top .art-app__link {
        min-height: 72px;
        border-color: var(--art-violet);
        box-shadow: 0 0 0 1px var(--art-violet);
    }
    .art-app--top .art-app__name { font-size: 1.125rem; }
    .art-app--top .art-app__dot { width: 8px; height: 8px; margin: -4px 0 0; }
    .art-app__head { gap: 3px 8px; }
    .art-app__badge { min-height: 20px; padding: 0 8px 0 6px; font-size: .6875rem; }
    .art-app__badge svg { width: 10px; height: 10px; }
    /* One line where it fits, two on a narrow phone, never cut. */
    .art-app__short {
        display: block;
        margin-top: 2px;
        font-size: .75rem;
        line-height: 1.35;
        color: var(--ink-soft);
        overflow-wrap: anywhere;
    }
    .art-app__chip {
        display: inline-flex;
        flex: none;
        min-height: 24px;
        padding: 0 9px;
        font-size: .6875rem;
        background: var(--card);
        color: var(--purple-ink);
    }
    .art-app__link:is(:hover, :focus-visible) .art-app__name { background-size: 0% 1.5px; }
    .art-app__link:is(:hover, :focus-visible) .art-app__dot { transform: none; }
    .art-apps__cta { display: block; margin: 22px 0 0; }
    .art-apps__cta .yu-btn { width: 100%; justify-content: center; min-height: 54px; }
    .art-apps__also { margin: 16px 0 0 clamp(62px, 19vw, 100px); }

    /* The mark: the picture itself in the one tinted card, no pinned scroll. */
    .art-mark { height: auto; }
    .art-mark__stick { position: relative; height: auto; padding: 40px 0 8px; }
    .art-mark__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        width: auto;
        margin-inline: var(--yu-gutter);
        padding: 28px 22px 30px;
        background: var(--yu-surface-accent);
        border: 1px solid var(--line-card);
        border-radius: var(--r-lg);
    }
    .art-mark__slot { grid-row: 1; justify-self: start; width: 84px; }
    .art-mark__still { visibility: visible; }
    .art-mark__copy { grid-row: 2; }
    .art-mark .art-title, .art-plans .art-title { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.6rem); }
    .art-body { margin-top: 16px; font-size: 1rem; }

    .art-plans.pp { padding-block: 48px 40px; }
    .art-plans .pp-terms-wrap { margin-top: 28px; }
    .art-plans__more { margin-top: 18px; }
}

@media (scripting: enabled) and (max-width: 760px) {
    .art-app { transform: none; }
    .art-mark .art-mark__still { visibility: visible; }
}