/* =========================================================
   TYPEFACES

   @import must be the first rule in the file, before anything
   else, or browsers drop it silently.

   The footer declares its own typeface dependency rather than
   assuming the page has loaded DC Sans. dc-core-styles.css does
   the same thing for the same reason: a component that names a
   family it has not loaded renders in a fallback and looks
   subtly wrong rather than obviously broken.

   Duplicate @imports of the same URL are deduplicated by the
   browser, so a page already loading the press stylesheet pays
   nothing for this.
   ========================================================= */
@import url('https://press.daisychainbiannual.com/assets/css/dc-typography.css');

/* =========================================================
   DAISY CHAIN — GLOBAL FOOTER
   dc-footer.css
   v1 — 2026-09-10
   =========================================================

   Geometry is taken from the header system and never restated.
   The footer consumes:

       --dc-header-side-width      117 / 85 / 51   rail
       --dc-header-mark-size       44 / 44 / 31    mark
       .dc-interface-layout-*      locked device family

   Those are published by dc-header.js. The footer does no device
   detection of its own: two detectors would eventually disagree,
   and the technical bible records "tablet silently becoming
   mobile after initialization" as a known failure mode.

   ALIGNMENT RULE

   The link stack always sits beneath the mark, and its flush edge
   lands on the mark's inner edge — the ragged edge always faces
   the viewport margin.

       desktop   mark left,  centred in a 117 rail
                 fixed rail; stack right-aligned,
                 flush edge at (117+44)/2 = 80.5px
       tablet    mark left,  centred in an 85 rail
                 fixed rail; stack right-aligned,
                 flush edge at (85+44)/2 = 64.5px
       mobile    mark right, 5px from the border
                 IN FLOW at the page end, not a fixed rail;
                 stack right-aligned to the same 5px optical edge

   Mobile is the exception, and for a measured reason rather than a
   stylistic one. Its mark leaves only 36px inboard, while ACCOUNT
   needs 51.6px at 11px with 0.1em tracking — so a stack hung under
   the mobile mark overflows the screen. At the page end it has the
   full width. See the MOBILE section below.

   Expressed as calc() against the header's own variables rather
   than as pixel constants, so that changing a rail moves the
   footer with it.
   ========================================================= */


/* =========================================================
   BAND
   ========================================================= */

#dc-global-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    /* mirrors the header band so the page reads symmetrically */
    height: var(--dc-header-side-width, 117px);

    pointer-events: none;
    z-index: 2147482999;    /* one below the header */
}

#dc-global-footer .dc-footer-links,
#dc-global-footer .dc-footer-copyright {
    pointer-events: auto;
}

/*
   Brand tokens, matching press.daisychainbiannual.com/assets/css/
   dc-core-styles.css exactly. Declared locally so the footer is
   correct even on a page that has not loaded the press stylesheet;
   the values must not diverge from it.
*/
#dc-global-footer {
    --dc-white: #FCFBFE;
    --dc-black: #231F20;
    --dc-accent: #E71411;

    /*
       Fallback surface colour, used only until dc-header.js applies
       is-on-light / is-on-dark / is-on-accent. Light-on-dark is the
       more common ground across the site, so it is the safer default
       to flash.
    */
    color: var(--dc-white);
}


/* =========================================================
   NEUTRALISE THE HEADER'S CONTROL GEOMETRY

   The footer's elements carry .dc-nav-control so the header's
   colour pass finds them. That class also carries the header's
   own button geometry:

       width: 100%;  height: 100%;  line-height: 0;

   Right for a 36px icon button in the rail, wrong for a line of
   text in the footer. height:100% is the damaging one: the
   copyright's containing block is the footer band, which has an
   explicit height, so the copyright's box became the full 117px.
   Its bottom edge sat correctly on the last link's bottom while
   its text rendered at the top of that box — about 100px high.

   The class is kept for colour; its geometry is undone here.
   ========================================================= */

#dc-global-footer .dc-nav-control {
    width: auto;
    height: auto;
    line-height: 1;
}


/* =========================================================
   LINK STACK
   ========================================================= */

