/* DAISY CHAIN BIANNUAL — HEADING / SUBHEADING COMPONENT
   v4.0 — canonical heading presentation paired with dc-heading.js v4.0, 2026-09-03 */

@import url('https://press.daisychainbiannual.com/assets/css/dc-typography.css');

:root {
  --dc-heading-dark: #231F20;
  --dc-heading-light: #FCFBFE;
  --dc-heading-accent: #E71411;
  --dc-heading-transition: color 160ms ease;
}

.dc-heading-block,
.dc-heading-block * {
  box-sizing: border-box;
}

.dc-heading-block {
  position: relative;
  margin: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  transition: var(--dc-heading-transition);
}

.dc-heading-block__heading,
.dc-heading-block__subheading {
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  color: inherit;
}

/* Desktop — default */
.dc-heading-block__heading {
  font-family: 'DC Sans Condensed', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 22.299999px;
  line-height: 22px;
  letter-spacing: 1px;
  margin-top: 0px;
}

.dc-heading-block__subheading {
  font-family: 'DC Sans Condensed', sans-serif;
  font-style: normal;
  font-weight: 450;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 1.3px;
  margin-top: 0.193626px;
}

/* Optional per-instance italics — controlled by data attributes in dc-heading.js */
.dc-heading-block__heading.is-italic,
.dc-heading-block__subheading.is-italic {
  font-style: italic;
}

/* Adaptive color — same state classes as global interface */
.dc-heading-block.is-on-dark {
  color: var(--dc-heading-light);
}

.dc-heading-block.is-on-light {
  color: var(--dc-heading-dark);
}

.dc-heading-block.is-on-accent {
  color: var(--dc-heading-dark);
}


/* Persistent heading is navigation; subheading remains informational. */
.dc-heading-block--persistent .dc-heading-block__heading[role="link"] {
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .dc-heading-block.is-on-dark .dc-heading-block__heading[role="link"]:hover,
  .dc-heading-block.is-on-light .dc-heading-block__heading[role="link"]:hover {
    color: var(--dc-heading-accent);
  }

  .dc-heading-block.is-on-accent .dc-heading-block__heading[role="link"]:hover {
    color: var(--dc-heading-light);
  }
}

@media (hover: none), (pointer: coarse) {
  .dc-heading-block.is-on-dark .dc-heading-block__heading[role="link"]:active,
  .dc-heading-block.is-on-light .dc-heading-block__heading[role="link"]:active {
    color: var(--dc-heading-accent);
  }

  .dc-heading-block.is-on-accent .dc-heading-block__heading[role="link"]:active {
    color: var(--dc-heading-light);
  }
}

/* Tablet — applied by dc-heading.js */
.dc-heading-block.dc-layout-tablet {
  text-align: left;
}

.dc-heading-block.dc-layout-tablet .dc-heading-block__heading {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 1.6px;
  margin-top: 0px;
}

.dc-heading-block.dc-layout-tablet .dc-heading-block__subheading {
  font-size: 11px;
  line-height: 11px;
  letter-spacing: 1.6px;
  margin-top: -2px;
}

/* Mobile — applied by dc-heading.js */
.dc-heading-block.dc-layout-mobile {
  text-align: right;
}

.dc-heading-block.dc-layout-mobile .dc-heading-block__heading {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 1.6px;
  margin-top: 0px;
}

.dc-heading-block.dc-layout-mobile .dc-heading-block__subheading {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 1.6px;
  margin-top: 0.5px;
}

/* ReadyMag stacked-page state marker */
.dc-heading-page-state {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


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

   When mounted into #dc-ui-heading, the persistent heading
   no longer owns any fixed viewport geometry. The header
   band centers it vertically.
   ========================================================= */

#dc-ui-heading .dc-heading-block--persistent {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  padding: 0;
}

/*
   Desktop/tablet are left-aligned within the header middle slot.
   Existing mobile text-align:right remains controlled by the
   canonical dc-layout-mobile heading rule.
*/
#dc-ui-heading .dc-heading-block--persistent:not(.dc-layout-mobile) {
  text-align: left;
}

