/* ==========================================================================
   The landing page at / only. Loaded by templates/home.html through the base
   template's head_extra block; every rule is scoped under .hm or .hm-main.

   This page is a CATALOGUE and the two long-form product pages are not, so
   nothing here is shared with edgar.css or uspto.css even where it rhymes.
   Three differences are structural rather than decorative:

   * ONE ground for the whole page. Both product pages hard-cut between two
     authored grounds because each of them is one argument in chapters. A
     catalogue is one room, so the ground is continuous and the objects are
     what change. Under prefers-color-scheme: dark the room is a dark room,
     authored here rather than inherited, so the plates sit on the same
     slate their own linen was shot on.
   * The chrome is at the BOTTOM edge, horizontal, and it carries prices.
     /products/uspto-bundle has a vertical folio in the left margin; a case
     rail along the foot of the room is a different instrument for a
     different job, since a storefront's index has to say what things cost.
   * The label schema is fixed. Reads, Answers, Will not, Terms, in that
     order, at the same type sizes, for every object. Comparing three
     products by reading straight down is the whole point of the page, and
     it only works if the schema never varies.
   ========================================================================== */

main.hm-main {
    max-width: none;
    padding: 0;
}

/* style.css gives the footer 64px of air above it, which is right on a page
   that ends in a text column and wrong on one that ends in a full-bleed
   ground: the gap renders as a bar of body background between the room and
   the footer. The footer is main's next sibling, so this is scoped to this
   page without touching the shared rule. */
main.hm-main + .site-footer { margin-top: 0; }

.hm {
    --hm-canvas: #f4f3ee;
    --hm-surface: #e9e8e0;
    --hm-ink: #16181d;
    --hm-soft: #565f59;
    --hm-accent: #1f4d3d;
    --hm-accent-ink: #fbfdfb;
    --hm-line: rgba(20, 24, 26, 0.15);
    /* The linen the plates were shot on. It is the only dark value in light
       mode, and it is where the bench band and the rail live, so the
       photographs sit on their own ground rather than on cut-out white. */
    --hm-slate: #2b3138;
    --hm-slate-ink: #e8eaea;

    --hm-measure: 60ch;
    --hm-gutter: clamp(20px, 5vw, 60px);
    --hm-section: clamp(64px, 9vh, 116px);
    --hm-ease: cubic-bezier(0.23, 1, 0.32, 1);

    background: var(--hm-canvas);
    color: var(--hm-ink);
    font-size: 1rem;
    line-height: 1.6;
    /* Room for the case rail, which is fixed over the foot of the page. */
    padding-bottom: 0;
}

@media (prefers-color-scheme: dark) {
    .hm {
        --hm-canvas: #181c20;
        --hm-surface: #212730;
        --hm-ink: #eceef0;
        --hm-soft: #a2aaa6;
        --hm-accent: #7fd4a0;
        --hm-accent-ink: #10201a;
        --hm-line: rgba(236, 238, 240, 0.16);
        --hm-slate: #22272d;
        --hm-slate-ink: #e8eaea;
    }
}

.hm-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--hm-gutter);
}

/* ---- Type ------------------------------------------------------------ */

.hm-eyebrow {
    font-family: var(--font-display);
    font-size: 0.76rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hm-soft);
    margin: 0 0 18px;
}

/* The room label runs the full measure rather than a column of it: a wall
   text is wide and short, and every pixel it does not use is a pixel between
   the visitor and object one. */
.hm-room__head { display: grid; gap: 0 clamp(28px, 5vw, 72px); }

/* On a narrow screen the action simply follows the standfirst, which is where
   it sits in the DOM. */
.hm-room__enter { margin: 24px 0 0; }

@media (min-width: 900px) {
    .hm-room__head {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }

    /* The eyebrow keeps to the first column so the action can take the second
       half of the same row. It is a short label either way, so nothing about
       the wall text changes. */
    .hm-room__head .hm-eyebrow { grid-column: 1; }
    .hm-room__sub { margin-top: 8px; align-self: end; }

    /* The action stands in the space the headline leaves open at the top
       right, in the eyebrow's row rather than the standfirst's, so it can
       never crowd a standfirst that has run long. Placed explicitly because it
       is last in the DOM, which is where it belongs on a phone. */
    .hm-room__enter {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        margin: 0;
    }
}

