/* ============================================================
   Resource hub: where a parent chooses a path.

   litPath.css (generated from the homepage) supplies the tokens, the two
   typefaces, the `.btn`, the focus ring, the `.rv` reveals and the runtime
   `.dither` figures. This sheet adds only what the hub needs: the hero with
   the torch, the gold thread with its nine stops, the two picture interludes
   and the closing card. Everything is scoped to `.lp.rh`.

   Held to social-ops/content/seo-visual-brief.md: near-white paper, warm
   cards, Newsreader 500 headings with one italic teal em, Geist text, Geist
   Mono for the counts only, no kickers, no uppercase tracked labels, no dark
   surfaces, one primary teal button. Composed at 375 first.
   ============================================================ */

.lp.rh {
    --rh-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --rh-p: 0;
    background: var(--paper);
    overflow-x: clip;
}

.rh-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.lp.rh p {
    margin: 0;
}

.lp.rh a {
    text-decoration: none;
}

.lp.rh h1 em,
.lp.rh h2 em {
    display: block;
}

/* Geist Mono is for the counts and the stop numbers only: sentence case, no tracking. */
.rh-mono {
    font: 500 13px/1.4 var(--rh-mono);
    letter-spacing: 0;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.rh-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--muted);
}

.rh-note svg {
    width: 16px;
    height: 16px;
    color: var(--brand);
    flex: none;
}

/* ---------- hero: the torch, the way the homepage holds it ---------- */

.rh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50vw 0 44px;
    border-bottom: 1px solid var(--hair);
}

.rh-hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.lp.rh .rh-hero__torch {
    position: absolute;
    top: -2%;
    right: -12%;
    width: 84vw;
    max-width: 460px;
    height: auto;
    image-rendering: pixelated;
    mix-blend-mode: multiply;
    transform: translate3d(0, calc(var(--rh-p) * -26px), 0) scale(calc(1 + var(--rh-p) * .04));
    transform-origin: 50% 20%;
    transition: transform .12s linear;
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 52% 38%, #000 40%, transparent 92%);
    mask-image: radial-gradient(ellipse 60% 62% at 52% 38%, #000 40%, transparent 92%);
    animation: fade 1.1s var(--ease) both;
}

.rh-hero__ember {
    position: absolute;
    top: -8vw;
    right: 6vw;
    width: 42vw;
    max-width: 320px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 198, 76, .46) 0%, rgba(227, 156, 34, .16) 40%, transparent 68%);
    animation: ember 5.5s ease-in-out infinite;
}

.lp.rh .rh-hero__vine {
    display: none;
}

.rh-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 24%, rgba(253, 251, 247, .35) 36%, rgba(253, 251, 247, .9) 48%, var(--paper) 60%, var(--paper) 100%);
}

.rh-hero__copy {
    position: relative;
}

.rh-hero__copy > * {
    max-width: 700px;
}

.lp.rh .rh-hero h1 {
    font-size: clamp(40px, 5.8vw, 76px);
    line-height: 1;
    animation: rise .9s var(--ease) both;
}

.lp.rh .rh-hero .lede {
    margin-top: 22px;
    animation: fade .9s var(--ease) .18s both;
}

.rh-byline {
    margin-top: 14px;
    font-size: 14px;
    color: var(--muted);
    animation: fade .9s var(--ease) .26s both;
}

.lp.rh .rh-byline a {
    color: var(--brand-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.lp.rh .rh-byline a:hover {
    color: var(--ink);
}

.rh-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-top: 28px;
    animation: pop .9s var(--ease) .34s both;
}

/* ---------- the path: a gold thread with nine stops ---------- */

.rh-path {
    padding-top: 12px;
}

.rh-stop {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    -moz-column-gap: 14px;
         column-gap: 14px;
    padding: 34px 0 30px;
}

/* The thread runs the stop's full height; the node sits on it at the heading. */
.rh-stop::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--gold-2), var(--gold));
    opacity: .55;
}

.rh-path > :first-child .rh-stop::before {
    top: 46px;
}

.rh-path > :last-child .rh-stop::before {
    bottom: auto;
    height: 46px;
}

.rh-stop__node {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 22px;
    height: 22px;
    margin-top: 12px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 5px var(--paper);
}

.rh-stop__node::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--gold-2);
    transform: scale(.6);
    transition: transform .5s var(--ease);
}

.rh-stop:hover .rh-stop__node::after,
.rh-stop:focus-within .rh-stop__node::after {
    transform: scale(1);
}

.rh-stop__copy {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin-top: 22px;
}

.rh-stop__meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.rh-stop__meta .rh-mono:first-child {
    color: var(--gold-ink);
}

.lp.rh .rh-stop h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.06;
}

.rh-stop__text {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 34em;
}

