/*
 * Site header: top notification bar, header, drop-down panels (megamenus) and the phone menu.
 * Wide screens show the full menu; below 1200px the menu button opens the phone menu.
 */

.site-top { position: relative; z-index: 40; }

/* Top notification bar. */
.topbar { background: var(--plum); color: var(--white); font-size: 15px; line-height: 1.5; text-align: center; padding: 10px var(--gutter); }
.topbar-in a { margin-left: 4px; color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 2px 0; }
.topbar-in a:hover { color: var(--white); }

/* Header bar. */
.masthead { position: relative; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.hd-in { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; }
.hd-logo { display: block; flex: none; text-decoration: none; }
.hd-logo img { height: 54px; width: auto; }
.hd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hd-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--plum); font-family: var(--caps); font-size: 14px; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hd-top:hover { color: var(--brown); border-bottom-color: rgba(249, 192, 73, .6); }
.hd-top svg { flex: none; }
.hd-item.is-cur > .hd-top, .hd-item.is-open > .hd-top, .hd-top[aria-expanded="true"] { border-bottom-color: var(--gold); }
.hd-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.hd-act { display: flex; align-items: center; gap: 10px; flex: none; }
.hd-join { min-height: 46px; padding: 0 22px; font-size: 14px; white-space: nowrap; }
.hd-bag, .hd-burger { position: relative; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--plum); flex: none; }
.hd-bag { border: 1.5px solid var(--grey); }
.hd-bag:hover { border-color: var(--plum); color: var(--plum); }
.hd-bag-n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--gold); color: var(--brown); font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }
.hd-burger { display: none; border: 1.5px solid var(--plum); }
.hd-burger:hover { background: var(--plum); color: var(--white); }

/* Drop-down panels. */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 24px 48px rgba(86, 50, 57, .18); max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.mega-in { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 28px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 32px; }
.mega-intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mega-h { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--plum); }
.mega-h em { font-weight: 300; }
.mega-t { font-size: 17px; line-height: 1.6; }
.mega-more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--plum); }
.mega-more:hover { color: var(--brown); }
.mega-card { min-width: 0; display: flex; flex-direction: column; gap: 10px; color: var(--brown); text-decoration: none; }
.mega-card:hover { color: var(--brown); }
.mega-card:hover .mega-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.mega-card.has-accent { gap: 12px; padding-top: 14px; border-top: 3px solid var(--accent, var(--plum)); }
.mega-ph { display: block; overflow: hidden; height: 160px; border-radius: 14px; background: var(--plum-7); }
.mega-ph.is-portrait { height: 190px; border-radius: var(--r-rect); }
.mega-ph img { width: 100%; height: 100%; object-fit: cover; }
.mega-ph.is-portrait img { object-position: center 30%; }
.mega-logo { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.mega-logo img { height: 36px; width: auto; }
.mega-name { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--plum); }
.mega-desc { font-size: 15px; line-height: 1.55; }
.nav-soon { display: inline-block; margin-left: 6px; font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); vertical-align: middle; }
.mega-list { min-width: 0; display: flex; flex-direction: column; }
.mega-list .eyebrow { margin-bottom: 6px; }
.mega-list ul { list-style: none; margin: 0; padding: 0; }
.mega-list li + li { border-top: 1px solid var(--line); }
.mega-list a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--plum); text-decoration: none; }
.mega-list a:hover { color: var(--brown); text-decoration: underline; text-decoration-thickness: 1px; }
.mega-box { min-width: 0; display: flex; flex-direction: column; gap: 10px; align-self: start; padding: 18px; border-radius: 18px; background: var(--cream); }
.mega-box .eyebrow { margin-top: 10px; }
.mega-box .eyebrow:first-child { margin-top: 0; }
.mega-feat { display: flex; gap: 14px; align-items: center; color: var(--plum); text-decoration: none; }
.mega-feat img { width: 64px; height: 80px; object-fit: cover; border-radius: 6px; flex: none; }
.mega-feat-t { display: flex; flex-direction: column; line-height: 1.25; }
.mega-kicker { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.mega-feat-n { font-family: var(--serif); font-size: 19px; }
.mega-feat:hover .mega-feat-n { text-decoration: underline; text-decoration-thickness: 1px; }
.mega-blink { display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--plum); text-decoration: none; }
.mega-blink:hover { text-decoration: underline; }
.mega-blink svg { flex: none; }
.mega-foot { display: flex; justify-content: center; padding: 0 var(--gutter) 20px; }
.mega-x { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--grey); background: transparent; color: var(--plum); font-size: 14px; font-weight: 600; cursor: pointer; }
.mega-x:hover { border-color: var(--plum); background: var(--plum-7); }
.hd-scrim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: -1; background: rgba(86, 50, 57, .42); }
.mega { z-index: 1; }

