/*-----------------------------------------------------------------------------------*/
/*	=Colors
/*
/*	@related: base/_variables.scss, piano/_variables.scss
/*-----------------------------------------------------------------------------------*/
:root {
  --color-black: #000000;
  --color-blacklight: #2B2A2F;
  --color-white: #fff;
  --color-offwhite: #F8F8F8;
  --color-offwhite2: #F6F6F6;
  --color-offwhite3: #F5F5F5;
  --color-greylight: #E5E5E5;
  --color-greylight2: #F5F5F5;
  --color-greylight3: #797979;
  --color-red: #F73044;
  --color-bluedark: #34404D;
  --color-green: #00AA33;
  --color-purple: #3A13F3;
  --black-bg: #1F1E20;
  --bg-color-offwhite: #f8f8f8;
  --bg-color-red: #F73044;
}

/* -----------------------------------------------------------------------------------

	=SPACERS / =PADDING

----------------------------------------------------------------------------------- */
/*-----------------------------------------------------------------------------------*/
/* Piano modals
/*-----------------------------------------------------------------------------------*/
:root {
  --pno-modal-z: 300050;
}

/*-----------------------------------------------------------------------------------*/
/*
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*
/*-----------------------------------------------------------------------------------*/
:root {
  --vmarg-text: 20px;
  --vmarg-big: 33px;
  --vmarg-jumbo: 36px;
  --vmarg-mini: 13px;
}

:root {
  --trans: 70ms;
}

/* -----------------------------------------------------------------------------------

	=BREAKPOINTS
	=WIDTHS

----------------------------------------------------------------------------------- */
:root {
  --break-sm: 640px;
  --break-md: 768px;
  --break-lg: 1072px;
  --break-xl: 1240px;
  --break-xxl: 1920px;
  --break-xs-max: 639px;
  --break-sm-max: 767px;
  --break-md-max: 1071px;
  --break-lg-max: 1239px;
  --break-xl-max: 1919px;
}

/*
$responsive-variants: (
	"":  "",
	sm:  "\@sm",
	md:  "\@md",
	lg:  "\@lg",
	xl:  "\@xl",
	xxl: "\@xxl",
) !default;

$responsive-variants-max: (
	"":  "",
	xs:  @xs,
	sm:  @sm,
	md:  @md,
	lg:  @lg,
	xl:  @xl,
) !default;
*/
/* -----------------------------------------------------------------------------------

	=CONTAINERS

----------------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------------

	=MISC.

----------------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------------

	=BRAND COLORS

----------------------------------------------------------------------------------- */
/*-----------------------------------------------------------------------------------*/
/*	=Misc.
/*-----------------------------------------------------------------------------------*/
/*
// Retina media query
@mixin retina-media-query {
	@media
		only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (min--moz-device-pixel-ratio: 2),
		only screen and (-moz-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 2/1),
		only screen and (min-device-pixel-ratio: 2),
		only screen and (min-resolution: 192dpi),
		only screen and (min-resolution: 2dppx) {
		@content;
	}
}
*/
/*-----------------------------------------------------------------------------------*/
/*	=BREAKPOINT
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*	=Clearfix
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*
/*-----------------------------------------------------------------------------------*/
@keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-moz-keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-o-keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-ms-keyframes pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes revpulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes revpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@-moz-keyframes revpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@-o-keyframes revpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@-ms-keyframes revpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/*
@mixin IBlock(){
	display: -moz-inline-stack;
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: middle;
}

@mixin IBlockImportant(){ // Or do this: .IBlock() !important;
	display: -moz-inline-stack !important;
	display: inline-block !important;
	zoom: 1 !important;
	*display: inline !important;
	vertical-align: top;
}
*/
/*-----------------------------------------------------------------------------------*/
/*	FONT =FAMILIES
/*-----------------------------------------------------------------------------------*/
/*
@mixin AktivBold() {
	// font-family: aktiv-grotesk, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-family: "Aktiv Grotesk", Arial, sans-serif;
	font-weight: 700;
}
*/
/*-----------------------------------------------------------------------------------*/
/*	=vertMarg
/*-----------------------------------------------------------------------------------*/
blockquote,
.text,
p,
.p,
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--vmarg-text);
}

