/* ======================================================================
   JD Core — SITE HEADER: "the dark band"
   ----------------------------------------------------------------------
   Stephen chose option C from prototypes/header-options.html, 3 Sep 2026.

   THIS FILE REPLACES ITS OWN PREDECESSOR ENTIRELY. What was here until today
   was a set of overrides aimed at Elementor template 553 — it put the wordmark
   and nav on the condensed face and stopped Roboto rendering, and it could do
   nothing else, because the markup belonged to Elementor. The markup is now
   includes/header/template.php, so there is nothing left to outrank and every
   rule below styles this plugin's own elements.

   THE #jd FLOOR STILL APPLIES. includes/shared/scope.php puts id="jd" on
   <html>, and every selector here is prefixed "#jd " so it outranks Elementor
   and MEC. It is not defensive tidiness: Elementor's kit sets bare a, ul, li,
   button and input rules that reach straight into this header.

   COLOUR. Ochre is FIELD and RULE on paper, never ink — --jd-accent (#e0822f)
   measures 2.84:1 on white and fails at any opacity, so where ochre must be
   read as words on paper it is --jd-accent-ink (#8a4a17, 6.83:1). ON NAVY the
   reverse holds: --jd-accent-ink is 2.27:1 there, so the band uses full accent.
   No literal colours; every value is a --jd-* token.

   WHY A DARK BAND AT ALL. DESIGN.md's direction is that navy is the INK, not
   the ground, and that density arrives "through apparatus, rules, panels and
   ONE DARK OBJECT rather than by inverting the page". This spends that
   allowance on the header. The footer is already navy, so the site gains a top
   and a bottom that agree, and nothing between them inverts.
   ====================================================================== */

/* ===== shell ========================================================== */

#jd .jd-hdr{
	position:fixed;
	top:0; left:0; right:0;
	z-index:800;
	transition:box-shadow .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr *,
#jd .jd-hdr *::before,
#jd .jd-hdr *::after{ box-sizing:border-box; }

#jd .jd-hdr-wrap{
	max-width:var(--jd-max);
	margin:0 auto;
	padding:0 32px;
	width:100%;
}

#jd .jd-hdr-band{
	background:var(--jd-navy);
	transition:background .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr-band > .jd-hdr-wrap{
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:nowrap;
	min-height:84px;
	transition:min-height .26s cubic-bezier(.22,.61,.36,1);
}

/* The ochre rule closing the band. 2px, and it is the only thing separating
   navy from paper — without it the band's bottom edge and the page's top edge
   are two flat colours meeting, which reads as a rendering fault rather than
   as a join. */
#jd .jd-hdr-rule{ height:2px; background:var(--jd-accent); }

/* ===== the mark ======================================================
   The roundel Stephen supplied on 3 Sep 2026, replacing the mandala site logo.
   It is a finished medallion, so nothing crops or masks it.

   THE FIT IS MEASURED. Scanning the alpha of the 300px file, the artwork
   occupies x 7-291 and y 6-292: a 285x287 circle inside a 300px square with
   fully transparent corners. Scaling to 300/285 = 105.26% puts the ring's
   outer edge exactly on the container edge.

   NO overflow:hidden, DELIBERATELY. The corners are transparent so there is
   nothing to clip, and clipping at exactly the ring's outer edge would let
   antialiasing nibble it. border-radius stays only so the hairline below draws
   a circle rather than a square.

   THE HAIRLINE IS NOT DECORATION. The mark is black and the band is
   --jd-navy: that is the lowest-contrast edge anywhere in this header, and at
   36px the medallion loses its outline into the band without it.
   ==================================================================== */

#jd .jd-hdr-mark{
	--jd-mark:46px;
	--jd-mark-fit:105.26%;
	flex:0 0 auto;
	position:relative;
	display:block;
	width:var(--jd-mark);
	height:var(--jd-mark);
	border-radius:50%;
	box-shadow:0 0 0 1px var(--jd-on-navy-rule);
	transition:width .26s cubic-bezier(.22,.61,.36,1),
	           height .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr-mark img{
	position:absolute;
	width:var(--jd-mark-fit);
	height:var(--jd-mark-fit);
	max-width:none;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	display:block;
}

