/* =========================================================
   DAISY CHAIN — GLOBAL HEADER / NAVIGATION
   dc-header.css
   2026-08-31
   ========================================================= */

:root {
    --accent-color: #E71411;
    --dark-color:   #231F20;
    --light-color:  #FCFBFE;
    --nav-transition: fill 0.1s ease;

    --dc-top-color:    #FCFBFE;
    --dc-bottom-color: #FCFBFE;
    --dc-safe-transition: 180ms ease-out;
}


/* =========================================================
   READYMAG PROTECTIONS
   ========================================================= */

#focus-img,
#media-focus {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-touch-callout: none;
}


/* =========================================================
   GLOBAL INTERFACE
   ========================================================= */

#dc-global-interface,
#dc-global-interface * {
    box-sizing: border-box;
}

#dc-global-interface {
    pointer-events: none;
}


/* =========================================================
   SHARED FIXED CONTROL
   ========================================================= */

.dc-fixed {
    position: fixed;
    z-index: 2147483000;
    pointer-events: none;
}

.dc-nav-control {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
    border: 0;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    -webkit-appearance: none;
    appearance: none;

    pointer-events: auto;
    cursor: pointer;

    line-height: 0;
    text-decoration: none;
}

/* =========================================================
   DESKTOP
   ========================================================= */

/*
   DC mark

   Visual size increased to match the current live
   Readymag implementation.
*/

#dc-ui-mark {
    top: 40px;
    left: 40.98px;

    width: 44px;
    height: 44px;
}


/*
   Hamburger / close
*/

#dc-ui-control {
    top: 40px;
    right: 40px;

    width: 36px;
    height: 36px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) and (min-width: 601px) {

    #dc-ui-mark {
        top: 26.43px;
        left: 24.97px;
        right: auto;

        width: 44px;
        height: 44px;
    }

    #dc-ui-control {
        top: 23.43px;
        right: 22px;
        left: auto;

        width: 40px;
        height: 40px;
    }
}


/* =========================================================
   MOBILE
   ≤600px

   control → LEFT
   DC mark → RIGHT
   10px viewport margin
   ========================================================= */

@media (max-width: 600px) {

    /*
       INDEPENDENT MOBILE SAFE-AREA SURFACES

       JS changes these from separate section-boundary
       positions. The bottom can therefore enter the next
       section before the top does.
    */

    #dc-global-interface::before,
    #dc-global-interface::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        z-index: 2147482999;
        pointer-events: none;

        transition:
            background-color
            var(--dc-safe-transition);
    }

    #dc-global-interface::before {
        top: 0;
        height: env(safe-area-inset-top, 0px);
        background-color: var(--dc-top-color);
    }

    #dc-global-interface::after {
        bottom: 0;
        height: env(safe-area-inset-bottom, 0px);
        background-color: var(--dc-bottom-color);
    }

    #dc-ui-mark {
        top: 10.08px;
        right: 10px;
        left: auto;

        width: 31px;
        height: 31px;
    }

    #dc-ui-control {
        top: 5px;
        left: 10px;
        right: auto;

        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   ADAPTIVE RASTER CONTROL SYSTEM

   DARK:
   light raster

   LIGHT:
   dark raster

   ACCENT:
   dark raster

   Canonical vector production artwork remains private.
   Public controls use raster derivatives.
   ========================================================= */

/* DC MARK */

.dc-mark.is-on-dark {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-mark-light@2x.png");
}

.dc-mark.is-on-light,
.dc-mark.is-on-accent {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-mark-dark@2x.png");
}


/* MENU */

#dc-menu.is-on-dark {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-menu-light@2x.png");
}

#dc-menu.is-on-light,
#dc-menu.is-on-accent {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-menu-dark@2x.png");
}


/* CLOSE */

#dc-close.is-on-dark {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-close-light@2x.png");
}