* + blockquote,
* + .text,
* + p,
* + .p,
* + ul,
* + ol {
  margin-top: var(--vmarg-text);
}

.rt li {
  margin-top: calc(var(--vmarg-text) * 0.5);
}

.rt li:first-child {
  margin-top: 0;
}

/*
.row>*+.text {
	margin-top: 0;
}
*/
blockquote:last-child,
.text:last-child,
.p:last-child,
p:last-child, ul:last-child, ol:last-child {
  margin-bottom: 0;
}

.rt h1,
.rt h2,
.rt h3,
.rt h4,
.rt h5,
.rt h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: calc(var(--vmarg-text) + 6px);
}

.rt * + h1,
.rt * + h2,
.rt * + h3,
.rt * + h4,
.rt * + h5,
.rt * + h6 {
  margin-top: calc(var(--vmarg-text) + 20px);
}

* + .h1,
* + .h2,
* + .h3,
* + .h4,
* + .h5,
* + .h6 {
  margin-top: 7px;
}

.rt h1:last-child,
.rt h2:last-child,
.rt h3:last-child,
.rt h4:last-child,
.rt h5:last-child,
.rt h6:last-child,
.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child {
  margin-bottom: 0;
}

/*-----------------------------------------------------------------------------------*/
/*	=HEADINGS
/*-----------------------------------------------------------------------------------*/
.h1 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.h1 a {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-weight: 400;
}

.h1--xxl-70 {
  margin-top: 7px;
  margin-bottom: 12px;
  font-size: 40px;
}

.h1--mini {
  font-size: 40px;
}

.rt h2,
.h2 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
}

.rt h3,
.h3 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
}

.h3--mini {
  font-size: 20px;
  line-height: 1;
}

.h3--mini-card {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 12px;
}
.h3--mini-card a:hover {
  color: var(--color-red);
}

.rt h4,
.h4 {
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
}

.h5 {
  font-size: 18px;
  line-height: 1;
}

.h6 {
  font-size: 16px;
  line-height: 1;
}

.hlink {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 18px;
}

@media (min-width: 768px) {
  .h1 {
    font-size: 48px;
  }
  .h3--to-h1-ish {
    font-size: 36px;
  }
}
@media (min-width: 1072px) {
  .h1 {
    font-size: 40px;
  }
  .h1--xxl-70 {
    margin-bottom: calc(var(--vmarg-text) + 6px);
  }
  .hlink {
    font-size: 18px;
  }
}
@media (min-width: 1240px) {
  .h1 {
    font-size: 48px;
  }
  .h3--to-h1-ish {
    font-size: 48px;
  }
}
@media (min-width: 1920px) {
  .h1 {
    font-size: 78px;
  }
  .h1--xxl-70 {
    font-size: 70px;
  }
  .h2--jumbo {
    font-size: 46px;
  }
  .h3--jumbo {
    font-size: 32px;
  }
  .h3--to-h1-ish {
    font-size: 70px;
    line-height: 0.95;
  }
  .hlink {
    font-size: 18px;
  }
}
/*-----------------------------------------------------------------------------------*/
/*	=PARAGRAPH TEXT
/*-----------------------------------------------------------------------------------*/
/*

# mobile/tablet/desktop

## p2

	### .p2: .section--post-cards .post__author

	16/14/16

	### .p2b: .section--featvids ("see all video" link)
	### .p2b: .section--promo .featpod__link

	16/16/16

	### .p2c: .section--hero .post__author

	14/16/16


## p3

	### .p3: .briefing__date-text

	14/x/14

	### .p3: .section--promo "by subscribing"


*/
:root {
  --meta2-size: 16px;
}

.meta1 {
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
}

.meta2 {
  font-size: var(--meta2-size);
}

.meta2 {
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}

.meta3 {
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
}

.card .meta3 {
  font-size: var(--meta2-size);
}

.red-meta .meta1,
.red-meta .meta2 {
  color: var(--color-red);
}

.blue-meta .meta1,
.blue-meta .meta2 {
  color: #3A13F3;
}

.p1 {
  font-size: 18px;
}

.p2 {
  font-size: 16px;
}

.p2b {
  font-size: 16px;
}