/* ===== the wordmark ==================================================
   Uppercase because the condensed face is drawn for it and because a wordmark
   is a sign, not a sentence.

   Near-zero tracking, against the -5px the Elementor widget used to set. Big
   Shoulders is already tight; negative tracking on a condensed face collides
   the verticals into a picket fence.

   THE DOT IS OCHRE, and that is the sheet's own grammar rather than a
   flourish: the home page's dossier bar already sets "Jungian.Directory" with
   the stop in accent. The header saying it the same way is what makes the two
   read as one publication.

   --jd-fs-wordmark IS DELIBERATELY NOT USED. That token is
   clamp(18px,2.9px + 4.24vw,64px), drawn on 2 Sep for a wordmark sitting ALONE
   on its own line, and its 64px ceiling is what collided with the search field
   in the first place. Here the wordmark shares its line with the whole nav, so
   the ceiling has to come down. See --jd-fs-wordmark-line in tokens.css.
   ==================================================================== */

#jd .jd-hdr-brand{
	display:flex;
	align-items:center;
	gap:13px;
	flex:0 0 auto;
	text-decoration:none;
}
#jd .jd-hdr-word{
	font-family:var(--jd-font-display);
	font-weight:700;
	font-size:var(--jd-fs-wordmark-line);
	line-height:.86;
	letter-spacing:.005em;
	text-transform:uppercase;
	color:var(--jd-on-navy);
	white-space:nowrap;
	transition:font-size .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr-word i{ font-style:normal; color:var(--jd-accent); }

/* ===== the primary nav ===============================================
   Tracked at --jd-ls-sign and set uppercase so the nav reads as the same
   apparatus as the section labels below it rather than as a row of words.
   19px looks large next to the 17px it replaces and is not: condensed sets
   narrower at equal size, and at 17px the row read visibly smaller than the
   Roboto it was matching.

   THE CURRENT ITEM IS MARKED BY A RULE, NOT BY COLOUR. Ochre type fails
   contrast at any opacity on paper; ochre as a 2px rule under white type is
   the same signal and passes, because the contrast doing the work is the type.

   SELECTORS ARE WORDPRESS'S OWN CLASSES. wp_nav_menu emits menu-item,
   menu-item-has-children, current-menu-item and sub-menu, so there is no
   Walker: a Walker would be a hundred lines to rename classes that already say
   what they mean, and one more thing to keep in step with core.
   ==================================================================== */

#jd .jd-hdr-navwrap{ margin-left:auto; min-width:0; }

#jd ul.jd-hdr-nav{
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:nowrap;
	margin:0;
	padding:0;
	list-style:none;
}
#jd ul.jd-hdr-nav > li{ position:relative; margin:0; padding:0; }

#jd ul.jd-hdr-nav > li > a{
	display:flex;
	align-items:center;
	gap:6px;
	font-family:var(--jd-font-display);
	font-size:var(--jd-fs-nav);
	font-weight:600;
	line-height:1.2;
	letter-spacing:var(--jd-ls-sign);
	text-transform:uppercase;
	color:var(--jd-on-navy);
	white-space:nowrap;
	padding:9px 0 7px;
	border-bottom:2px solid transparent;
	text-decoration:none;
	transition:border-color .16s ease;
}
#jd ul.jd-hdr-nav > li > a:hover,
#jd ul.jd-hdr-nav > li.current-menu-item > a,
#jd ul.jd-hdr-nav > li.current-menu-ancestor > a,
#jd ul.jd-hdr-nav > li.current-menu-parent > a{
	border-bottom-color:var(--jd-accent);
	color:var(--jd-on-navy);
}
#jd ul.jd-hdr-nav > li.menu-item-has-children > a::after{
	content:"";
	width:5px; height:5px;
	margin-top:-3px;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:rotate(45deg);
	opacity:.55;
}
#jd .jd-hdr a:focus-visible,
#jd .jd-hdr button:focus-visible,
#jd .jd-hdr input:focus-visible{
	outline:2px solid var(--jd-accent);
	outline-offset:3px;
}

/* ---- the dropdown ----
   Stays in the reading sans. A submenu is a list of destinations to read, not
   a sign to be seen across the room, and condensed at 13px in a narrow panel
   is where this face starts to cost legibility rather than buy it. That rule
   is carried forward verbatim from the header.css this file replaces.

   IT IS A PANEL ON PAPER, not a navy one. The band is the dark object; a dark
   dropdown hanging off it would make two, and the panel is reading matter. */