#dc-close.is-on-light,
#dc-close.is-on-accent {
    background-image:
        url("/HEADER/ASSETS/RASTER/dc-close-dark@2x.png");
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .dc-mark.is-on-dark:hover,
    .dc-mark.is-on-light:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-mark-accent@2x.png");
    }

    .dc-mark.is-on-accent:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-mark-light@2x.png");
    }

    #dc-menu.is-on-dark:hover,
    #dc-menu.is-on-light:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-menu-accent@2x.png");
    }

    #dc-menu.is-on-accent:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-menu-light@2x.png");
    }

    #dc-close.is-on-dark:hover,
    #dc-close.is-on-light:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-close-accent@2x.png");
    }

    #dc-close.is-on-accent:hover {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-close-light@2x.png");
    }
}


/* =========================================================
   READYMAG SYSTEM FIX
   ========================================================= */

.item:has(.dc-nav-control) {
    isolation: unset !important;
    background: transparent !important;
}


/* ======================================================
   MOBILE / TOUCH PRESS FEEDBACK
   ====================================================== */

@media (hover: none), (pointer: coarse) {

    .dc-mark.is-on-dark:active,
    .dc-mark.is-on-light:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-mark-accent@2x.png");
    }

    .dc-mark.is-on-accent:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-mark-light@2x.png");
    }

    #dc-menu.is-on-dark:active,
    #dc-menu.is-on-light:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-menu-accent@2x.png");
    }

    #dc-menu.is-on-accent:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-menu-light@2x.png");
    }

    #dc-close.is-on-dark:active,
    #dc-close.is-on-light:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-close-accent@2x.png");
    }

    #dc-close.is-on-accent:active {
        background-image:
            url("/HEADER/ASSETS/RASTER/dc-close-light@2x.png");
    }
}

/* =========================================================
   INTEGRATED HEADER GEOMETRY TEST v1
   2026-09-03

   PHYSICAL STRUCTURE:
   #dc-global-interface
     #dc-ui-mark
     #dc-ui-heading
     #dc-ui-control

   All three occupy the same fixed header band and therefore
   share one vertical centerline.
   ========================================================= */

:root {
    --dc-header-band-height: 117px;
    --dc-header-side-width: 117px;

    --dc-header-mark-size: 44px;
    --dc-header-control-size: 36px;

    --dc-header-heading-left: 117px;
    --dc-header-heading-right: 117px;
}

#dc-ui-mark,
#dc-ui-heading,
#dc-ui-control {
    position: fixed;
    top: 0;
    height: var(--dc-header-band-height);
    z-index: 2147483000;
}

#dc-ui-mark,
#dc-ui-control {
    width: var(--dc-header-side-width);

    display: flex;
    align-items: center;
    justify-content: center;
}

#dc-ui-mark {
    left: 0;
    right: auto;
}

#dc-ui-heading {
    left: var(--dc-header-heading-left);
    right: var(--dc-header-heading-right);

    display: flex;
    align-items: center;

    pointer-events: none;
}

#dc-ui-heading .dc-heading-block {
    pointer-events: auto;
}

#dc-ui-control {
    right: 0;
    left: auto;
}

#dc-ui-mark .dc-mark {
    width: var(--dc-header-mark-size);
    height: var(--dc-header-mark-size);
}

#dc-ui-control .dc-nav-control {
    width: var(--dc-header-control-size);
    height: var(--dc-header-control-size);
}


/* Tablet */
@media (max-width: 768px) and (min-width: 601px) {

    :root {
        --dc-header-band-height: 85px;
        --dc-header-side-width: 85px;

        --dc-header-mark-size: 44px;
        --dc-header-control-size: 40px;

        --dc-header-heading-left: 85px;
        --dc-header-heading-right: 85px;
    }
}


/* Mobile
   Preserve canonical side swap:
   control LEFT / mark RIGHT.
*/
@media (max-width: 600px) {

    :root {
        --dc-header-band-height: 51px;
        --dc-header-side-width: 51px;

        --dc-header-mark-size: 31px;
        --dc-header-control-size: 36px;

        --dc-header-heading-left: 51px;
        --dc-header-heading-right: 51px;
    }

    #dc-ui-mark {
        right: 0;
        left: auto;

        /*
           Mobile mark optical edge:
           keep the 51px header slot, but place the 31px mark
           exactly 5px from the right-hand viewport border.
        */
        justify-content: flex-end;
        padding-right: 5px;
        box-sizing: border-box;
    }

    #dc-ui-control {
        left: 0;
        right: auto;

        /*
           Mobile control optical edge:
           keep the 51px slot, but place the close/menu control
           exactly 5px from the left-hand viewport border.
        */
        justify-content: flex-start;
        padding-left: 5px;
        box-sizing: border-box;
    }
}