/* the picture: a crop of the garden engravings, resolving as the stop scrolls in */
.lp.rh .rh-stop__art {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    border-radius: 22px;
    border: 1px solid var(--hair);
    box-shadow: 0 40px 70px -50px rgba(18, 32, 27, .5);
    /* opacity stays in the list so the `.rv` reveal still fades the figure in */
    transition: opacity .8s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}

.lp.rh .rh-stop__art .dither {
    aspect-ratio: 16 / 10;
    border-radius: inherit;
}

.lp.rh .rh-stop__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(253, 251, 247, .55) 0%, transparent 42%);
    pointer-events: none;
}

.rh-stop:hover .rh-stop__art {
    transform: translateY(-4px);
    box-shadow: 0 52px 80px -52px rgba(18, 32, 27, .55);
}

.rh-stop__examples {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.lp.rh .rh-stop__examples a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--hair);
    color: var(--ink);
    font: 600 15px/1.4 var(--sans);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}

.lp.rh .rh-stop__examples a svg {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 3px;
    color: var(--brand-2);
    transition: transform .35s var(--ease);
}

.lp.rh .rh-stop__examples a:hover {
    transform: translateY(-2px);
    border-color: var(--brand-tint-2);
    box-shadow: 0 22px 36px -30px rgba(18, 32, 27, .45);
}

.lp.rh .rh-stop__examples a:hover svg {
    transform: translateX(3px);
}

.lp.rh .rh-stop__all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 14px;
    color: var(--brand-2);
    font: 700 15px/1 var(--sans);
}

.lp.rh .rh-stop__all svg {
    width: 16px;
    height: 16px;
    transition: transform .35s var(--ease);
}

.lp.rh .rh-stop__all:hover {
    color: var(--ink);
}

.lp.rh .rh-stop__all:hover svg {
    transform: translateX(3px);
}

/* the goal bank opens on its skill areas, since it has no hub page of its own */
.rh-stop__skills {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lp.rh .rh-stop__skills a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--hair-2);
    color: var(--ink-2);
    font: 600 14px/1 var(--sans);
    transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}

.lp.rh .rh-stop__skills a:hover {
    background: var(--brand-tint);
    border-color: var(--brand-tint-2);
    color: var(--brand-2);
    transform: translateY(-1px);
}

/* ---------- interludes: the garden at low opacity, one line over it ---------- */

.rh-inter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 26px 0;
    padding: clamp(84px, 14vh, 150px) 0;
}

.rh-inter__art {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.lp.rh .rh-inter__art .dither {
    position: absolute;
    inset: 0;
    background: var(--paper);
}

.lp.rh .rh-inter__art .dither img,
.lp.rh .rh-inter__art .dither canvas {
    opacity: .5;
}

.lp.rh .rh-inter__art .dither img {
    opacity: clamp(0, calc((var(--dp) - .25) * .9), .5);
}

.rh-inter__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--paper) 0%, rgba(253, 251, 247, .2) 30%, rgba(253, 251, 247, .2) 70%, var(--paper) 100%);
}

.rh-inter__copy {
    position: relative;
    max-width: 640px;
    padding: 18px 0;
    background: radial-gradient(ellipse at center, rgba(253, 251, 247, .96) 0%, rgba(253, 251, 247, .8) 55%, transparent 100%);
}

.lp.rh .rh-inter h2 {
    font-size: clamp(32px, 4vw, 52px);
}

.lp.rh .rh-inter .lede {
    margin-top: 16px;
}

.lp.rh .rh-inter__vine {
    position: absolute;
    right: -30%;
    top: -6%;
    height: 118%;
    width: auto;
    opacity: .34;
    transform-origin: 50% 0;
    animation: rh-sway 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rh-sway {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2deg); }
}

/* ---------- closing: the torch again, and the review ---------- */

.rh-final {
    margin-top: 40px;
}

.rh-final__card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--hair);
    background: var(--card);
    padding: 34px 22px 30px;
}

.lp.rh .rh-final__torch {
    position: absolute;
    right: -14%;
    top: -4%;
    width: 64%;
    max-width: 420px;
    height: auto;
    z-index: -1;
    image-rendering: pixelated;
    mix-blend-mode: multiply;
    opacity: .9;
    -webkit-mask-image: radial-gradient(ellipse 60% 62% at 54% 44%, #000 36%, transparent 90%);
    mask-image: radial-gradient(ellipse 60% 62% at 54% 44%, #000 36%, transparent 90%);
}

.rh-final__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(247, 242, 232, 0) 0%, rgba(247, 242, 232, .7) 30%, var(--card) 55%);
}

.rh-final__copy {
    position: relative;
    padding-top: 26vw;
}

.rh-final__copy > * {
    max-width: 560px;
}