/* Without the menu script, panels still open on hover and keyboard focus. */
.no-js .hd-item:hover > .mega[hidden], .no-js .hd-item:focus-within > .mega[hidden] { display: block !important; }

/* Phone menu: a full-screen panel from the right. */
.mm { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--brown); overflow: hidden; }
.mm::backdrop { background: rgba(86, 50, 57, .42); }
.mm[open], .no-js .mm:target { display: flex; justify-content: flex-end; z-index: 100; }
.mm-panel { width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--white); font-size: 17px; line-height: 1.5; box-shadow: -20px 0 50px rgba(86, 50, 57, .2); }
.mm-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mm-logo { display: block; }
.mm-logo img { height: 44px; width: auto; }
.mm-x { width: 44px; height: 44px; border-radius: 50%; background: var(--plum); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mm-x:hover { background: rgba(86, 50, 57, .86); color: var(--white); }
.mm-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 24px; }
.mm-list, .mm-sub ul { list-style: none; margin: 0; padding: 0; }
.mm-sec + .mm-sec { border-top: 1px solid var(--line); }
.mm-top { width: 100%; min-height: 64px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--plum); text-align: left; text-decoration: none; cursor: pointer; }
.mm-top svg { flex: none; }
.mm-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-top:hover { color: var(--brown); }
.mm-top--link { min-height: 76px; padding: 6px 0; }
.mm-top-t { display: flex; flex-direction: column; }
.mm-kicker { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.mm-cover { width: 44px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; }
.mm-sub { margin: 0 0 14px; padding: 6px 12px 12px; border-radius: 18px; background: var(--white); }
.mm-row + .mm-row, .mm-row + .mm-group { border-top: 1px solid rgba(86, 50, 57, .12); }
.mm-row a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 4px 0; color: var(--plum); text-decoration: none; }
.mm-row--thumb a { min-height: 76px; }
.mm-row a:hover .mm-row-n { text-decoration: underline; text-decoration-thickness: 1px; }
.mm-row-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mm-row-n { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; font-weight: 600; }
.mm-row-n .nav-soon { margin-left: auto; font-size: 13px; }
.mm-row-d { font-size: 15px; color: var(--brown); }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mm-ph { display: block; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 14px; background: var(--plum-7); }
.mm-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.mm-row--more a { justify-content: space-between; font-weight: 700; }
.mm-group { padding-top: 10px; }
.mm-label { font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.mm-group ul { margin: 4px 0 6px; }
.mm-group a { display: flex; align-items: center; min-height: 48px; color: var(--plum); text-decoration: none; }
.mm-group a:hover { text-decoration: underline; }
.mm-thread { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 14px; background: var(--cream); color: var(--plum); font-family: var(--caps); font-size: 13px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-decoration: none; }
.mm-thread:hover { background: rgba(249, 192, 73, .28); color: var(--plum); }
.mm-thread svg { flex: none; }
.mm-foot { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px; border-radius: 24px 24px 0 0; background: var(--plum); color: var(--white); }
.mm-foot .btn--gold { min-height: 52px; color: var(--brown); }
.mm-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; font-size: 15px; }
.mm-legal a, .mm-legal button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--white); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mm-legal a:hover, .mm-legal button:hover { color: var(--gold); }
.no-js .mm .mm-sub[hidden] { display: block !important; }
html.mm-lock, html.mm-lock body { overflow: hidden; }