/* =========================================================
   AUTHORED READYMag LAYOUT MODE — TEST v3

   IMPORTANT:
   These rules intentionally come after all legacy viewport
   media queries. The explicit authored mode wins regardless
   of browser/window width.
   ========================================================= */

/* DESKTOP — always desktop when authored desktop */
#dc-global-interface.dc-interface-layout-desktop {
    --dc-header-band-height: 117px;
    --dc-header-side-width: 117px;
    --dc-header-mark-size: 44px;
    --dc-header-control-size: 36px;
    --dc-header-heading-left: 117px;
    --dc-header-heading-right: 117px;
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark {
    left: 0;
    right: auto;
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control {
    right: 0;
    left: auto;
}

/* TABLET — always tablet when authored tablet */
#dc-global-interface.dc-interface-layout-tablet {
    --dc-header-band-height: 85px;
    --dc-header-side-width: 85px;
    --dc-header-mark-size: 44px;
    --dc-header-control-size: 40px;
    --dc-header-heading-left: 85px;
    --dc-header-heading-right: 85px;
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark {
    left: 0;
    right: auto;
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-control {
    right: 0;
    left: auto;
}

/* MOBILE — always mobile when authored mobile */
#dc-global-interface.dc-interface-layout-mobile {
    --dc-header-band-height: 51px;
    --dc-header-side-width: 51px;
    --dc-header-mark-size: 31px;
    --dc-header-control-size: 36px;
    --dc-header-heading-left: 51px;
    --dc-header-heading-right: 51px;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark {
    right: 0;
    left: auto;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control {
    left: 0;
    right: auto;
}


/* =========================================================
   REFERENCE RAIL SCALE — TEST v4

   Family is already locked by data-dc-interface-layout.
   These rules only grow geometry within that family.

   Reference:
   desktop 1024 / 117 rail
   tablet   768 / 85 rail
   mobile   320 / 5 rail
   ========================================================= */

#dc-global-interface {
    --dc-active-rail: var(--dc-scaled-rail, var(--dc-reference-rail, 117px));
}

/* The side slots grow with the canonical rail relationship. */
#dc-global-interface #dc-ui-mark,
#dc-global-interface #dc-ui-control {
    width: var(--dc-active-rail);
}

/* Middle heading slot follows those rails. */
#dc-global-interface #dc-ui-heading {
    left: var(--dc-active-rail);
    right: var(--dc-active-rail);
}

/* Artwork itself remains fixed-size in this test. */
#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark .dc-mark {
    width: 44px;
    height: 44px;
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control .dc-nav-control {
    width: 36px;
    height: 36px;
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark .dc-mark {
    width: 44px;
    height: 44px;
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-control .dc-nav-control {
    width: 40px;
    height: 40px;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark .dc-mark {
    width: 31px;
    height: 31px;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control .dc-nav-control {
    width: 36px;
    height: 36px;
}


/* =========================================================
   ICON ARTWORK SCALE — TEST v4.1

   The DC mark and close/hamburger now scale from their
   canonical family sizes using the same --dc-interface-scale
   that grows the rail and heading.

   Family remains locked. This is continuous growth only.
   ========================================================= */

/* DESKTOP reference artwork:
   mark 44px
   control 36px
*/
#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-interface-scale, 1));
    height: calc(44px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-interface-scale, 1));
    height: calc(36px * var(--dc-interface-scale, 1));
}


/* TABLET reference artwork:
   mark 44px
   control 40px
*/
#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-interface-scale, 1));
    height: calc(44px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-control .dc-nav-control {
    width: calc(40px * var(--dc-interface-scale, 1));
    height: calc(40px * var(--dc-interface-scale, 1));
}


/* MOBILE reference artwork:
   mark 31px
   control 36px
*/
#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark .dc-mark {
    width: calc(31px * var(--dc-interface-scale, 1));
    height: calc(31px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-interface-scale, 1));
    height: calc(36px * var(--dc-interface-scale, 1));
}


/* =========================================================
   LOCKED FAMILY + CONTINUOUS SCALE — TEST v5
   2026-09-03

   Family is selected once in JS from the actual top-level
   viewport and then locked.

   All header elements remain vertically centered in one
   shared band. Scale changes size and rails, not family.
   ========================================================= */

/* Shared vertical centering */
#dc-global-interface #dc-ui-mark,
#dc-global-interface #dc-ui-heading,
#dc-global-interface #dc-ui-control {
    top: 0;
    display: flex;
    align-items: center;
}