#dc-ui-heading .dc-heading-block--persistent.dc-layout-mobile {
  margin-left: auto;
  text-align: right;
}


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

   dc-heading.js now applies exactly one of:
   .dc-layout-desktop
   .dc-layout-tablet
   .dc-layout-mobile

   from data-dc-interface-layout.

   Window width does not select heading presentation.
   ========================================================= */


/* =========================================================
   REFERENCE-CANVAS TYPE SCALE — TEST v4

   Typography family never changes because of width.
   The approved typography for the locked family grows
   continuously from its 1.0 reference canvas.
   ========================================================= */

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(22.299999px * var(--dc-interface-scale, 1));
  line-height: calc(22px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(13px * var(--dc-interface-scale, 1));
  line-height: calc(13px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.3px * var(--dc-interface-scale, 1));
  margin-top: calc(0.193626px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(15px * var(--dc-interface-scale, 1));
  line-height: calc(22px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(11px * var(--dc-interface-scale, 1));
  line-height: calc(11px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
  margin-top: calc(-2px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(16px * var(--dc-interface-scale, 1));
  line-height: calc(16px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(12px * var(--dc-interface-scale, 1));
  line-height: calc(12px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
  margin-top: calc(0.5px * var(--dc-interface-scale, 1));
}


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

   Family comes from dc-header.js and never changes afterward.
   Type scales continuously within that family.
   Entire heading/subheading block remains vertically centered
   by the integrated #dc-ui-heading slot.
   ========================================================= */

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(22.299999px * var(--dc-interface-scale, 1));
  line-height: calc(22px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(13px * var(--dc-interface-scale, 1));
  line-height: calc(13px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.3px * var(--dc-interface-scale, 1));
  margin-top: calc(0.193626px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(15px * var(--dc-interface-scale, 1));
  line-height: calc(22px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(11px * var(--dc-interface-scale, 1));
  line-height: calc(11px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
  margin-top: calc(-2px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(16px * var(--dc-interface-scale, 1));
  line-height: calc(16px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(12px * var(--dc-interface-scale, 1));
  line-height: calc(12px * var(--dc-interface-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-interface-scale, 1));
  margin-top: calc(0.5px * var(--dc-interface-scale, 1));
}


/* =========================================================
   ELEMENT SCALE — CANONICAL v6

   Heading typography follows --dc-element-scale, not rail scale.
   Therefore desktop heading:
   - stays at reference size above 1024
   - shrinks from 1024 to 768
   - freezes below the 768 desktop floor

   Placement still follows the growing/shrinking rails.
   ========================================================= */

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(22.299999px * var(--dc-element-scale, 1));
  line-height: calc(22px * var(--dc-element-scale, 1));
  letter-spacing: calc(1px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-desktop
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(13px * var(--dc-element-scale, 1));
  line-height: calc(13px * var(--dc-element-scale, 1));
  letter-spacing: calc(1.3px * var(--dc-element-scale, 1));
  margin-top: calc(0.193626px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(15px * var(--dc-element-scale, 1));
  line-height: calc(22px * var(--dc-element-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-tablet
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(11px * var(--dc-element-scale, 1));
  line-height: calc(11px * var(--dc-element-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-element-scale, 1));
  margin-top: calc(-2px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__heading {
  font-size: calc(16px * var(--dc-element-scale, 1));
  line-height: calc(16px * var(--dc-element-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-element-scale, 1));
}

#dc-global-interface.dc-interface-layout-mobile
#dc-ui-heading .dc-heading-block__subheading {
  font-size: calc(12px * var(--dc-element-scale, 1));
  line-height: calc(12px * var(--dc-element-scale, 1));
  letter-spacing: calc(1.6px * var(--dc-element-scale, 1));
  margin-top: calc(0.5px * var(--dc-element-scale, 1));
}