#jd ul.jd-hdr-nav .sub-menu{
	position:absolute;
	top:100%; left:-16px;
	z-index:5;
	min-width:250px;
	margin:0;
	padding:7px 0;
	list-style:none;
	background:var(--jd-surface);
	border:1px solid var(--jd-rule);
	border-top:2px solid var(--jd-accent);
	box-shadow:var(--jd-lift);
	opacity:0;
	visibility:hidden;
	transform:translateY(-5px);
	transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
#jd ul.jd-hdr-nav > li:hover > .sub-menu,
#jd ul.jd-hdr-nav > li:focus-within > .sub-menu{
	opacity:1;
	visibility:visible;
	transform:none;
}
#jd ul.jd-hdr-nav .sub-menu a{
	display:block;
	padding:7px 18px;
	font-family:var(--jd-font-text);
	font-size:var(--jd-fs-meta);
	font-weight:600;
	line-height:1.35;
	letter-spacing:normal;
	text-transform:none;
	color:var(--jd-navy);
	text-decoration:none;
}
#jd ul.jd-hdr-nav .sub-menu a:hover{
	background:var(--jd-accent-soft);
	color:var(--jd-accent-ink);
}

/* THE THIRD LEVEL IS AN INDENTED GROUP, NOT A SECOND FLYOUT. The Main Menu is
   three deep — sixteen links live down there, including the IAAP Organisation
   Map and both Journal Articles pages — and a flyout off a flyout is unusable
   on a touchscreen and hard to hit with a mouse. So the grandchildren render
   inside the same panel, quieter and indented, with a hairline tying them to
   their parent. Nothing is dropped and nothing needs a second hover. */
#jd ul.jd-hdr-nav .sub-menu .sub-menu{
	position:static;
	opacity:1;
	visibility:visible;
	transform:none;
	min-width:0;
	margin:2px 0 6px 18px;
	padding:2px 0 2px 12px;
	border:0;
	border-left:1px solid var(--jd-rule);
	box-shadow:none;
	background:none;
}
#jd ul.jd-hdr-nav .sub-menu .sub-menu a{
	padding:5px 18px 5px 8px;
	font-size:var(--jd-fs-micro);
	font-weight:400;
	color:var(--jd-text-muted);
}
#jd ul.jd-hdr-nav .sub-menu .sub-menu a:hover{
	background:none;
	color:var(--jd-accent-ink);
	text-decoration:underline;
}

/* ===== utilities: search and sign in ================================= */

#jd .jd-hdr-util{
	display:flex;
	align-items:center;
	gap:16px;
	flex:0 0 auto;
}

#jd .jd-hdr-search{
	display:flex;
	align-items:center;
	gap:8px;
	width:140px;
	padding:4px 2px 4px 0;
	margin:0;
	border-bottom:1px solid var(--jd-on-navy-faint);
	transition:border-color .16s ease, width .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr-search:focus-within{ border-bottom-color:var(--jd-accent); }
#jd .jd-hdr-search .jd-hdr-icon{
	flex:0 0 auto;
	width:15px; height:15px;
	stroke:var(--jd-accent);
	fill:none;
	stroke-width:1.7;
}
#jd .jd-hdr-search input[type="search"]{
	flex:1 1 auto;
	min-width:0;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	background:none;
	box-shadow:none;
	font-family:var(--jd-font-text);
	font-size:var(--jd-fs-meta);
	line-height:1.4;
	color:var(--jd-on-navy);
}
#jd .jd-hdr-search input[type="search"]:focus{
	outline:none;
	background:none;
	box-shadow:none;
}
#jd .jd-hdr-search input[type="search"]::placeholder{
	color:var(--jd-on-navy-muted);
	font-family:var(--jd-font-label);
	font-size:var(--jd-fs-sign);
	letter-spacing:var(--jd-ls-sign);
	text-transform:uppercase;
	opacity:1;
}