#dc-global-interface #dc-ui-mark,
#dc-global-interface #dc-ui-control {
    justify-content: center;
}

/* DESKTOP locked family */
#dc-global-interface.dc-interface-layout-desktop {
    --dc-header-band-height:
        calc(117px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark,
#dc-global-interface.dc-interface-layout-desktop #dc-ui-heading,
#dc-global-interface.dc-interface-layout-desktop #dc-ui-control {
    height: var(--dc-header-band-height);
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark,
#dc-global-interface.dc-interface-layout-desktop #dc-ui-control {
    width: var(--dc-scaled-rail, 117px);
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-heading {
    left: var(--dc-scaled-rail, 117px);
    right: var(--dc-scaled-rail, 117px);
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-interface-scale, 1));
    height: calc(44px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-interface-scale, 1));
    height: calc(36px * var(--dc-interface-scale, 1));
}

/* TABLET locked family */
#dc-global-interface.dc-interface-layout-tablet {
    --dc-header-band-height:
        calc(85px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark,
#dc-global-interface.dc-interface-layout-tablet #dc-ui-heading,
#dc-global-interface.dc-interface-layout-tablet #dc-ui-control {
    height: var(--dc-header-band-height);
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark,
#dc-global-interface.dc-interface-layout-tablet #dc-ui-control {
    width: var(--dc-scaled-rail, 85px);
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-heading {
    left: var(--dc-scaled-rail, 85px);
    right: var(--dc-scaled-rail, 85px);
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-interface-scale, 1));
    height: calc(44px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-control .dc-nav-control {
    width: calc(40px * var(--dc-interface-scale, 1));
    height: calc(40px * var(--dc-interface-scale, 1));
}

/* MOBILE locked family */
#dc-global-interface.dc-interface-layout-mobile {
    --dc-header-band-height:
        calc(51px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark,
#dc-global-interface.dc-interface-layout-mobile #dc-ui-heading,
#dc-global-interface.dc-interface-layout-mobile #dc-ui-control {
    height: var(--dc-header-band-height);
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark,
#dc-global-interface.dc-interface-layout-mobile #dc-ui-control {
    width: max(
        calc(5px * var(--dc-interface-scale, 1)),
        calc(36px * var(--dc-interface-scale, 1))
    );
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-heading {
    left: var(--dc-scaled-rail, 5px);
    right: var(--dc-scaled-rail, 5px);
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark .dc-mark {
    width: calc(31px * var(--dc-interface-scale, 1));
    height: calc(31px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-interface-scale, 1));
    height: calc(36px * var(--dc-interface-scale, 1));
}

/* Canonical side arrangement by locked family */
#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark,
#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark {
    left: 0;
    right: auto;
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control,
#dc-global-interface.dc-interface-layout-tablet #dc-ui-control {
    right: 0;
    left: auto;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark {
    right: 0;
    left: auto;
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control {
    left: 0;
    right: auto;
}


/* =========================================================
   DEVICE FAMILY + RAIL SCALE — CANONICAL v6
   2026-09-04

   DESKTOP:
   >1024  rails grow; artwork/type remain at reference size
   768–1024 rails + artwork/type shrink together
   <768 freeze at 768 desktop geometry; clip right

   Alignment:
   - logo centered horizontally in left rail
   - close/menu centered horizontally in right rail
   - heading left-aligned to middle section
   - all three vertically centered in the top rail
   ========================================================= */

#dc-global-interface {
    --dc-active-rail:
        var(--dc-scaled-rail, var(--dc-reference-rail, 117px));
}

/* Desktop physical canvas: never narrower than 768 after family lock. */
#dc-global-interface.dc-interface-layout-desktop {
    left: 0;
    right: auto;
    width: max(100vw, var(--dc-canvas-floor, 768px));
    --dc-header-band-height:
        calc(117px * var(--dc-rail-scale, 1));
}

/* Tablet top rail follows tablet rail scale. */
#dc-global-interface.dc-interface-layout-tablet {
    --dc-header-band-height:
        calc(85px * var(--dc-rail-scale, 1));
}