.lp.rh .rh-final h2 {
    font-size: clamp(30px, 3.6vw, 48px);
}

.lp.rh .rh-final .lede {
    margin: 18px 0 26px;
    font-size: 17px;
}

.rh-final .rh-note {
    margin-top: 16px;
}

/* ---------- wide screens ---------- */

@media (min-width: 720px) {
    .rh-shell {
        width: min(1120px, calc(100% - 48px));
    }

    .rh-hero {
        display: grid;
        align-items: center;
        min-height: min(80vh, 760px);
        padding: clamp(64px, 9vh, 120px) 0 clamp(56px, 8vh, 96px);
    }

    .lp.rh .rh-hero__torch {
        top: auto;
        bottom: -8%;
        right: max(-40px, calc((100% - 1120px) / 2 - 40px));
        width: 46vw;
        max-width: 600px;
        -webkit-mask-image: radial-gradient(ellipse 58% 64% at 52% 48%, #000 42%, transparent 94%);
        mask-image: radial-gradient(ellipse 58% 64% at 52% 48%, #000 42%, transparent 94%);
    }

    .rh-hero__ember {
        top: 6%;
        right: 18%;
        width: 22vw;
    }

    .lp.rh .rh-hero__vine {
        display: block;
        position: absolute;
        left: -9%;
        bottom: -30%;
        height: 96%;
        width: auto;
        opacity: .22;
        transform: rotate(168deg);
        transform-origin: 50% 50%;
    }

    .rh-hero__veil {
        background: linear-gradient(100deg, var(--paper) 30%, rgba(253, 251, 247, .96) 46%, rgba(253, 251, 247, .5) 62%, rgba(253, 251, 247, 0) 80%), linear-gradient(to bottom, rgba(253, 251, 247, .3) 0%, transparent 25%, transparent 80%, var(--paper) 100%);
    }

    .rh-hero__copy > * {
        max-width: 620px;
    }

    .rh-stop {
        grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr);
        -moz-column-gap: clamp(24px, 4vw, 56px);
             column-gap: clamp(24px, 4vw, 56px);
        align-items: center;
        padding: 46px 0;
    }

    .rh-stop::before {
        left: 31px;
    }

    .rh-path > :first-child .rh-stop::before {
        top: 50%;
    }

    .rh-path > :last-child .rh-stop::before {
        height: 50%;
    }

    .rh-stop__node {
        justify-self: center;
        align-self: center;
        margin-top: 0;
        grid-row: 1;
    }

    .rh-stop__copy {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
    }

    .lp.rh .rh-stop__art {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        border-radius: 26px;
    }

    .lp.rh .rh-stop__art .dither {
        aspect-ratio: 5 / 4;
    }

    /* the path zigzags: every other stop keeps its picture on the far side */
    .rh-stop[data-side='right'] .rh-stop__copy {
        grid-column: 2;
    }

    .rh-stop[data-side='right'] .rh-stop__art {
        grid-column: 3;
    }

    .rh-stop__examples {
        gap: 12px;
    }

    .rh-inter {
        margin: 36px 0;
    }

    .rh-inter__copy {
        padding: 22px 0;
    }

    .rh-final__card {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        min-height: 440px;
        align-items: center;
        padding: clamp(40px, 5vw, 72px);
    }

    .lp.rh .rh-final__torch {
        right: -4%;
        top: 50%;
        transform: translateY(-50%);
        width: 42%;
        max-width: 520px;
        -webkit-mask-image: radial-gradient(ellipse 60% 66% at 52% 50%, #000 40%, transparent 92%);
        mask-image: radial-gradient(ellipse 60% 66% at 52% 50%, #000 40%, transparent 92%);
    }

    .rh-final__veil {
        background: linear-gradient(100deg, var(--card) 40%, rgba(247, 242, 232, .9) 55%, rgba(247, 242, 232, .2) 75%, rgba(247, 242, 232, 0) 100%);
    }

    .rh-final__copy {
        padding-top: 0;
    }
}

@media (min-width: 1100px) {
    .lp.rh .rh-hero__torch {
        width: 40vw;
    }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .lp.rh .rh-hero__torch,
    .lp.rh .rh-hero h1,
    .lp.rh .rh-hero .lede,
    .rh-byline,
    .rh-hero__cta,
    .rh-hero__ember,
    .lp.rh .rh-inter__vine {
        animation: none;
        transform: none;
        opacity: 1;
    }

    .rh-hero__ember {
        opacity: .8;
    }

    .lp.rh .rh-inter__vine {
        opacity: .34;
    }

    .lp.rh .rh-stop__art,
    .lp.rh .rh-stop__examples a,
    .lp.rh .rh-stop__skills a,
    .rh-stop__node::after {
        transition: none;
    }
}