@font-face { font-family: "WWB Fraunces"; src: url(fonts/wwb-fraunces-roman.woff2) format("woff2"); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "WWB Fraunces"; src: url(fonts/wwb-fraunces-italic.woff2) format("woff2"); font-style: italic; font-weight: 300 700; font-display: swap; }
@font-face { font-family: "WWB Hanken"; src: url(fonts/wwb-hanken-roman.woff2) format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

/* Clean white canvas, the way Macy's editorial pages are set */
html, html body { background: #ffffff !important; }
html { scroll-behavior: smooth; }

.rte .wwb {
  --red: #c8102e;
  --red-deep: #a10d25;
  --blush: #fcf1ef;
  --blush-line: #f1d5d3;
  --ink: #1f1416;
  --ink-soft: #5e4b4e;
  --rule: rgba(31, 20, 22, .28);
  --serif: "WWB Fraunces", "Fraunces", Georgia, serif;
  --sans: "WWB Hanken", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 3vw, 40px);
  --wrap: min(1188px, calc(100vw - 2 * var(--gutter)));
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0 0 clamp(64px, 7vw, 104px);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.rte .wwb * { box-sizing: border-box; }
.rte .wwb ::selection { background: var(--red); color: #ffffff; }
.rte .wwb .wwb-panel--red ::selection { background: #ffffff; color: var(--red); }

/* Type */
.rte .wwb p { margin: 0 0 1.25em; color: var(--ink); font-family: var(--sans); font-size: 19px; font-weight: 400; line-height: 1.72; letter-spacing: -.004em; text-wrap: pretty; }
.rte .wwb h1, .rte .wwb h2 { font-family: var(--serif); font-weight: 400; font-style: normal; font-variation-settings: "SOFT" 30, "WONK" 0; letter-spacing: -.024em; text-wrap: balance; }
.rte .wwb h2 { margin: 0; color: var(--red); font-size: clamp(38px, 4.3vw, 60px); line-height: 1.06; text-align: center; }
.rte .wwb h2 em { font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 1; }
.rte .wwb .wwb-sub { max-width: 34em; margin: 14px auto 0; color: var(--ink-soft); font-size: 19px; line-height: 1.5; text-align: center; }

/* Masthead */
.rte .wwb .wwb-mast { width: var(--wrap); margin: 0 auto; padding: clamp(40px, 4.6vw, 72px) 0 clamp(26px, 2.6vw, 38px); border-bottom: 1px solid var(--rule); text-align: center; }
.rte .wwb .wwb-mast h1 { margin: 0; color: var(--ink); font-size: clamp(50px, 7.4vw, 112px); line-height: .98; }
.rte .wwb .wwb-mast h1 em { color: var(--red); font-style: italic; font-variation-settings: "SOFT" 80, "WONK" 1; }

/* Photos: square-cornered panels that span the page grid */
.rte .wwb .wwb-photo { width: var(--wrap); margin: clamp(28px, 3vw, 40px) auto 0; padding: 0; }
.rte .wwb .wwb-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2200 / 1228; margin: 0; border: 0 !important; border-radius: 0; background: #f3eeee; object-fit: cover; }
.rte .wwb .wwb-photo figcaption { margin: 0; padding: 14px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 18px; font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60, "WONK" 0; line-height: 1.4; text-align: center; text-wrap: balance; }
.rte .wwb .wwb-photo--hero { margin-top: clamp(28px, 3vw, 40px); }

/* Intro */
.rte .wwb .wwb-dek { max-width: 31em; margin: clamp(32px, 3.4vw, 48px) auto 0; padding: 0 var(--gutter); color: var(--ink); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.45; text-align: center; text-wrap: balance; }
.rte .wwb .wwb-chips { display: flex; justify-content: center; width: var(--wrap); margin: clamp(36px, 4vw, 56px) auto 0; }
.rte .wwb .wwb-chips ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 5px; border: 1px solid #e6dcdc; border-radius: 999px; list-style: none; }
.rte .wwb .wwb-chips li { margin: 0; padding: 0; list-style: none; }
.rte .wwb .wwb-chips li::before { display: none; }
.rte .wwb .wwb-chips a, .rte .wwb .wwb-chips a:visited { display: block; padding: 10px 18px; border-radius: 999px; color: var(--ink) !important; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: background-color .3s var(--ease), color .3s var(--ease); }
.rte .wwb .wwb-chips a:hover { background: var(--red); color: #ffffff !important; }
.rte .wwb .wwb-chips a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.rte .wwb .wwb-col { width: min(700px, calc(100vw - 2 * var(--gutter))); margin: 0 auto; }
.rte .wwb .wwb-intro { margin-top: clamp(56px, 6vw, 88px); }
.rte .wwb .wwb-intro .wwb-lead { font-size: 22px; line-height: 1.62; }

/* Sections */
.rte .wwb .wwb-sec { margin-top: clamp(84px, 9vw, 128px); scroll-margin-top: 120px; }
.rte .wwb .wwb-head { width: var(--wrap); margin: 0 auto clamp(30px, 3vw, 42px); }
.rte .wwb .wwb-sec > .wwb-col > p:last-child { margin-bottom: 0; }
.rte .wwb .wwb-sec .wwb-photo { margin-top: clamp(40px, 4vw, 56px); margin-bottom: clamp(40px, 4vw, 56px); }

/* Blush panel for the quote, like a Macy's promo band */
.rte .wwb .wwb-panel { width: var(--wrap); margin: clamp(84px, 9vw, 128px) auto 0; }
.rte .wwb .wwb-panel--blush { padding: clamp(56px, 6.4vw, 96px) clamp(24px, 6vw, 96px); background: var(--blush); text-align: center; }
.rte .wwb blockquote.wwb-quote { max-width: 860px; margin: 0 auto; padding: 0; border: 0 !important; background: transparent !important; }
.rte .wwb blockquote.wwb-quote p { margin: 0; color: var(--red); font-family: var(--serif); font-size: clamp(30px, 3.3vw, 46px); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 60, "WONK" 1; line-height: 1.22; letter-spacing: -.016em; text-wrap: balance; }

/* Red panels */
.rte .wwb .wwb-panel--red { padding: clamp(64px, 7vw, 104px) clamp(22px, 6vw, 96px); background: var(--red); color: #ffffff; scroll-margin-top: 120px; }
.rte .wwb .wwb-panel--red h2 { color: #ffffff; }
.rte .wwb .wwb-panel--red .wwb-sub { color: #fde3e6; }
.rte .wwb .wwb-panel--red .wwb-head { width: auto; }
.rte .wwb .wwb-panel--red p { color: #ffffff; }
.rte .wwb .wwb-panel--red .wwb-col { width: min(700px, 100%); }
.rte .wwb .wwb-panel--red .wwb-col > p:last-child { margin-bottom: 0; }
.rte .wwb .wwb-panel--red .wwb-photo { width: 100%; margin: clamp(40px, 4vw, 56px) 0; }
.rte .wwb .wwb-panel--red .wwb-photo figcaption { color: #fde3e6; }

/* Two-up photo grid */
.rte .wwb .wwb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); width: var(--wrap); margin: clamp(44px, 4.4vw, 60px) auto 0; }
.rte .wwb .wwb-grid .wwb-photo { width: auto; margin: 0; }

/* Close */
.rte .wwb .wwb-close { text-align: center; }
.rte .wwb .wwb-close h2 { font-size: clamp(44px, 5.4vw, 76px); }
.rte .wwb .wwb-close .wwb-col { margin-top: clamp(26px, 2.6vw, 36px); }
.rte .wwb .wwb-close p { color: #fff4f5; text-wrap: balance; }
.rte .wwb a.wwb-btn, .rte .wwb a.wwb-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 17px 28px 17px 32px;
  border: 0;
  border-radius: 4px;
  background: #ffffff;
  color: var(--red) !important;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: 0;
  text-decoration: none !important;
  transition: background-color .3s var(--ease), translate .3s var(--ease);
}
.rte .wwb a.wwb-btn::after {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .3s var(--ease);
}
.rte .wwb a.wwb-btn:hover { background: var(--blush); }
.rte .wwb a.wwb-btn:hover::after { translate: 4px 0; }
.rte .wwb a.wwb-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }

@media (max-width: 760px) {
  .rte .wwb p { font-size: 18px; line-height: 1.68; }
  .rte .wwb .wwb-sub { font-size: 17px; }
  .rte .wwb .wwb-intro .wwb-lead { font-size: 20px; }
  .rte .wwb .wwb-chips ul { gap: 8px; padding: 0; border: 0; border-radius: 0; }
  .rte .wwb .wwb-chips a, .rte .wwb .wwb-chips a:visited { padding: 9px 15px; border: 1px solid #e6dcdc; font-size: 14px; }
  .rte .wwb .wwb-grid { grid-template-columns: 1fr; gap: 32px; }
  .rte .wwb .wwb-photo figcaption { font-size: 16px; }
  .rte .wwb .wwb-panel--red .wwb-photo { width: calc(100% + 44px); margin-left: -22px; margin-right: -22px; }
  .rte .wwb .wwb-panel--red .wwb-photo figcaption { padding-left: 22px; padding-right: 22px; }
  .rte .wwb a.wwb-btn, .rte .wwb a.wwb-btn:visited { padding: 16px 22px 16px 26px; font-size: 17px; }
}

/* Standalone page */
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }
.rte .wwb { width: auto; margin: 0; }
.wwb-foot { padding: 28px 16px 36px; text-align: center; }
.wwb-foot p { margin: 0; color: #5e4b4e; font-family: "WWB Hanken", "Helvetica Neue", Arial, sans-serif; font-size: 14px; letter-spacing: .01em; }