/* Mobile top rail follows mobile family scale. */
#dc-global-interface.dc-interface-layout-mobile {
    --dc-header-band-height:
        calc(51px * var(--dc-rail-scale, 1));
}

/* One vertical system. */
#dc-global-interface #dc-ui-mark,
#dc-global-interface #dc-ui-heading,
#dc-global-interface #dc-ui-control {
    top: 0;
    height: var(--dc-header-band-height);
    display: flex;
    align-items: center;
}

/* Side controls are horizontally centered in their rails. */
#dc-global-interface #dc-ui-mark,
#dc-global-interface #dc-ui-control {
    width: var(--dc-active-rail);
    justify-content: center;
}

/* Heading occupies middle section and is LEFT aligned. */
#dc-global-interface #dc-ui-heading {
    left: var(--dc-active-rail);
    right: var(--dc-active-rail);
    justify-content: flex-start;
    text-align: left;
}

#dc-global-interface #dc-ui-heading .dc-heading-block {
    width: auto;
    margin: 0;
    text-align: left;
}

/* Desktop reference artwork, shrinking only below 1024. */
#dc-global-interface.dc-interface-layout-desktop #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-element-scale, 1));
    height: calc(44px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-element-scale, 1));
    height: calc(36px * var(--dc-element-scale, 1));
}

/* Tablet reference artwork, never mobile. */
#dc-global-interface.dc-interface-layout-tablet #dc-ui-mark .dc-mark {
    width: calc(44px * var(--dc-element-scale, 1));
    height: calc(44px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet #dc-ui-control .dc-nav-control {
    width: calc(40px * var(--dc-element-scale, 1));
    height: calc(40px * var(--dc-element-scale, 1));
}

/* Mobile reference artwork. */
#dc-global-interface.dc-interface-layout-mobile #dc-ui-mark .dc-mark {
    width: calc(31px * var(--dc-element-scale, 1));
    height: calc(31px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile #dc-ui-control .dc-nav-control {
    width: calc(36px * var(--dc-element-scale, 1));
    height: calc(36px * var(--dc-element-scale, 1));
}


/* =========================================================
   MOBILE HEADING LEFT OF LOGO — TEST v6.1
   2026-09-04

   MOBILE ONLY.

   - DC mark remains on the RIGHT.
   - Heading/subheading sit to the LEFT of the rendered mark.
   - Right edge of heading block = 20px left of mark artwork.
   - Heading/subheading are right-aligned.
   - Full heading block remains vertically centered in the
     same top rail as the mark and close/menu.
   - Desktop/tablet geometry is untouched.
   ========================================================= */

#dc-global-interface.dc-interface-layout-mobile #dc-ui-heading {
    left: var(--dc-active-rail);
    right: var(--dc-mobile-heading-right, 56px);

    justify-content: flex-end;
    text-align: right;
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block {
    width: auto;
    margin: 0;

    text-align: right;
}

/* =========================================================
   DC MARK — DARK-ON-LIGHT OPTICAL COMPENSATION
   ========================================================= */

/*
  Dark artwork appears optically smaller than the equivalent
  light artwork despite identical raster geometry.

  Preserve the canonical control dimensions and position;
  enlarge only the rendered dark mark by 4%.
*/
.dc-mark.is-on-light {
    transform: scale(1.04);
}