/* THE BAND'S SIGN-IN IS A GLYPH, AND THE ROW'S ARITHMETIC IS WHY.
   Measured on the running site at 1280: the wrap gives 1116px of content
   width; the brand takes 238, the five menu labels take 571 of type before a
   single gap, and the utilities wanted 264. That is 1155 against 1116, and the
   flex row resolved it by laying the search field straight across "MEDIA &
   RESOURCES" — which is what shipped for the first ten minutes of this build.

   Something in that row has to give, and the word "Sign in" is the only item
   in it whose meaning survives as a picture. Dropping it returns 57px, which
   is more than the shortfall. The nav keeps 19px (the step tokens.css argues
   for), the search keeps a real field rather than becoming another icon, and
   the wordmark keeps its presence.

   THE ACCESSIBLE NAME IS NOT DROPPED WITH IT. aria-label on the anchor carries
   it, and the drawer's copy of the same link keeps the visible word.

   THE OTHER FIX IS STEPHEN'S, NOT MINE. "Events All" and "Media & Resources"
   are 94px and 160px of the 571 — unusually long for top-level labels. Shorten
   either in Appearance -> Menus and this row gains real slack rather than the
   10px it has now. */
#jd .jd-hdr-band .jd-hdr-sign span{
	position:absolute;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
#jd .jd-hdr-band .jd-hdr-sign{ padding:7px 9px; }

#jd .jd-hdr-sign{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:6px 14px 5px;
	border:1px solid var(--jd-on-navy-rule);
	border-radius:var(--jd-r-pill);
	font-family:var(--jd-font-label);
	font-size:var(--jd-fs-sign);
	font-weight:700;
	letter-spacing:var(--jd-ls-sign);
	text-transform:uppercase;
	color:var(--jd-on-navy);
	white-space:nowrap;
	text-decoration:none;
	transition:background .16s ease, border-color .16s ease, color .16s ease;
}
#jd .jd-hdr-sign .jd-hdr-icon{
	width:13px; height:13px;
	stroke:currentColor;
	fill:none;
	stroke-width:1.7;
}
#jd .jd-hdr-sign:hover{
	background:var(--jd-accent);
	border-color:var(--jd-accent);
	color:var(--jd-navy-dark);
}

/* ===== the burger ===================================================== */

#jd .jd-hdr-burger{
	display:none;
	position:relative;
	width:30px; height:22px;
	flex:0 0 auto;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
#jd .jd-hdr-burger span{
	position:absolute;
	left:0; right:0;
	height:2px;
	background:var(--jd-on-navy);
	transition:transform .2s ease, opacity .16s ease;
}
#jd .jd-hdr-burger span:nth-child(1){ top:2px; }
#jd .jd-hdr-burger span:nth-child(2){ top:10px; }
#jd .jd-hdr-burger span:nth-child(3){ top:18px; }
/* open: the three bars become a cross, so the control says what it will do
   next rather than repeating what it did. */
#jd .jd-hdr-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
#jd .jd-hdr-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
#jd .jd-hdr-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ===== the contents strip ============================================
   Front page only — see jd_header_shows_strip(). A claim about scale belongs
   at the front door; an inner page has already made it.

   IT DOES NOT SURVIVE THE SCROLL. Collapsed by a grid row rather than a
   height, because a height animation needs a number and this row's is content-
   derived. --jd-hdr-instant below suppresses the transition when the state is
   set rather than reached, which is the failure this design already hit once
   in the prototype: a 1fr <-> 0fr transition that starts before the track has
   been laid out can latch its interpolated pixel value and never finish.
   ==================================================================== */

#jd .jd-hdr-strip{
	display:grid;
	grid-template-rows:1fr;
	overflow:hidden;
	background:var(--jd-accent-soft);
	border-bottom:1px solid var(--jd-accent-soft-rule);
	transition:grid-template-rows .26s cubic-bezier(.22,.61,.36,1),
	           opacity .26s cubic-bezier(.22,.61,.36,1);
}
#jd .jd-hdr-strip > div{ min-height:0; }
#jd .jd-hdr-stripin{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	flex-wrap:wrap;
	padding:9px 0 8px;
}
#jd .jd-hdr-counts{
	display:flex;
	align-items:baseline;
	gap:22px;
	flex-wrap:wrap;
}
#jd .jd-hdr-counts a,
#jd .jd-hdr-counts span{
	display:inline-flex;
	align-items:baseline;
	gap:7px;
	font-family:var(--jd-font-label);
	font-size:var(--jd-fs-sign);
	font-weight:700;
	letter-spacing:var(--jd-ls-sign);
	text-transform:uppercase;
	color:var(--jd-accent-ink);
	text-decoration:none;
	border-bottom:1px solid transparent;
	padding-bottom:1px;
}
#jd .jd-hdr-counts b{ font-size:var(--jd-fs-fig-sm); color:var(--jd-navy); }
#jd .jd-hdr-counts a:hover{ border-bottom-color:var(--jd-accent); }

