/*
 * Design tokens for the restyle.
 * Values read from Figma: "20 20 — Website RK".
 *
 * Names are prefixed --g- so they cannot collide with the legacy :root blocks
 * in style.css / mobile.css while all three sheets are loaded side by side.
 * When the last page is migrated, those two sheets go and this becomes the
 * only token source.
 *
 * The Figma file defines no variables, so every value here was taken from a
 * measured node rather than a published token. Swap them in one place if the
 * designer publishes a real variable set later.
 */

:root {
    --g-font: 'Neue Montreal', sans-serif;
    --g-weight-regular: 400;
    --g-weight-medium: 500;

    /* Type — desktop */
    --g-heading: 40px;
    --g-heading-lh: 44px;
    --g-heading-tracking: -1px;
    --g-filter: 22px;
    --g-filter-lh: 1.1;
    --g-filter-tracking: -0.6px;
    --g-body: 14px;
    --g-body-lh: 22px;
    --g-meta: 14px;
    --g-meta-lh: 18px;
    --g-button: 12px;
    --g-button-lh: 18px;
    --g-button-height: 33px;
    --g-spec: 14px;              /* product spec rows */
    --g-spec-lh: 20px;
    --g-caption: 11px;           /* tearsheet link */
    --g-caption-lh: 18px;
    --g-contact: 14px;           /* about contact block */
    --g-contact-lh: 18px;

    /* Display names (product title, artist name) set tighter than section
       headings, which use --g-heading-lh. */
    --g-heading-lh-tight: 0.9;

    /* Colour */
    --g-ink: #000000;
    --g-ink-muted: #cccccc;      /* card meta labels */
    --g-ink-faint: #dddddd;      /* "by <artist>", inactive filters */
    --g-surface: #ffffff;
    --g-surface-alt: #f2f2f2;    /* buttons, hairlines */
    --g-surface-alt-hover: #e2e2e2;
    --g-accent: #002fa7;         /* primary action (Enquire Now) */
    --g-on-accent: #ffffff;
    --g-on-image: #ffffff;                       /* work tile hover labels */
    --g-on-image-muted: rgba(255, 255, 255, 0.6);
    --g-veil: rgba(0, 0, 0, 0.08);   /* dim behind hover labels, for legibility */

    /* Layout */
    --g-gutter: 20px;
    --g-gap: 20px;
    --g-columns: 3;
    --g-radius: 4px;
    --g-block-gap: 40px;

    /* Cards. Aspect is 401.67 / 298.22 from the Figma card, which matches the
       desktop card (614 wide, image 87% of 523 tall) to three decimal places. */
    --g-card-aspect: 1.347;
    --g-card-gap: 20px;
    --g-card-meta-gap: 20px;
    --g-tile-pad: 20px;          /* inset of the hover labels */

    /* Paging dots: 6px circles on a 16px pitch (Figma "Group 28", 118 x 6). */
    --g-dot-size: 6px;
    --g-dot-gap: 10px;

    /* Stockroom */
    --g-collection-gap: 220px;
    --g-collection-gap-first: 120px;
    --g-filters-offset: 220px;

    /* Product */
    --g-section-gap: 140px;      /* vertical rhythm between page sections */
    --g-panel-width: 34%;        /* hero info column (653/1920); image takes the rest */
    --g-panel-offset: 164px;     /* first baseline down the hero panel */
    --g-artist-aspect: 2.35;     /* 1880 x 800 banner */
    --g-exhibition-aspect: 1.55; /* 930 x 600 */

    /* About */
    --g-page-offset: 140px;         /* first baseline below the fixed nav */
    --g-about-wide-aspect: 1.88;    /* desktop, full width: 1880 x 1000 */
    --g-about-pair-aspect: 1.329;   /* desktop, paired: 930 x 700 */
    --g-about-tall-aspect: 0.744;   /* mobile tall slot: 402 x 540 */
    --g-about-short-aspect: 1.34;   /* mobile short slot: 402 x 300 */

    /*
     * Artists overlay hover images. Width is a third of the page less this
     * gap, so the space between the pair is the gap at every width — they were
     * closing up as the screen narrowed, because a fixed size against thirds
     * that shrink leaves less and less between them.
     */
    --g-artist-hover-w: 520px;   /* cap, so they stop growing on wide screens */
    --g-artist-hover-gap: 140px;
    --g-artist-hover-scale: 0.9;  /* trims the pair without moving their centres */

    /* Artist. 1920 x 630 — 90% of the 700px the Figma frame draws. */
    --g-artist-hero-aspect: 3.048;

    /* Works index */
    --g-works-lead-aspect: 2.74;    /* 1247 x 455, spans two columns */
    --g-works-artist-gap: 100px;

    /* All Exhibitions — its slides are taller than the exhibition thumbnails
       on the product and artist pages, so they get their own ratio. */
    --g-exhibition-slide-aspect: 1.55;  /* 930 x 600 */
    --g-exhibition-slides: 2;
    /* Portrait slides as a fraction of a landscape slide's width. 0.48 is 80%
       of the previous 0.6, and lands the frame on a 0.744 portrait ratio. */
    --g-exhibition-portrait-scale: 0.48;

    /* Overlay nav (the new full-screen menu) */
    --g-nav: 28px;
    --g-nav-lh: 44px;
    --g-nav-tracking: -0.6px;
    --g-nav-count: 8px;
    --g-nav-count-lh: 22px;
    --g-nav-pad-x: 8px;
    --g-nav-pad-y: 10px;
    --g-nav-idle: rgba(0, 0, 0, 0.16);  /* every item but the active one */
    --g-nav-inset: 125px;               /* nav row's offset from the right edge */

    /*
     * The works grid's column width, and the left edge of its last column.
     * The nav and the panel that opens from it sit in that column, so they
     * track the grid at any width instead of hanging off the right edge by a
     * fixed amount. The 100% resolves against whatever uses these, which in
     * every case is a full-width fixed box.
     */
    --g-grid-col: calc((100% - 2 * var(--g-gutter) - (var(--g-columns) - 1) * var(--g-card-gap)) / var(--g-columns));
    --g-grid-last-col: calc(var(--g-gutter) + (var(--g-columns) - 1) * (var(--g-grid-col) + var(--g-card-gap)));

    /*
     * Roughly the nav row's own width. It does not place anything — it only
     * decides the width below which the row can no longer sit inside that
     * column and has to hug the gutter instead. Being a little out just moves
     * that crossover, so it degrades gently if the labels change.
     */
    --g-nav-row-w: 520px;
    --g-nav-bar: 28px;                  /* the bar's own label size */
    --g-nav-bar-lh: 44px;
    --g-nav-bar-h: 60px;                /* top bar Contact is centred in */
    --g-nav-bar-bg: rgba(255, 255, 255, 0.2);
    --g-nav-bar-blur: 20px;
    --g-nav-logo-w: 44px;
    --g-nav-logo-h: 47px;

    /* Home hero. Names sit on a 36px wheel with the one on the centre line in
       white and its neighbours fading out either side. */
    --g-home-slot: 36px;
    --g-home-drop: 20px;                        /* wheel centre below the nav's */
    --g-home-nav-idle: rgba(255, 255, 255, 0.28);
    --g-home-name-near: rgba(255, 255, 255, 0.24);
    --g-home-name-far: rgba(255, 255, 255, 0.08);
    --g-home-fade: 0.6s;

    /* Contact / Enquire panels */
    --g-modal-width: 482px;
    --g-modal-pad: 22px;
    --g-textarea-h: 54px;        /* the one free-text field's box */
    --g-on-accent-muted: rgba(255, 255, 255, 0.2);   /* field labels and rules */
    --g-on-accent-idle: rgba(255, 255, 255, 0.28);  /* Close, matching the nav */
    --g-on-accent-hover: rgba(255, 255, 255, 0.7);
    --g-contact-pad-top: 177px;   /* header to first field (60 -> 237) */
}

