/* Hallmark · component: card-group (4) · genre: editorial
 * theme: studied-DNA ×4 · sources: Gregs9/garnet · movie_suggester · Wishlist · accountancy
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * states: default · hover · focus-visible · active (a link holds 4 of the 8)
 * contrast: pass (40-41) · 30/30 text pairs measured, lowest 5.17:1 against a 4.5 floor
 * mobile: pass (34, 49, 50-57) · scrollWidth == clientWidth at 320/375/414/768
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30)
 * known deviation, gate 37: six font families, not three. Four locked design
 * systems cannot share a 2+1 stack. Each card holds to 2+1 on its own, which
 * is the right unit here: the page is four exhibits, not one system.
 *
 * The four cards deliberately do NOT share an internal structure. Each one is
 * shaped like the thing it links to: Garnet is a poster tile, Movie list is a
 * printed register, Wishlist is a desktop window, Accountancy is a ledger.
 * Recolouring one shared card four times is what made the previous pass read
 * as generated. Keep them different.
 *
 * darkMode.js recolours h1/h2/p/ul/ol/li/label via inline jQuery styles, so
 * nothing inside a card uses those tags. h3, div and span only.
 */

@import url('tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=IBM+Plex+Sans:wght@400;500&family=Inter+Tight:wght@400;600;800&family=Newsreader:opsz,wght@6..72,400;6..72,600&family=Silkscreen&display=swap');

html { overflow-x: clip; }
body { overflow-x: clip; }

.wrapper {
    margin-top: 12% !important;
}

.hp-page {
    padding: 0 var(--space-xl);
}

/* Four equal tracks, all cards the same height. The variety lives in what
   happens inside each card, not in the footprint. */
.hp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
    margin-top: var(--space-xl);
}

.hp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--dur-micro) var(--ease-out);
}

/* Press feedback, the one thing all four share. Everything else differs. */
.hp-card:active { transform: translateY(1px); }

.hp-card:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.hp-card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-style: normal;
    line-height: 1.15;
    overflow-wrap: anywhere;
    min-width: 0;
}

.hp-card__desc {
    font-size: var(--text-sm);
    line-height: 1.65;
}

.hp-card__go {
    display: inline-block;
    align-self: flex-start;
    white-space: nowrap;
}


/* ==================================================================== */
/* The Garnet · a poster tile                                           */
/* Bottom-weighted. The mark bleeds off the top corner instead of        */
/* sitting centred in an icon well. No eyebrow, no stripe, no glow.      */
/* ==================================================================== */

.hp-card--garnet {
    min-height: 21rem;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    font-family: var(--font-garnet);
    background-color: var(--gar-field);
    background-image:
        linear-gradient(to top, var(--gar-field) 42%, transparent 100%),
        radial-gradient(120% 80% at 78% 6%, var(--gar-field-2) 0%, var(--gar-field) 62%);
    border: 1px solid var(--gar-rule);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hp-card--garnet .hp-card__logo {
    position: absolute;
    top: -2.25rem;
    right: -2.75rem;
    width: 13rem;
    height: auto;
    opacity: 0.34;
    pointer-events: none;
    transition: opacity var(--dur-short) var(--ease-out);
}

.hp-card--garnet .hp-card__title {
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gar-ink);
}

.hp-card--garnet .hp-card__desc {
    margin-top: var(--space-sm);
    color: var(--gar-muted);
}

.hp-card--garnet .hp-card__go {
    margin-top: var(--space-lg);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gar-link);
    border-bottom: 1px solid var(--gar-accent);
    padding-bottom: var(--space-3xs);
}

/* One signal: the mark comes up out of the dark. No lift, no halo. */
.hp-card--garnet:hover .hp-card__logo { opacity: 0.62; }
.hp-card--garnet:focus-visible { outline-color: var(--gar-link); }


/* ==================================================================== */
/* Movie list · a printed register                                       */
/* Top-weighted, rules doing the work, no icon anywhere. The numbered    */
/* lines are genuinely ordinal, which is the one case an eyebrow-like    */
/* numeral is allowed.                                                   */
/* ==================================================================== */

.hp-card--register {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    font-family: var(--font-plex);
    background: var(--reg-paper);
    border: 1px solid var(--reg-rule);
    border-top: 3px double var(--reg-rule-firm);
}

.hp-card--register .hp-card__title {
    font-family: var(--font-register);
    font-size: var(--text-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--reg-ink-strong);
}

.hp-card--register .hp-card__desc {
    margin-top: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--reg-rule);
    color: var(--reg-muted);
}

.hp-card--register .hp-card__line {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--reg-rule);
    font-size: var(--text-xs);
    color: var(--reg-ink);
}

.hp-card--register .hp-card__num {
    font-variant-numeric: tabular-nums;
    color: var(--reg-neutral);
}

.hp-card--register .hp-card__go {
    margin-top: auto;
    padding-top: var(--space-md);
    font-family: var(--font-register);
    font-size: var(--text-sm);
    color: var(--reg-accent);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-micro) var(--ease-out);
}

/* One signal: the rule under the link is drawn in. */
.hp-card--register:hover .hp-card__go {
    border-bottom-color: var(--reg-accent);
}
.hp-card--register:focus-visible { outline-color: var(--reg-accent); }