.hm-enter {
    display: inline-block;
    padding: 9px 20px;
    border: 1px solid var(--hm-accent);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--hm-accent);
    text-decoration: none;
    transition: background-color 140ms var(--hm-ease), color 140ms var(--hm-ease);
}

.hm-enter:hover {
    background: var(--hm-accent);
    color: var(--hm-accent-ink);
}

.hm-room__text {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.1vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.006em;
    font-weight: 600;
    max-width: 26ch;
    text-wrap: balance;
    margin: 0;
    color: var(--hm-ink);
}

.hm-room__sub {
    max-width: var(--hm-measure);
    color: var(--hm-soft);
    margin: 20px 0 0;
    text-wrap: pretty;
}

.hm-link {
    color: var(--hm-accent);
    font-weight: 600;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hm-link:hover { text-decoration-thickness: 2px; }
.hm-link--strong { font-size: 1.05rem; }

.hm a:focus-visible,
.hm input:focus-visible + label,
.hm [tabindex]:focus-visible {
    outline: 2px solid var(--hm-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- The room and the bench band ------------------------------------- */

.hm-room {
    padding: clamp(40px, 7vh, 84px) 0 0;
}

.hm-bench {
    margin: clamp(30px, 5vh, 56px) 0 0;
    /* No ground of its own: the slate belongs to the clip, and the caption
       under it belongs to the room, the way a plate caption sits on the page
       rather than on the picture. */
}

.hm-bench__media {
    display: block;
    width: 100%;
    height: clamp(190px, 32vh, 360px);
    object-fit: cover;
    /* The clip and its poster are the same frame at the same size, so the
       band never changes height between poster and playback. */
    background: var(--hm-slate);
}

.hm-bench__cap {
    font-family: var(--font-display);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--hm-soft);
    /* .hm-wrap sets the measure and the gutters here; a second max-width on
       the same box would centre it in the room instead of setting it at the
       margin where a plate caption belongs. */
    padding-top: 12px;
    padding-bottom: 4px;
}

.hm-bench__cap span { display: block; max-width: 58ch; }

/* The rights note is a second line of the same caption, set one step quieter
   so it reads as the fine print under the list rather than as more of it. */
.hm-bench__rights {
    margin-top: 8px;
    font-size: 0.98em;
    opacity: 0.85;
}

/* ---- Objects --------------------------------------------------------- */

.hm-obj {
    padding: var(--hm-section) 0 0;
}

.hm-obj__spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: start;
}

.hm-obj--mirror .hm-plate { order: 2; }

.hm-plate {
    margin: 0;
    background: var(--hm-slate);
    border-radius: 4px;
    overflow: hidden;
}

.hm-plate img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1376 / 768;
}

/* The wipe. A catalogue object is uncovered, not faded up. */
.hm--js [data-hm-reveal] img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 760ms var(--hm-ease);
}

.hm--js [data-hm-reveal].is-in img { clip-path: inset(0 0 0 0); }

.hm--js [data-hm-parallax] img {
    transform: translate3d(0, var(--hm-par, 0px), 0) scale(1.06);
    will-change: transform;
}

/* ---- The label schema ------------------------------------------------ */

.hm-label__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hm-line);
}

.hm-label__num {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    color: var(--hm-soft);
}

.hm-label__name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 600;
    line-height: 1.15;
}

.hm-spec {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 3px 18px;
    margin: 0;
}

.hm-spec dt {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hm-soft);
    padding-top: 5px;
}

.hm-spec dd {
    margin: 0 0 14px;
    font-size: 0.97rem;
    line-height: 1.6;
    text-wrap: pretty;
}

.hm-spec__terms {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

.hm-further {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hm-line);
    font-size: 0.95rem;
}