#dc-footer-links {
    position: absolute;
    bottom: 0;

    display: flex;
    flex-direction: column;

    /*
       The block runs from the viewport edge to the mark's inner
       edge; text-align then puts the flush edge exactly on it.
    */
    left: 0;
    width: calc(
        (var(--dc-header-side-width, 117px) + var(--dc-header-mark-size, 44px)) / 2
    );
    text-align: right;
    align-items: flex-end;
}

#dc-footer-links a {
    /*
       Inherit rather than take the UA stylesheet's link blue.

       Colour normally arrives from is-on-light / is-on-dark, applied
       by dc-header.js. Without that default there is a blue flash on
       every load before the header's colour pass runs, and permanent
       blue if the header fails to load at all.
    */
    color: inherit;

    font-family: 'DC Sans Condensed', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;

    /*
       Local value, not a press-system one.

       press dc-core-styles.css and dc-typography.css define no
       underlined link style at all — every text-decoration rule in
       them is `none`, and the one border-bottom is the press
       header's own divider. There is nothing upstream to inherit,
       so these two values are the footer's own.

       Safe to set this tight because the labels are uppercase and
       have no descenders to collide with. See DEVELOPMENT/
       WISHLIST.md — the press system should own a link-underline
       definition so this stops being a local invention.
    */
    text-underline-offset: 0.1em;

    /*
       Matched to the typeface's own stroke weight rather than set
       in pixels. DC Sans Condensed at weight 300 has a 10px stem
       at a 200px font size, so the stem is 0.05em; at 1px the rule
       was about 40% heavier than the letters it sat under.

       Kept in em so it holds across all three sizes — 0.7px at 14,
       0.65 at 13, 0.55 at 11 — rather than growing heavier
       relative to the text as the text gets smaller, which a fixed
       pixel value does.
    */
    text-decoration-thickness: 0.05em;
    white-space: nowrap;

    /*
       Desktop values as the base, not only inside the desktop rule.

       Every size below used to live exclusively in a
       .dc-interface-layout-* block. If the family class never
       arrives — the header not yet initialised, or the footer
       running somewhere it cannot read the header's attribute —
       none of those rules match and the links fall back to the
       browser default: 16px, no gaps, and the underline of one
       line struck through the next.

       Base values here, family rules override.
    */
    font-size: 14px;
    margin-bottom: 8px;
}

#dc-footer-links a:last-child {
    margin-bottom: 26px;
}

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

   Matches the text-link states in dc-heading.css exactly:

       on dark    -> accent
       on light   -> accent
       on accent  -> light

   :hover for fine pointers, :active for coarse, using the same
   two media queries the heading uses. The header's own controls
   express the same states by swapping raster icons; for text the
   heading block is the canonical form, and these links are text.

   The bare :hover at the end is the fallback for a page where the
   colour pass has not run and no is-on-* class is present. It is
   deliberately lower specificity than the class rules, so it only
   applies when they do not.
   ========================================================= */

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

    #dc-footer-links a.is-on-dark:hover,
    #dc-footer-links a.is-on-light:hover {
        color: var(--dc-accent);
    }

    #dc-footer-links a.is-on-accent:hover {
        color: var(--dc-white);
    }

    #dc-footer-links a:hover {
        color: var(--dc-accent);
    }
}

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

    #dc-footer-links a.is-on-dark:active,
    #dc-footer-links a.is-on-light:active {
        color: var(--dc-accent);
    }

    #dc-footer-links a.is-on-accent:active {
        color: var(--dc-white);
    }

    #dc-footer-links a:active {
        color: var(--dc-accent);
    }
}


/* =========================================================
   COPYRIGHT — opposite corner from the links
   ========================================================= */

#dc-footer-copyright {
    position: absolute;
    bottom: 0;

    right: 0;
    width: calc(
        (var(--dc-header-side-width, 117px) + var(--dc-header-mark-size, 44px)) / 2
    );
    text-align: left;

    font-family: 'DC Sans Condensed', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;

    font-size: 14px;    /* base; family rules override */
    bottom: 26px;
}


/* =========================================================
   SURFACE COLOUR

   Applied by dc-header.js, which samples the background beneath
   each element and sets is-on-light / is-on-dark / is-on-accent.
   The footer does not detect anything itself.
   ========================================================= */

#dc-global-footer .is-on-dark {
    color: var(--dc-white);
}