/* ==================================================================== */
/* Wishlist · a window on a desktop                                      */
/* Title bar, chrome bevel, a list inside, and a real pushbutton at the  */
/* bottom instead of a text link. White type sits only on the deep blues:*/
/* the bright cyan is 1.5:1 and the source repo says so itself.          */
/* ==================================================================== */

.hp-card--wishlist {
    padding: var(--space-xs);
    font-family: var(--font-plex);
    background: var(--wsh-desktop);
    border: 1px solid var(--wsh-edge);
    box-shadow: inset 0 0 0 1px var(--wsh-desktop-2);
}

.hp-card--wishlist .hp-card__titlebar {
    display: block;
    padding: var(--space-2xs) var(--space-xs);
    background: linear-gradient(180deg, var(--wsh-deep), var(--wsh-deeper));
    border-top: 1px solid var(--wsh-chrome-hi);
    border-left: 1px solid var(--wsh-chrome-hi);
    border-right: 1px solid var(--wsh-edge);
    font-family: var(--font-pixel);
    font-size: var(--text-2xs);
    color: var(--wsh-ink-inv);
}

.hp-card--wishlist .hp-card__pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-md) var(--space-sm) var(--space-sm);
    background: var(--wsh-panel);
    border-left: 1px solid var(--wsh-chrome-hi);
    border-right: 1px solid var(--wsh-chrome-lo);
    border-bottom: 1px solid var(--wsh-chrome-lo);
}

.hp-card--wishlist .hp-card__title {
    font-family: var(--font-wishlist);
    font-weight: 700;
    color: var(--wsh-ink);
}

.hp-card--wishlist .hp-card__desc {
    margin-top: var(--space-xs);
    color: var(--wsh-ink-2);
}

.hp-card--wishlist .hp-card__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--wsh-ink-2);
}

.hp-card--wishlist .hp-card__row::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--wsh-accent);
    box-shadow: inset -1px -1px 0 var(--wsh-deep);
}

.hp-card--wishlist .hp-card__go {
    margin-top: auto;
    padding-top: var(--space-md);
    padding: var(--space-2xs) var(--space-md);
    background: var(--wsh-panel-2);
    border-top: 1px solid var(--wsh-chrome-hi);
    border-left: 1px solid var(--wsh-chrome-hi);
    border-right: 1px solid var(--wsh-edge);
    border-bottom: 1px solid var(--wsh-edge);
    font-family: var(--font-wishlist);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--wsh-deeper);
}

/* One signal: the button's bevel inverts, the way a real one did. */
.hp-card--wishlist:hover .hp-card__go {
    border-top-color: var(--wsh-edge);
    border-left-color: var(--wsh-edge);
    border-right-color: var(--wsh-chrome-hi);
    border-bottom-color: var(--wsh-chrome-hi);
}
.hp-card--wishlist:active .hp-card__go { background: var(--wsh-panel); }
.hp-card--wishlist:focus-visible { outline-color: var(--wsh-accent); }


/* ==================================================================== */
/* Accountancy · a ledger block                                          */
/* Figures right, labels left, hairline between. No icon: the alignment  */
/* is the design.                                                        */
/* ==================================================================== */

.hp-card--accountancy {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    font-family: var(--font-ledger);
    background: var(--acc-surface);
    border: 1px solid var(--acc-rule);
    border-radius: 8px;
    transition: border-color var(--dur-short) var(--ease-out),
                transform var(--dur-micro) var(--ease-out);
}

.hp-card--accountancy .hp-card__title {
    font-weight: 600;
    color: var(--acc-ink);
}

.hp-card--accountancy .hp-card__desc {
    margin-top: var(--space-xs);
    color: var(--acc-alt);
}

.hp-card--accountancy .hp-card__ledger {
    margin-top: var(--space-md);
    border-top: 1px solid var(--acc-rule);
    background: var(--acc-subtle);
}

.hp-card--accountancy .hp-card__entry {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-xs);
    border-bottom: 1px solid var(--acc-rule);
    font-size: var(--text-xs);
    color: var(--acc-alt);
}

.hp-card--accountancy .hp-card__entry span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--acc-contrast);
}

.hp-card--accountancy .hp-card__go {
    margin-top: auto;
    padding-top: var(--space-md);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--acc-primary);
}

/* One signal: the rule takes the brand colour. */
.hp-card--accountancy:hover { border-color: var(--acc-primary); }
.hp-card--accountancy:focus-visible { outline-color: var(--acc-primary); }


/* ==================================================================== */
/* Responsive · verified at 320 / 375 / 414 / 768                        */
/* ==================================================================== */

@media only screen and (max-width: 1200px) {
    .hp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 1000px) {
    .wrapper {
        margin-top: 2rem !important;
    }
}

@media only screen and (max-width: 640px) {
    .hp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-page {
        padding: 0 var(--space-md);
    }

    .hp-card--garnet {
        min-height: 21rem;
    }

    /* The card is narrower here, so pull the mark back on-card and lift it
       a little: at the desktop offsets it reads as an empty dark rectangle. */
    .hp-card--garnet .hp-card__logo {
        top: -1.5rem;
        right: -1.75rem;
        width: 11rem;
        opacity: 0.42;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 150ms !important;
    }
}