.hm-further--wide { border-top: 0; padding-top: 0; margin-top: 26px; }

/* ---- The rail of five ------------------------------------------------ */

.hm-rail {
    margin-top: clamp(28px, 4vh, 52px);
    background: var(--hm-slate);
    color: var(--hm-slate-ink);
}

.hm-rail__stage {
    padding: clamp(26px, 4vh, 44px) 0;
}

.hm-rail__head {
    font-family: var(--font-display);
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 234, 234, 0.62);
    margin: 0 0 20px;
    padding: 0 var(--hm-gutter);
}

/* Default, and the phone: a drawer you pull sideways yourself. */
.hm-rail__track {
    list-style: none;
    display: flex;
    gap: clamp(14px, 2vw, 26px);
    margin: 0;
    padding: 0 var(--hm-gutter) 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.hm-rail__item {
    flex: 0 0 min(78vw, 340px);
    scroll-snap-align: center;
    padding: 20px 22px 24px;
    border: 1px solid rgba(232, 234, 234, 0.16);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
}

.hm-rail__num {
    font-family: var(--font-display);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    color: rgba(232, 234, 234, 0.55);
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
}

.hm-rail__name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    margin: 0 0 10px;
}

.hm-rail__line {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.6;
    color: rgba(232, 234, 234, 0.78);
}

/* The scroll-driven version. Only where there is room to travel and only
   when the script is running: a transform nobody is driving would leave the
   last two instruments off the side of the page forever. */
/* The travel is one to one with the scroll: the script sets this height to
   the stage's plus however far the row actually has to move, so a pixel of
   wheel is a pixel of pan and the rail never feels like dead scroll. The
   declared height is only what stands until it measures. The stage holds
   under the sticky site header and fills the viewport below it. */
.hm--pan .hm-rail { position: relative; height: 200vh; }

.hm--pan .hm-rail__stage {
    position: sticky;
    top: var(--site-header-h);
    height: calc(100vh - var(--site-header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.hm--pan .hm-rail__track {
    overflow: visible;
    padding-bottom: 0;
    transform: translate3d(var(--hm-x, 0px), 0, 0);
    will-change: transform;
}

.hm--pan .hm-rail__item {
    flex-basis: 380px;
    min-height: 300px;
}

/* The tier colours on the drawer: three site tokens, no new palette. The
   free tier takes the accent, Research the pale accent surface, Full the
   slate ink; each item carries its colour on its left edge and its number. */
.hm-rail {
    --hm-tier-free: var(--hm-accent);
    /* John, 10 October 2026: research and full both read as white on the
       slate. Research takes the site's gold (the warning border tone, the
       only warm token in the palette) and full keeps the slate ink, so the
       three tiers are green, gold and white on both grounds. */
    --hm-tier-research: var(--color-warning-border);
    --hm-tier-full: var(--hm-slate-ink);
}

@media (prefers-color-scheme: dark) {
    .hm-rail { --hm-tier-free: var(--hm-accent); }
}

.hm-rail__item[data-hm-tier="free"] { border-left: 3px solid var(--hm-tier-free); }
.hm-rail__item[data-hm-tier="research"] { border-left: 3px solid var(--hm-tier-research); }
.hm-rail__item[data-hm-tier="full"] { border-left: 3px solid var(--hm-tier-full); }
.hm-rail__item[data-hm-tier="free"] .hm-rail__num { color: var(--hm-tier-free); }
.hm-rail__item[data-hm-tier="research"] .hm-rail__num { color: var(--hm-tier-research); }
.hm-rail__item[data-hm-tier="full"] .hm-rail__num { color: var(--hm-tier-full); }

/* On the light slate the dark accent reads too low for small type: the
   free tier's number takes the pale accent for its text and keeps the
   accent on its edge. */
.hm-rail__item[data-hm-tier="free"] .hm-rail__num { color: var(--color-accent-soft); }

/* In the dark scheme --color-accent-soft is itself dark, so the free
   number takes the pale accent there (the same token its edge carries). */
@media (prefers-color-scheme: dark) {
    .hm-rail__item[data-hm-tier="free"] .hm-rail__num { color: var(--hm-tier-free); }
}

.hm-rail__tier {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.74rem;
    margin-left: 8px;
    opacity: 0.9;
}

.hm-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: -8px 0 18px;
    padding: 0 var(--hm-gutter);
    font-size: 0.86rem;
    color: rgba(232, 234, 234, 0.82);
}

.hm-legend__item { display: inline-flex; align-items: center; gap: 8px; }

.hm-legend__swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.hm-legend__item[data-hm-tier="free"] .hm-legend__swatch { background: var(--hm-tier-free); outline: 1px solid var(--color-accent-soft); }
.hm-legend__item[data-hm-tier="research"] .hm-legend__swatch { background: var(--hm-tier-research); }
.hm-legend__item[data-hm-tier="full"] .hm-legend__swatch { background: var(--hm-tier-full); }

.hm-suite .hm-rail { margin-top: 0; }

/* ---- The enquiry board ----------------------------------------------- */

.hm-board {
    padding: calc(var(--hm-section) * 1.25) 0 0;
}

.hm-board__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 600;
    line-height: 1.12;
    margin: 0;
}

.hm-board__sub {
    max-width: var(--hm-measure);
    color: var(--hm-soft);
    margin: 16px 0 0;
}

.hm-board__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
    margin: clamp(28px, 4vh, 48px) 0 0;
}

