html[data-theme="executive"] {
  --theme-page: #edf2f7;
  --theme-surface: #ffffff;
  --theme-text: #172b3e;
  --theme-secondary: #465a6d;
  --theme-accent: #254f78;
  --theme-on-accent: #ffffff;
  --theme-border: #a9bacb;
  --theme-radius: 8px;
  --theme-display: Arial, sans-serif;
}

html[data-theme="midnight"] {
  --theme-page: #101820;
  --theme-surface: #17232f;
  --theme-text: #ecf2f7;
  --theme-secondary: #bdcbd8;
  --theme-accent: #a7e0cd;
  --theme-on-accent: #102923;
  --theme-border: #516b80;
  --theme-radius: 18px;
  --theme-display: Arial, sans-serif;
}

html[data-theme="editorial"] {
  --theme-page: #f3efe6;
  --theme-surface: #fffdf8;
  --theme-text: #302a24;
  --theme-secondary: #625446;
  --theme-accent: #803d2b;
  --theme-on-accent: #fffdf8;
  --theme-border: #b6a38a;
  --theme-radius: 3px;
  --theme-display: Georgia, serif;
}

/* Apply theme foundations to the public homepage, hiring profile and store. */
@media screen {
  html[data-theme] body:is(.immersive-home, .product-store) {
    background: var(--theme-page);
    color: var(--theme-text);
  }

  html[data-theme] :is(.review-opening .review-hiring, .review-opening .review-product,
    .portfolio-hub .hiring-brief, .portfolio-hub .portfolio-project, .product-store .product-spotlight) {
    --jf-text: var(--theme-text);
    --jf-secondary: var(--theme-secondary);
    --jf-accent: var(--theme-accent);
    --jf-on-accent: var(--theme-on-accent);
    --jf-border: var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text);
    border-color: var(--theme-border);
    border-radius: var(--theme-radius);
  }

  html[data-theme] body.jf-modern-shell :is(.review-person h1, .review-opening .review-product h2,
    #portfolio-title, .product-store .product-story h1) {
    font-family: var(--theme-display) !important;
    color: var(--theme-text);
  }

  html[data-theme="executive"] :is(.review-opening .review-hiring, .portfolio-hub .hiring-brief) {
    border-inline-start: 4px solid var(--theme-accent);
  }

  html[data-theme="midnight"] :is(.review-opening .review-hiring, .portfolio-hub .hiring-brief,
    .product-store .product-spotlight) {
    background: radial-gradient(ellipse at top right, #244052, var(--theme-surface) 66%) var(--theme-surface);
    box-shadow: 0 12px 34px #060c1455;
  }

  html[data-theme="editorial"] :is(.review-opening .review-hiring, .portfolio-hub .hiring-brief,
    .product-store .product-spotlight) {
    border-block-start: 4px double var(--theme-accent);
  }

  html[data-theme="editorial"] :is(#portfolio-title, .review-person h1, .product-store .product-story h1) {
    font-weight: 400;
    letter-spacing: -.035em;
  }
}


@media screen {
  html[data-theme] body.jf-modern-shell :is(.review-actions, .product-buy-actions) .button {
    border-radius: var(--theme-radius) !important;
    text-align: center;
  }
  .product-store .product-buy-actions { align-items: stretch; }
}
@media screen and (max-width: 540px) {
  .product-store .product-buy-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}

/* The volume feature and collection share the same storefront grid. */
@media screen {
  html[data-theme] .product-store #product-main {
    width: min(76rem, calc(100% - clamp(2rem, 7vw, 5rem)));
  }

  html[data-theme] .product-store #selected-issue {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-block: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.25rem, 4vw, 3.5rem);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--theme-border);
  }

  html[data-theme] .product-store #selected-issue .product-story h1 {
    font-size: clamp(2rem, 4.3vw, 4.25rem);
    overflow-wrap: anywhere;
  }

  html[data-theme] .product-store #selected-issue .product-display {
    box-sizing: border-box;
    width: 100%;
    max-width: 31rem;
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.25rem);
  }

  .product-store .product-story select { max-width: 100%; }
  .product-store .product-buy-actions .button { max-width: 100%; white-space: normal; }

  html[data-theme] .product-store #editions {
    box-sizing: border-box;
    max-width: none;
    margin-top: 0;
  }
}

@media screen and (max-width: 820px) {
  html[data-theme] .product-store #selected-issue {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The opening panels share a rhythm with the three destination links. */
@media screen {
  html:not([data-audience="employer"]) body.immersive-home .review-opening {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    padding: clamp(1.25rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) 0;
    margin-bottom: clamp(1rem, 2.4vw, 2rem);
  }

  html[data-theme] body.immersive-home .review-opening .review-hiring,
  html[data-theme] body.immersive-home .review-opening .review-product {
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2.5rem);
  }

  html[data-theme] body.immersive-home .review-opening .review-product {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    border: 1px solid var(--theme-border);
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .review-opening .review-product .review-product-copy { padding: 0 !important; }
  .review-opening .review-person { min-width: 0; }
  .review-opening .review-person img { flex-shrink: 0; }
  .review-opening .review-person h1 { font-size: clamp(2rem, 4vw, 3.6rem); }
  .review-opening .review-art { box-sizing: border-box; max-width: 100%; }

  html body.immersive-home .explore-paths {
    width: min(calc(100% - clamp(2rem, 6vw, 4rem)), 76rem);
    margin-inline: auto;
    margin-top: 0;
  }
}

@media screen and (min-width: 761px) {
  html[data-theme] body.immersive-home .review-opening .review-hiring {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
  }
  .review-opening .review-hiring .review-person { grid-column: 1; grid-row: 1 / 4; }
  .review-opening .review-hiring .hiring-actions {
    grid-column: 2;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 760px) {
  html[data-theme] body.immersive-home .review-opening .review-product {
    grid-template-columns: minmax(0, 1fr);
  }
  .review-opening .review-product .review-art { width: 100%; }
}

@media screen and (max-width: 420px) {
  .review-opening .review-hiring .hiring-actions { grid-template-columns: minmax(0, 1fr); }
}

/* One content width for the homepage, including the sections below the fold. */
@media screen {
  html body.immersive-home #main {
    --home-gutter: clamp(1rem, 3vw, 2rem);
    --home-section-width: min(76rem, calc(100% - 2 * var(--home-gutter)));
    --home-section-gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  html body.immersive-home #main > :is(.review-opening, .explore-paths,
    .review-product-details, .revenue-expertise, .portfolio-hub, .home-contact) {
    box-sizing: border-box;
    width: var(--home-section-width) !important;
    max-width: none;
    margin-inline: auto;
    margin-block-end: var(--home-section-gap);
  }

  html body.immersive-home #main > .review-opening { padding-inline: 0; }
  html body.immersive-home #main > #products::before { inset-inline: 0; }
  html body.immersive-home #main > :is(.explore-paths, .review-product-details,
    .revenue-expertise, .portfolio-hub, .home-contact) { margin-block-start: 0; }

  html[data-audience="employer"] body.immersive-home #main > .review-opening {
    display: none !important;
  }
}