.p2c {
  font-size: 14px;
}

.p3 {
  font-size: 14px;
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  .meta1 {
    font-size: 16px;
  }
  .p3 {
    font-size: 16px;
  }
}
@media (min-width: 1072px) {
  :root {
    --meta2-size: 14px;
  }
  .p1 {
    font-size: 16px;
  }
  .p2 {
    font-size: 14px;
  }
  .p2b {
    font-size: 16px;
  }
  .p2c {
    font-size: 16px;
  }
  .p3 {
    font-size: 14px;
  }
}
@media (min-width: 1920px) {
  :root {
    --meta2-size: 16px;
  }
  .meta1 {
    font-size: 18px;
  }
  .meta2--to-meta1 {
    font-size: 18px;
  }
  .p1 {
    font-size: 18px;
  }
  .p2 {
    font-size: 16px;
  }
  .p2b {
    font-size: 16px;
  }
  .p2c {
    font-size: 16px;
  }
  .p3 {
    font-size: 14px;
  }
}
/*-----------------------------------------------------------------------------------*/
/*	=CALLOUTS et al.
/*-----------------------------------------------------------------------------------*/
.post-author {
  font-weight: 700;
  margin-right: 34px;
}

.callout1 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
}

.callout2 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
}

.callout3 {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 38px;
  line-height: 1.07;
}

/*

	Note about SERIF CLASSES!

	If WHITE/LIGHT background, serif classes should generally be paired with:

		red-links thin-links

	If DARK background, pair with:

		uline-links

	(We may find a more elegant way to handle this in time, e.g. .dark-serif/.light-serif, but for now, it gives us the best combo of speed, code readability, and design flexibility.)

*/
.serif-body {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
}

.serif-body2 {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.64;
}

.serif-highlight {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
}

.serif-feature {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.73;
}

.serif-jumbo strong a,
.serif-feature strong a {
  font-weight: bold;
}

.serif-jumbo {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
}

.serif-jumbo2 {
  font-family: "Tiempos Text", Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .callout2 {
    font-size: 48px;
  }
}
@media (min-width: 768px) {
  .callout2 {
    font-size: 36px;
  }
}
@media (max-width: 1239px) and (min-width: 1072px) {
  .serif-body {
    font-size: 14px;
  }
}
@media (min-width: 1072px) {
  .callout2 {
    font-size: 36px;
  }
}
@media (min-width: 1920px) {
  .serif-body2 {
    font-size: 18px;
  }
  .serif-feature {
    font-size: 22px;
  }
  .serif-jumbo2,
  .serif-jumbo {
    font-size: 24px;
    line-height: 1.3;
  }
  .callout2 {
    font-size: 56px;
  }
}
/*-----------------------------------------------------------------------------------*/
/*	=Blockquote
/*-----------------------------------------------------------------------------------*/
.rt blockquote,
.rt blockquote + .quote-attr {
  padding-left: 8%;
  line-height: 1.7;
}

.rt blockquote {
  position: relative;
  padding-bottom: 21px;
  margin-top: calc(var(--vmarg-text) + 7px);
  margin-bottom: calc(var(--vmarg-text) + 7px);
}

.rt blockquote:first-child {
  margin-top: 7px;
}

.rt blockquote:last-child {
  margin-bottom: 7px;
}

.rt blockquote:before {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  height: calc(100% - 4px);
  left: 3.3%;
  border-left: 3px solid var(--color-red);
}

.rt blockquote + .quote-attr {
  margin-top: calc(var(--vmarg-text) - 3px);
  margin-bottom: calc(var(--vmarg-text) + 3px);
}

.rt blockquote + .quote-attr:last-child {
  margin-bottom: 3px;
}

.rt blockquote + .quote-attr:before {
  content: "-";
  margin-right: 5px;
}

@media (min-width: 768px) {
  .rt blockquote:before {
    left: 4.3%;
  }
}
@media (min-width: 1072px) {
  .rt blockquote,
  .rt blockquote + .quote-attr {
    padding-left: 12%;
  }
  .rt blockquote {
    padding-right: 6.8%;
  }
  .rt blockquote:before {
    left: 7.7%;
  }
}
/*-----------------------------------------------------------------------------------*/
/*	=QUOTE WIDGET
/*-----------------------------------------------------------------------------------*/
.quote-label {
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
  margin-right: 12px;
}