/*
   Light and accent grounds both take the dark ink, matching
   dc-heading.css (.is-on-accent -> --dc-heading-dark) and the
   header's own icons (#dc-close.is-on-accent uses the dark
   raster). An earlier version set accent to white, which left
   the hover state with nowhere to go: white resting, white on
   hover, no visible change on an accent page.
*/
#dc-global-footer .is-on-light,
#dc-global-footer .is-on-accent {
    color: var(--dc-black);
}


/* =========================================================
   DESKTOP — mark left, links left
   ========================================================= */

/*
   Gap sized so the stack fits inside the band rather than
   overflowing it. Four links at 14px with 8px gaps plus the 26px
   bottom inset is 106px, inside the 117px band. At the previous
   14px gap the stack was 124px and the first link sat above the
   band's top edge.
*/
#dc-global-footer.dc-interface-layout-desktop #dc-footer-links a {
    font-size: 14px;
    margin-bottom: 8px;
}

#dc-global-footer.dc-interface-layout-desktop #dc-footer-links a:last-child {
    margin-bottom: 26px;
}

#dc-global-footer.dc-interface-layout-desktop #dc-footer-copyright {
    font-size: 14px;
    bottom: 26px;
}


/* =========================================================
   TABLET — mark left, links left

   Note: the previously authored tablet footer placed the links
   bottom-right. That contradicted the alignment rule, since the
   tablet mark is on the left exactly as desktop's is. Only mobile
   inverts. This is a deliberate correction, not a regression.
   ========================================================= */

#dc-global-footer.dc-interface-layout-tablet #dc-footer-links a {
    font-size: 13px;
    margin-bottom: 7px;
}

#dc-global-footer.dc-interface-layout-tablet #dc-footer-links a:last-child {
    margin-bottom: 20px;
}

#dc-global-footer.dc-interface-layout-tablet #dc-footer-copyright {
    font-size: 13px;
    bottom: 20px;
}


/* =========================================================
   MOBILE — fixed, revealed at the bottom of the scroll

   Desktop and tablet float the footer in the rail permanently.
   Mobile does not: the footer stays hidden until the visitor is
   near the bottom of the scrollable content, then fades in.

   This replaces an earlier in-flow approach that inserted the
   footer at the page end. In-flow was wrong for this site.
   ReadyMag positions content absolutely inside a tall body — on
   the gallery, body height is set to over 10,000px — so "the end
   of the page" is not a position in the DOM that can be appended
   to. It is a scroll distance, and it has to be measured.

   Measuring it also makes the composition of the site irrelevant:
   one long page or several stacked pages that read as one, the
   footer appears when the scroll actually reaches the bottom.

   The band is auto-height rather than the rail height. On mobile
   the rail is 51px and the four links need more than that; as a
   revealed overlay at the viewport bottom, the footer is free to
   be as tall as its content.
   ========================================================= */

#dc-global-footer.dc-interface-layout-mobile {
    position: fixed;
    height: auto;
    padding: 22px 0 18px;
    box-sizing: border-box;

    /*
       The band carries a ground on mobile because it is revealed
       over content rather than sitting in empty rail space.
       Inherited from the surface the header detected.
    */
    transition: opacity 180ms ease;
}

#dc-global-footer.dc-interface-layout-mobile #dc-footer-links {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    padding-right: 5px;        /* matches the mark's optical inset */
    box-sizing: border-box;
    text-align: right;
    align-items: flex-end;
}

#dc-global-footer.dc-interface-layout-mobile #dc-footer-links a {
    font-size: 11px;
    margin-bottom: 6px;
}

#dc-global-footer.dc-interface-layout-mobile #dc-footer-links a:last-child {
    margin-bottom: 0;
}

#dc-global-footer.dc-interface-layout-mobile #dc-footer-copyright {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    padding-left: 5px;
    box-sizing: border-box;
    text-align: left;
    font-size: 11px;
    bottom: auto;
    margin-top: 16px;
}


/* =========================================================
   REVEAL STATE

   Applied by dc-footer.js on mobile only. Opacity rather than
   display, so the fade has something to animate and the band's
   height is already settled when it appears.
   ========================================================= */

#dc-global-footer.dc-footer-hidden {
    opacity: 0;
    pointer-events: none;
}

#dc-global-footer.dc-footer-hidden * {
    pointer-events: none;
}