/* Narrower screens: the menu button takes over from the full menu. */
@media (max-width: 1199px) {
	.hd-nav, .hd-join { display: none; }
	.hd-burger { display: inline-flex; }
	.hd-logo img { height: 44px; }
	.topbar { font-size: 14px; }
}
@media (min-width: 1200px) {
	.mm { display: none !important; }
}
@media (max-width: 1320px) and (min-width: 1200px) {
	.hd-in { gap: 12px 12px; }
	.hd-top { padding: 0 8px; letter-spacing: .08em; }
	.hd-join { padding: 0 16px; }
}

/* Motion: panels drop 10px into place and their links fade in; the phone menu slides in from the right. */
@keyframes zzPanelIn { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes zzSpinIn { from { opacity: 0; rotate: -90deg; scale: .6; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes zzBarUp { from { translate: 0 100%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
	.hd-top svg, .mm-top svg { transition: transform .3s var(--ease); }
	.mega:not([hidden]) { animation: zzDrop .32s var(--ease) both; }
	.mega:not([hidden]) a { animation: zzFade .45s var(--ease) .08s both; }
	.hd-scrim:not([hidden]) { animation: zzFade .3s ease both; }
	.mega-ph img, .mm-ph img { transition: scale .8s var(--ease); }
	.mega-card:hover .mega-ph img { scale: 1.05; }
	.mm-row a:hover .mm-ph img { scale: 1.08; }
	.hd-burger path { transition: translate .3s var(--ease); }
	.hd-burger:hover path:first-child { translate: 0 -2px; }
	.hd-burger:hover path:last-child { translate: 0 2px; }

	.mm[open] .mm-panel { animation: zzPanelIn .45s var(--ease) both; }
	.mm[open]::backdrop { animation: zzFade .3s ease both; }
	.mm[open] .mm-logo { animation: zzFade .5s ease .1s both; }
	.mm[open] .mm-x { animation: zzSpinIn .5s var(--ease) .15s both; }
	.mm-x svg { transition: rotate .35s var(--ease); }
	.mm-x:hover svg { rotate: 90deg; }
	.mm[open] .mm-list > li { animation: zzRise .5s var(--ease) both; }
	.mm[open] .mm-list > li:nth-child(1) { animation-delay: .16s; }
	.mm[open] .mm-list > li:nth-child(2) { animation-delay: .22s; }
	.mm[open] .mm-list > li:nth-child(3) { animation-delay: .28s; }
	.mm[open] .mm-list > li:nth-child(4) { animation-delay: .34s; }
	.mm[open] .mm-list > li:nth-child(5) { animation-delay: .40s; }
	.mm[open] .mm-list > li:nth-child(n+6) { animation-delay: .46s; }
	.mm-top { transition: color var(--fast), padding-left .3s var(--ease); }
	.mm-top:hover { padding-left: 6px; }
	.mm-sub:not([hidden]) { animation: zzDrop .3s var(--ease) both; }
	.mm-sub:not([hidden]) > ul > li, .mm-sub:not([hidden]) > .mm-thread { animation: zzRise .42s var(--ease) both; }
	.mm-sub > ul > li:nth-child(1) { animation-delay: .06s; }
	.mm-sub > ul > li:nth-child(2) { animation-delay: .11s; }
	.mm-sub > ul > li:nth-child(3) { animation-delay: .16s; }
	.mm-sub > ul > li:nth-child(4) { animation-delay: .21s; }
	.mm-sub > ul > li:nth-child(n+5) { animation-delay: .26s; }
	.mm-sub > .mm-thread { animation-delay: .24s; }
	.mm[open] .mm-foot { animation: zzBarUp .55s var(--ease) .3s both; }
}