.quote-text {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-red);
}

.dark-area .quote-text {
  color: var(--color-white);
}

/*-----------------------------------------------------------------------------------*/
/*	=GROUPS
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*	=List
/*-----------------------------------------------------------------------------------*/
.alt-bullets {
  list-style: none;
  padding-left: 0;
}
.alt-bullets li {
  position: relative;
  padding-left: 15px;
}
.alt-bullets li:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent var(--color-black);
  border-width: 3px 6px;
  border-style: solid;
  top: 15.57px;
  left: 0;
}
.dark-area .alt-bullets li:before {
  border-color: transparent transparent transparent #fff;
}

/*-----------------------------------------------------------------------------------*/
/*	=a11y =Accessibility
/*-----------------------------------------------------------------------------------*/
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.js-focus-visible .focus-visible {
  transition-duration: 0s !important;
  outline: 3px solid var(--color-black);
  outline-color: inherit;
}

.js-focus-visible .skip-link.focus-visible {
  outline-color: var(--color-red);
}

.js-focus-visible textarea.focus-visible,
.js-focus-visible input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]).focus-visible {
  outline-style: solid;
  outline-offset: -3px;
}

.js-focus-visible a.focus-visible {
  outline-offset: 1px;
}

.js-focus-visible section.focus-visible {
  outline: none;
}

/*
html:not([lang]) body.logged-in, html[lang=""] body.logged-in {
	outline: 20px solid purple;
	outline-offset: -20px;
}
.logged-in img:not([alt]), .logged-in img[alt=""] {
	outline: 5px solid purple;
	outline-offset: -5px;
}
.logged-in canvas:not([role]), .logged-in canvas:not([aria-label]), .logged-in canvas[role=""], .logged-in canvas[aria-label=""] {
	outline: 5px solid purple;
	outline-offset: -5px;
}
*/
.alt-text-missing {
  position: relative;
  top: -18px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: red;
}

.alt-text-missing span {
  background-color: white;
  color: red;
  padding: 4px 16px;
}

.aspect-wrap .alt-text-missing {
  position: absolute;
  z-index: 10;
  top: 50%;
  margin-top: -15px;
  left: 0;
  right: 0;
  width: 100%;
}

img.no-alt-needed,
img:not([alt])[aria-hidden=true],
img[alt=""][aria-hidden=true],
[aria-hidden=true] img:not([alt]),
[aria-hidden=true] img[alt=""],
.altless-allowed img:not([alt]),
.altless-allowed img[alt=""] {
  outline: none;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--color-red);
  color: white;
  outline-color: var(--color-red);
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  text-transform: uppercase;
}

.skip-link:focus {
  /*
  // v1
  // https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; // Above WP toolbar
  */
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  /*
  // v3
  // Based on .visually-hidden
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px;
  opacity: 1;
  z-index: 100000; // Above WP toolbar
  transition: none;
  opacity: 1 !important;
  background-color: #fff;
  color: #00719f;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  */
}

.skip-link--past {
  scroll-margin-top: calc(var(--header-ht) + 20px);
}

.skip-link--past:focus {
  position: relative;
  display: inline-block;
  scroll-margin-top: calc(var(--header-ht) + 20px);
}

.skip-to-content {
  left: 5px;
  top: 5px;
  z-index: 100000;
}

/*-----------------------------------------------------------------------------------*/
/*	=Screen Reader Text
/*-----------------------------------------------------------------------------------*/
/*

	NOTE: the Wordpress convention is to use .screen-reader-text, which hides the text but becomes visible to sighted users on focus.

	https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/

	However, that's misleading (especially for devs who are new to the accessibility space) because it actually serves two discrete audiences:

	1) Screen reader users
	2) Switch or keyboard navigation users

	The needs of these two audiences happen to intersect for the primary use case for this class: the skip link at the top of the page, which is included by most Wordpress themes.

	But if you dive deeper into accessibility optimizations, you will find scenarios where they need two different things.

	For that reason, we are using the non-Wordpress convention, .visually-hidden (more often without the hyphen) instead of .screen-reader-text, and coupling that with .skip-link as-needed

*/
.screen-reader-text {
  /*
  // v1
  // https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
  border: 0;
  clip: rect(1px,1px,1px,1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute!important;
  width: 1px;
  word-wrap: normal!important;

  // v2
  // http://rachievee.com/applications-screen-reader-text-class/
  // https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
  */
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
  /*
  // v4
  // https://adrianroselli.com/2020/01/my-priority-of-methods-for-labeling-a-control.html#Hidden
  position: absolute;
  top: auto;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); // IE 6/7
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
  */
}