/*
 * Breakpoint values are literal px on purpose. var() is not valid inside a
 * media condition — that is why the 15 @media blocks in style.css that use
 * var(--bp-*) have never matched.
 */

@media (max-width: 1024px) {
    :root {
        /* No tablet frame exists in Figma; two columns is an interpolation. */
        --g-columns: 2;
    }
}

@media (max-width: 768px) {
    :root {
        --g-columns: 1;

        --g-heading: 34px;
        --g-heading-lh: 38px;
        --g-body: 12px;
        --g-meta: 12px;

        --g-card-gap: 10px;
        --g-card-meta-gap: 13px;
        --g-tile-pad: 20px;

        --g-collection-gap: 120px;
        --g-collection-gap-first: 40px;
        --g-filters-offset: 120px;

        --g-spec: 12px;
        --g-section-gap: 40px;
        --g-panel-offset: 40px;
        --g-artist-aspect: 0.744;     /* banner becomes a 402 x 540 portrait */
        --g-exhibition-aspect: 1.34;

        --g-contact: 12px;
        --g-contact-lh: 16px;
        --g-page-offset: 120px;      /* content y=80 + 40 padding, clears the nav */
        --g-artist-hero-aspect: 0.744;
        --g-works-lead-aspect: 1.34;
        --g-works-artist-gap: 40px;
        /* Home — MOBILE (2056:6524) runs the idle nav lighter than desktop. */
        --g-home-nav-idle: rgba(255, 255, 255, 0.4);

        /* Overlay nav — "Menu — MOBILE" (2056:6443). Its own 14px gutter, not
           the page's 20px, and its own 22px bar over a 26px row. */
        --g-nav: 26px;
        --g-nav-lh: 1.1;
        --g-nav-bar: 22px;
        --g-nav-bar-h: 44px;
        --g-nav-gutter: 14px;
        /* A line box, not a pitch made of line + gap: at 26px the glyph box is
           taller than a 1.1 line, so descenders were landing on the name
           below. 33px clears them and keeps the design's pitch. */
        --g-nav-artist-pitch: 33px;
        --g-nav-artist-inset: 20px;   /* names and thumbnail off the bottom */
        --g-nav-thumb: 180px;

        --g-exhibition-slide-aspect: 0.744; /* 402 x 540 */
        --g-exhibition-slides: 1;
        /* One image per view, so a portrait shot is not narrowed — every slide
           fills the width and crops to the same portrait ratio. */
        --g-exhibition-portrait-scale: 1;
    }
}