/* The thread. Drawn between two measured points, so it is the one thing on
   the page that has to be recomputed on resize. */
.hm-thread {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: none;
}

.hm--js .hm-thread { display: block; }

.hm-thread path {
    stroke: var(--hm-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: var(--hm-len, 0) var(--hm-len, 0);
    stroke-dashoffset: var(--hm-len, 0);
    transition: stroke-dashoffset 620ms var(--hm-ease);
}

.hm-thread.is-drawn path { stroke-dashoffset: 0; }

.hm-thread circle {
    fill: var(--hm-accent);
    opacity: 0;
    transition: opacity 320ms var(--hm-ease);
}

.hm-thread.is-drawn circle { opacity: 1; }

.hm-asks {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.hm-asks__legend {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hm-soft);
    padding: 0;
    margin-bottom: 10px;
}

.hm-ask {
    position: relative;
    border-top: 1px solid var(--hm-line);
    padding: 12px 0;
}

.hm-ask input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.hm-ask label {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--hm-soft);
    transition: color 200ms var(--hm-ease);
}

.hm-ask label::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: 6px;
    border: 1px solid var(--hm-soft);
    border-radius: 50%;
    transition: background-color 200ms var(--hm-ease),
                border-color 200ms var(--hm-ease);
}

.hm-ask:hover label { color: var(--hm-ink); }

.hm-ask input:checked + label {
    color: var(--hm-ink);
    font-family: var(--font-display);
    font-size: 1.08rem;
}

.hm-ask input:checked + label::before {
    background: var(--hm-accent);
    border-color: var(--hm-accent);
}

/* With no script every answer is printed under its own question, which is
   the same routing information as a table. The script hides them because it
   moves the answer onto the board instead. */
.hm-ask__detail {
    margin: 8px 0 0 28px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--hm-soft);
    max-width: 52ch;
}

.hm--js .hm-ask__detail { display: none; }

.hm-slips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.hm-slip {
    padding: 16px 18px;
    border: 1px solid var(--hm-line);
    border-radius: 4px;
    background: var(--hm-surface);
    transition: opacity 260ms var(--hm-ease),
                border-color 260ms var(--hm-ease),
                transform 380ms var(--hm-ease);
}

.hm--js .hm-slip[data-hm-state="aside"] { opacity: 0.58; }

.hm--js .hm-slip[data-hm-state="answers"] {
    border-color: var(--hm-accent);
    /* A specimen brought forward on the board, not a card that grew. */
    transform: translateX(-10px);
}

.hm-slip__num {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--hm-soft);
    margin: 0 0 6px;
}

