/****************************
Header
****************************/

#header {
    background-color: var(--paper);
    border-bottom: 2px solid var(--ink);
}

/****************************
Meta strip
****************************/

#headerMeta {
    border-bottom: 1px solid var(--rule);
}

#headerMetaInner {
    align-items: baseline;
    display: flex;
    justify-content: flex-end;
    padding-block: 8px;
}

#headerMetaDate {
    color: var(--ink-45);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/****************************
Full masthead, homepage only
****************************/

#headerMastheadInner {
    padding-block: 24px 16px;
    text-align: center;
}

#headerMastheadWordmark {
    display: inline-block;
}

#headerMastheadWordmarkMark {
    height: auto;
    margin: 0 auto 16px;
    width: 100px;
}

/* Fluid below about 427px so the wordmark stays on one line. */
#headerMastheadWordmarkName {
    color: var(--ink);
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, calc(7.5vw - 4px), 28px);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

#headerMastheadWordmark:hover #headerMastheadWordmarkName {
    color: var(--claret);
}

#headerMastheadTagline {
    color: var(--ink-45);
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-top: 12px;
    text-transform: uppercase;
}

@media (min-width: 700px) {
    #headerMastheadWordmarkName {
        font-size: 44px;
        letter-spacing: 0.16em;
    }

    #headerMastheadWordmarkMark {
        width: 112px;
    }
}

/****************************
Nav bar
****************************/

#headerBar {
    border-top: 1px solid var(--rule);
}

#headerBarInner {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    min-height: 52px;
}

/* Compact wordmark, interior pages */
#headerBarWordmark {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    margin-right: auto;
}

#headerBarWordmarkMark {
    height: 22px;
    width: auto;
}

#headerBarWordmarkName {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

#headerBarWordmark:hover #headerBarWordmarkName {
    color: var(--claret);
}

#headerBarNav {
    display: none;
    gap: 32px;
}

/* Centred under the full masthead, left-aligned beside the compact wordmark */
#header.full #headerBarNav {
    margin-inline: auto;
}

@media (min-width: 1040px) {
    #headerBarNav {
        display: flex;
    }
}

.headerBarNavLink {
    border-bottom: 2px solid transparent;
    color: var(--ink-70);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-block: 16px;
    text-transform: uppercase;
    white-space: nowrap;
}

.headerBarNavLink:hover {
    color: var(--claret);
}

.headerBarNavLink.active {
    border-bottom-color: var(--claret);
    color: var(--ink);
}

/****************************
Actions
****************************/

#headerBarActions {
    align-items: center;
    display: none;
    gap: 20px;
}

@media (min-width: 1040px) {
    #headerBarActions {
        display: flex;
    }
}

#headerBarActionsNewsletter {
    white-space: nowrap;
}

/****************************
Mobile toggle
****************************/

#headerToggle {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    height: 44px;
    margin-left: auto;
    margin-right: -9px;
    padding: 0;
    place-items: center;
    width: 44px;
}

@media (min-width: 1040px) {
    #headerToggle {
        display: none;
    }
}

#headerToggleBar {
    background-color: var(--ink);
    display: block;
    height: 1.5px;
    position: relative;
    width: 26px;
}

#headerToggleBar::before,
#headerToggleBar::after {
    background-color: var(--ink);
    content: "";
    height: 1.5px;
    left: 0;
    position: absolute;
    transition: top 140ms ease, transform 140ms ease;
    width: 100%;
}

#headerToggleBar::before {
    top: -7px;
}

#headerToggleBar::after {
    top: 7px;
}

#headerToggle.active #headerToggleBar {
    background-color: transparent;
}

#headerToggle.active #headerToggleBar::before {
    top: 0;
    transform: rotate(45deg);
}

#headerToggle.active #headerToggleBar::after {
    top: 0;
    transform: rotate(-45deg);
}

/****************************
Mobile menu, full screen takeover
****************************/

#headerMenu {
    background-color: var(--paper);
    border: 0;
    height: 100dvh;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
    top: 0;
    width: 100vw;
}

/* No visible backdrop: the dialog covers the viewport. */
#headerMenu::backdrop {
    background-color: var(--paper);
}

#headerMenuInner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#headerMenuHead {
    align-items: center;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    min-height: 52px;
}

#headerMenuHeadWordmark {
    align-items: center;
    display: flex;
    gap: 12px;
}

#headerMenuHeadWordmarkMark {
    height: 22px;
    width: auto;
}

#headerMenuHeadWordmarkName {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Same 44x44 target and same optical pull as #headerToggle, which this sits on top of when the menu is open. */
#headerMenuHeadClose {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    height: 44px;
    margin-right: -9px;
    padding: 0;
    place-items: center;
    width: 44px;
}

#headerMenuHeadCloseBar {
    display: block;
    height: 1.5px;
    position: relative;
    width: 26px;
}

#headerMenuHeadCloseBar::before,
#headerMenuHeadCloseBar::after {
    background-color: var(--ink);
    content: "";
    height: 1.5px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#headerMenuHeadCloseBar::before {
    transform: rotate(45deg);
}

#headerMenuHeadCloseBar::after {
    transform: rotate(-45deg);
}

/* The nav takes the free height and the links sit at the top of it. */
#headerMenuNav {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    padding-block: 16px;
}

.headerMenuNavLink {
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 28px;
    padding-block: 20px;
}

.headerMenuNavLink:hover {
    color: var(--claret);
}

/* Marks the current page the way the desktop bar does. */
.headerMenuNavLink.active {
    border-left: 2px solid var(--claret);
    padding-left: 16px;
}

#headerMenuFoot {
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
    padding-block: 24px;
}

#headerMenuFootNewsletter {
    display: block;
    padding-block: 16px;
}

@media (min-width: 1040px) {
    #headerMenu[open] {
        display: none;
    }
}