.nav--acct__wrap {
  position: unset !important;
  margin-top: -2px;
}

.nav--acct__wrap .icon-arrow-bottom svg {
  width: 14px;
}

.nav--acct__wrap.active .icon-arrow-bottom svg {
  transform: rotate(180deg);
}

.nav--acct__wrap .nav--acct {
  display: none;
  position: absolute;
  right: 10px;
  top: 100%;
  width: 368px;
  max-width: calc(100% - 20px);
  background-color: var(--color-white);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.29);
  top: var(--header-ht);
}

.nav--acct__wrap .nav--acct.open {
  display: block;
}

.nav--acct__wrap .nav--acct > ul {
  padding-top: 25px;
}

.nav--acct__wrap .nav--acct > ul > li {
  display: block;
  padding-right: 32px;
  padding-left: 24px;
  margin-right: 0;
  color: var(--color-black);
}

.nav--acct__wrap .nav--acct > ul .menu-item {
  margin-bottom: 12px;
}

.nav--acct__trigger-inner {
  display: block;
  position: relative;
}

.nav--acct__trigger strong {
  vertical-align: middle;
  display: inline-block;
}

.nav--acct__trigger .icon-arrow-bottom {
  position: absolute;
  width: 15px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  top: 0;
}

.nav--acct__user {
  font-family: "Founders Bold", "Arial Black", Arial Bold, Gadget, sans-serif;
  font-weight: 700;
  margin-bottom: 24px;
}

.nav--acct__user span {
  display: block;
  font-size: 18px;
}

.nav--acct__user span:last-of-type {
  color: var(--color-red);
  font-size: 14px;
}

.nav--acct__saved-articles {
  background-color: var(--color-offwhite);
  margin-top: 28px;
  padding-top: 18px;
  padding-bottom: 26px;
}

.nav--acct__saved-articles h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.nav--acct__saved-articles h3 a {
  display: block;
}

.nav--acct__saved-articles svg {
  transform: rotate(-90deg);
  width: 14px;
}

.nav--acct__saved-articles ul {
  padding-left: 0;
}

.nav--acct__saved-articles ul li {
  margin-top: 14px;
}

.nav--acct__saved-articles ul a {
  color: var(--color-red);
  font-weight: 700;
}

.nav--acct__log-out button {
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  border: 0 none;
  padding: 10px 0;
  color: var(--color-black) !important;
}

.nav--acct__log-out button:hover {
  color: var(--color-red);
}

.response-message {
  display: none;
}

.piano-watchlist__form {
  position: relative;
  display: block;
  z-index: 9;
}

.btn-watchlist--add .btn2__icon {
  margin-top: -10px;
}

.piano-watchlist__form .response-message {
  position: absolute;
  width: 100%;
}

.piano-watchlist__form .response-message p {
  font-size: 16px;
  font-family: aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 10px;
  background-color: var(--color-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.29);
}

.btn-watchlist--remove {
  padding-left: 40px;
}

.btn-watchlist--remove .btn2__icon {
  width: 20px;
  margin-top: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

.btn-watchlist--remove .btn2__icon svg {
  margin: 0;
}

@media (min-width: 1072px) {
  .nav--acct__wrap {
    margin-top: 0;
  }
  html:not(.sticky-header-active) .nav--acct__wrap .nav--acct {
    top: calc(var(--header-ht) - 12px);
  }
  .nav--acct__trigger .icon-arrow-bottom {
    top: -2px;
  }
}
@media (min-width: 1920px) {
  .nav--acct__trigger .icon-arrow-bottom {
    top: 0;
  }
}

/*# sourceMappingURL=piano-user-nav.css.map*/