.hm-slip__name {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.hm-slip__state {
    margin: 0 0 8px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--hm-soft);
    min-height: 1.4em;
}

.hm-slip[data-hm-state="answers"] .hm-slip__state { color: var(--hm-ink); }

.hm-slip__terms {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    color: var(--hm-soft);
    margin: 0 0 8px;
}

/* ---- The inquiry plate ----------------------------------------------- */

.hm-terms {
    padding: calc(var(--hm-section) * 1.1) 0 clamp(90px, 12vh, 150px);
}

.hm-terms__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 600;
    margin: 0 0 26px;
}

.hm-terms__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hm-line);
}

.hm-terms__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 8rem minmax(0, 1.3fr);
    gap: 6px 24px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--hm-line);
}

.hm-terms__name {
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.hm-terms__price {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    color: var(--hm-accent);
}

.hm-terms__note {
    font-size: 0.92rem;
    color: var(--hm-soft);
}

.hm-terms__ask {
    max-width: var(--hm-measure);
    color: var(--hm-soft);
    font-size: 0.95rem;
    margin: 26px 0 0;
}

/* ---- The case rail: the index of objects ----------------------------- */

.hm-cases {
    display: none;
}

.hm--js .hm-cases {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background: var(--hm-slate);
    color: var(--hm-slate-ink);
    border-top: 1px solid rgba(232, 234, 234, 0.14);
    transform: translateY(101%);
    transition: transform 420ms var(--hm-ease);
}

.hm--js .hm-cases.is-up { transform: none; }

.hm-cases__list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0 max(8px, calc((100vw - 1120px) / 2));
    overflow-x: auto;
    scrollbar-width: none;
}

.hm-cases__list::-webkit-scrollbar { display: none; }

.hm-cases a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 11px 14px;
    text-decoration: none;
    color: rgba(232, 234, 234, 0.62);
    white-space: nowrap;
    font-size: 0.86rem;
    border-bottom: 2px solid transparent;
    transition: color 200ms var(--hm-ease), border-color 200ms var(--hm-ease);
}

.hm-cases a:hover { color: var(--hm-slate-ink); }

.hm-cases li.is-current a {
    color: var(--hm-slate-ink);
    border-bottom-color: var(--hm-accent);
}

.hm-cases__num {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(232, 234, 234, 0.5);
}

.hm-cases__name { font-family: var(--font-display); }

.hm-cases__term {
    font-variant-numeric: tabular-nums;
    color: rgba(232, 234, 234, 0.5);
    font-size: 0.8rem;
}

/* ---- Responsive ------------------------------------------------------ */

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

    .hm-obj--mirror .hm-plate { order: 0; }

    .hm-spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hm-spec dt { padding-top: 10px; }
    .hm-spec dd { margin-bottom: 12px; }

    .hm-terms__row { grid-template-columns: minmax(0, 1fr); }
    .hm-terms__price { font-size: 1.05rem; }

    /* The board's thread is drawn between a column of questions and a column
       of slips. Stacked, the geometry still resolves, and the slips keep
       their order, so the thread stays honest on a phone. */
    .hm-slips { gap: 10px; }
    .hm--js .hm-slip[data-hm-state="answers"] { transform: none; }

    .hm-cases__term { display: none; }

    /* Stacked, the thread would run from a question, back across the other
       questions, and down to a slip. That is a line through the reading, not
       a thread on a board, so below this width the slip's own state carries
       the answer and the thread is not drawn at all. */
    .hm--js .hm-thread { display: none; }
}

/* ---- Reduced motion: the page keeps every state, loses every travel ---- */

@media (prefers-reduced-motion: reduce) {
    .hm--js [data-hm-reveal] img { clip-path: none !important; transition: none; }
    .hm--js [data-hm-parallax] img { transform: none !important; }
    .hm-thread path { transition: none; stroke-dashoffset: 0 !important; }

    .hm * {
        animation-duration: 0.01ms !important;
        transition-duration: 140ms !important;
    }
}