#jd .jd-hdr-micro{
	font-family:var(--jd-font-label);
	font-size:var(--jd-fs-sign);
	font-weight:600;
	letter-spacing:var(--jd-ls-sign);
	text-transform:uppercase;
	color:var(--jd-accent-ink-soft);
	white-space:nowrap;
}

/* ===== the drawer ===================================================== */

#jd .jd-hdr-drawer{
	background:var(--jd-navy-dark);
	border-top:1px solid var(--jd-on-navy-rule);
	max-height:calc(100vh - 60px);
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:16px 0 22px;
}
#jd .jd-hdr-drawer[hidden]{ display:none; }
#jd .jd-hdr-drawer .jd-hdr-search{ width:100%; margin-bottom:14px; }
#jd ul.jd-hdr-nav.is-drawer{
	display:block;
	border-top:1px solid var(--jd-on-navy-rule);
}
#jd ul.jd-hdr-nav.is-drawer > li{ border-bottom:1px solid var(--jd-on-navy-rule); }
#jd ul.jd-hdr-nav.is-drawer > li > a{ padding:11px 0; border-bottom:0; }
/* No chevron in the drawer. It is a disclosure affordance, and there is
   nothing to disclose: every level is already open. Leaving it in tells the
   reader to tap something that will not respond. */
#jd ul.jd-hdr-nav.is-drawer > li > a::after{ content:none; }
/* Every level is open in the drawer. A phone has the vertical room and no
   hover, and a disclosure widget per branch is three taps to reach a link that
   scrolling reaches in one. */
#jd ul.jd-hdr-nav.is-drawer .sub-menu{
	position:static;
	opacity:1;
	visibility:visible;
	transform:none;
	min-width:0;
	margin:0 0 10px 2px;
	padding:0 0 0 14px;
	background:none;
	border:0;
	border-left:1px solid var(--jd-on-navy-rule);
	box-shadow:none;
}
#jd ul.jd-hdr-nav.is-drawer .sub-menu a{
	color:var(--jd-on-navy-muted);
	padding:6px 0;
	font-size:var(--jd-fs-meta);
}
#jd ul.jd-hdr-nav.is-drawer .sub-menu a:hover{ background:none; color:var(--jd-on-navy); }
#jd ul.jd-hdr-nav.is-drawer .sub-menu .sub-menu a{ font-size:var(--jd-fs-micro); }
#jd .jd-hdr-sign.is-block{ display:inline-flex; margin-top:16px; }

/* ===== the shrunk state ==============================================
   .jd-hdr-shrunk goes on <body> past 48px of scroll — see header.js. A single
   threshold with no hysteresis is deliberate: 48px is far enough from 0 that a
   trackpad's inertial settle cannot straddle it, and a second threshold on a
   header that also animates a grid row makes the two ease curves fight at the
   boundary.
   ==================================================================== */

#jd body.jd-hdr-shrunk .jd-hdr{ box-shadow:0 6px 18px rgba(18,37,60,.16); }

#jd body.jd-hdr-shrunk .jd-hdr-band{ background:var(--jd-navy-dark); }
#jd body.jd-hdr-shrunk .jd-hdr-band > .jd-hdr-wrap{ min-height:58px; }
#jd body.jd-hdr-shrunk .jd-hdr-mark{ --jd-mark:36px; }
#jd body.jd-hdr-shrunk .jd-hdr-word{ font-size:var(--jd-fs-wordmark-mini); }
#jd body.jd-hdr-shrunk .jd-hdr-strip{ grid-template-rows:0fr; opacity:0; border-bottom-color:transparent; }

/* The sign-in button sheds its label when the header shrinks. Measured on the
   prototype at 1280: name 172 + section slug 129 + nav 546 + utilities 256 +
   three 22px gaps = 1169 against 1116 of content width, and the flex row
   resolved it by crushing whatever came last. Dropping the word returns 55px,
   which is the whole shortfall, and it is the right 55px to spend: a glyph the
   reader has already seen at full size, in a bar that is by then a secondary
   object. aria-label on the anchor is what keeps the accessible name. */
#jd body.jd-hdr-shrunk .jd-hdr-sign:not(.is-block) span{
	position:absolute;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
#jd body.jd-hdr-shrunk .jd-hdr-sign:not(.is-block){ padding:7px 9px; }

/* Transitions off for the frame in which a state is SET rather than reached —
   a page loading already scrolled, or the drawer forcing the band open. */
#jd body.jd-hdr-instant .jd-hdr,
#jd body.jd-hdr-instant .jd-hdr *{ transition:none !important; }

/* ===== the spacer ====================================================
   The header is fixed, so the document needs its height back. These are
   MEASURED values, not arithmetic: the band's 84px minimum plus a 2px rule
   plus the strip, or plus the strip's 1px border when there is no strip.

   SET FROM THE UNSHRUNK HEIGHT, on purpose. A fixed header that shrinks must
   not also reflow the document, or the page climbs under the reader's eye as
   they scroll.
   ==================================================================== */

#jd .jd-hdr-spacer{ height:0; }
#jd body.jd-hdr-front .jd-hdr-spacer{ height:135px; }
#jd body.jd-hdr-inner .jd-hdr-spacer{ height:86px; }

/* ===== responsive =====================================================
   THE OLD HEADER'S REAL PROBLEM AT 388px WAS NEVER TYPE SIZE. Measured 2 Sep:
   four elements — a 56px logo, the wordmark, a burger and a search box —
   shared the width, and the wordmark's own widget box was 17px wide with the
   text overflowing it by design. --jd-fs-wordmark was floored at 18px against
   that, which fixed the overflow by making the site's name small.

   Fixed here as the layout problem it is: below 1080px the nav becomes a
   drawer, and below 720px the search leaves the bar for that drawer. The
   wordmark then has the line to itself and holds 21px on a phone.
   ==================================================================== */

@media (max-width:1080px){
	#jd .jd-hdr-navwrap{ display:none; }
	#jd .jd-hdr-burger{ display:block; }
	#jd .jd-hdr-band > .jd-hdr-wrap{ min-height:72px; }
	#jd .jd-hdr-util{ margin-left:auto; }
	#jd body.jd-hdr-front .jd-hdr-spacer{ height:120px; }
	#jd body.jd-hdr-inner .jd-hdr-spacer{ height:74px; }
	#jd body.jd-hdr-shrunk .jd-hdr-band > .jd-hdr-wrap{ min-height:58px; }
}

@media (max-width:720px){
	#jd .jd-hdr-wrap{ padding:0 18px; }
	#jd .jd-hdr-band .jd-hdr-search{ display:none; }
	#jd .jd-hdr-sign:not(.is-block) span{
		position:absolute;
		width:1px; height:1px;
		padding:0; margin:-1px;
		overflow:hidden;
		clip:rect(0 0 0 0);
		white-space:nowrap;
		border:0;
	}
	#jd .jd-hdr-sign:not(.is-block){ padding:7px 9px; }
	#jd .jd-hdr-mark{ --jd-mark:40px; }
	#jd .jd-hdr-band > .jd-hdr-wrap{ min-height:64px; gap:12px; }
	/* Two figures, not four. At 390px the four wrapped to two lines and took
	   the header to 158px — half the screen above the fold, on the surface
	   where that costs most. Analysts and Countries are the pair the front
	   door is actually claiming. */
	#jd .jd-hdr-counts{ gap:16px; }
	#jd .jd-hdr-counts > :nth-child(n+3){ display:none; }
	#jd .jd-hdr-strip .jd-hdr-micro{ display:none; }
	#jd body.jd-hdr-front .jd-hdr-spacer{ height:105px; }
	#jd body.jd-hdr-inner .jd-hdr-spacer{ height:67px; }
	#jd body.jd-hdr-shrunk .jd-hdr-band > .jd-hdr-wrap{ min-height:56px; }
}

@media (prefers-reduced-motion:reduce){
	#jd .jd-hdr,
	#jd .jd-hdr *{ transition-duration:.001ms !important; }
}