/*
 * Shared composition contract for Studio header + hero previews.
 *
 * Studio headers and heroes are authored as independent JSON components. The
 * preview routes compose them directly, so this layer owns the cross-component
 * invariants: border-box sizing, shrinkable grid/flex children, safe header
 * clearance, and narrow-screen containment.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
}

body > nav[class*="-nav"] + section {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Reserve the exact fixed demo-ribbon height so hero footers are not covered. */
body:has(> .gw-demo-ribbon) > nav[class*="-nav"] + section {
  min-height: calc(100svh - var(--gw-demo-ribbon-height, 41px));
}

body > nav[class*="-nav"] + section * {
  min-inline-size: 0;
}

/*
 * Header/hero theme pairings.
 *
 * The Studio components are authored independently. Several transparent
 * headers therefore arrive with a light-page palette on a dark hero (or the
 * reverse). Keep the correction here, where the two components are composed,
 * so the source components can still be previewed independently.
 */

/* Dark wine, wood, monochrome, roast, sage, navy, teal, and green heroes. */
.sw-h7-brand,
.sw-h7-links {
  color: #f4ece6;
}

.sw-h7-logo-mark {
  background: #c39a6b;
  color: #241420;
}

.sw-h7-logo-letter {
  color: #241420;
}

.sw-h8-brand,
.sw-h8-links {
  color: #f1e8d8;
}

.sw-h14-brand,
.sw-h14-links,
.sw-h14-emergency {
  color: #fff;
}

.sw-h14-logo-mark {
  background: #fff;
  color: #0e0e0e;
}

.sw-h14-emergency {
  border-color: #fff;
}

.sw-h19-brand,
.sw-h19-links {
  color: #f6e8d2;
}

.sw-h19-logo-mark {
  background: #d9a05b;
  color: #33221a;
}

.sw-h19-emergency {
  border-color: #d9a05b;
  color: #f6e8d2;
}

.sw-h25-brand,
.sw-h25-links {
  color: #edf2ea;
}

.sw-h25-logo-mark {
  background: #edf2ea;
  color: #1f3530;
}

.sw-h28-brand,
.sw-h28-links,
.sw-h28-emergency {
  color: #f8fafd;
}

.sw-h28-logo-mark {
  background: #f8fafd;
  color: #1f3148;
}

.sw-h28-emergency {
  border-color: #f8fafd;
}

.sw-h32-brand,
.sw-h32-links {
  color: #f7f2e7;
}

.sw-h32-logo-mark {
  background: #f7f2e7;
  color: #243b53;
}

.sw-h32-emergency {
  background: #f7f2e7;
  border-color: #f7f2e7;
  color: #0f3a4a;
}

.sw-h34-brand,
.sw-h34-links {
  color: #f3ebd9;
}

.sw-h34-logo-mark {
  background: #f3ebd9;
  color: #234231;
}

.sw-h45-brand,
.sw-h45-links {
  color: #fff;
}

.sw-h47-brand,
.sw-h47-links {
  color: #f4ecdb;
}

.sw-h47-logo-mark {
  background: #f4ecdb;
  color: #143034;
}

/* The boutique header was designed for black, but its paired hero is white. */
.sw-h33-brand,
.sw-h33-links {
  color: #111;
}

.sw-h33-logo-mark {
  background: #111;
  color: #f0ead6;
}

/* Mustard needs the hero's near-black ink rather than muted brown navigation. */
.sw-h36-brand,
.sw-h36-links {
  color: #221c14;
}

/*
 * Split-cover headers cross both a flat panel and an image. Give the moving
 * navigation cluster a compact surface instead of relying on one text color
 * to work on two unrelated backgrounds.
 */
@media (min-width: 901px) {
  .sw-h20-links {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(46, 37, 27, 0.1);
    color: #3a2418;
    padding: 0.7rem 1.25rem;
  }

  .sw-h23-links {
    background: rgba(10, 8, 7, 0.92);
    border: 1px solid rgba(184, 146, 79, 0.28);
    border-radius: 999px;
    color: #f5efe0;
    padding: 0.7rem 1.25rem;
  }
}

/*
 * Magazine Cover uses the same class name for its header brand and eyebrow.
 * Restore the eyebrow's own typography and dark ink on the paper panel.
 */
.sw-h23-nav .sw-h23-brand {
  color: #161412;
}

.sw-h23-eyebrow .sw-h23-brand {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/*
 * Contrast-safe utility CTAs. Filled treatments remain readable when a
 * transparent header sits over a photograph, gradient, or very light panel.
 */
.sw-h5-emergency {
  --gw-header-cta-bg: #0a5a54;
  --gw-header-cta-fg: #fff;
  background: #0a5a54;
  border-color: #0a5a54;
  color: #fff;
}

.sw-h6-emergency {
  --gw-header-cta-bg: #963f35;
  --gw-header-cta-fg: #fff6ee;
  background: #963f35;
  border-color: #963f35;
  color: #fff6ee;
}

.sw-h13-emergency {
  --gw-header-cta-bg: #6f4f3a;
  --gw-header-cta-fg: #fff;
  background: #6f4f3a;
  border-color: #6f4f3a;
  color: #fff;
}

.sw-h14-emergency {
  --gw-header-cta-bg: #fff;
  --gw-header-cta-fg: #0e0e0e;
  background: #fff;
  color: #0e0e0e;
}

.sw-h15-emergency {
  --gw-header-cta-bg: #466044;
  --gw-header-cta-fg: #fff;
  background: #466044;
  border-color: #466044;
  color: #fff;
}

.sw-h16-emergency {
  --gw-header-cta-bg: #6e3450;
  --gw-header-cta-fg: #fff;
  background: #6e3450;
  border-color: #6e3450;
  color: #fff;
}

.sw-h20-emergency {
  --gw-header-cta-bg: #3a2418;
  --gw-header-cta-fg: #f8f0dc;
  background: #3a2418;
  border-color: #3a2418;
  color: #f8f0dc;
}

.sw-h21-emergency {
  --gw-header-cta-bg: #f5f0e8;
  --gw-header-cta-fg: #1c1a17;
  background: #f5f0e8;
  border-color: #f5f0e8;
  color: #1c1a17;
}

.sw-h23-emergency {
  --gw-header-cta-bg: #0a0807;
  --gw-header-cta-fg: #f5d991;
  background: #0a0807;
  border-color: #b8924f;
  color: #f5d991;
}

.sw-h24-emergency {
  --gw-header-cta-bg: #7a4a40;
  --gw-header-cta-fg: #fff8f2;
  background: #7a4a40;
  border-color: #7a4a40;
  color: #fff8f2;
}

.sw-h25-emergency {
  --gw-header-cta-bg: #edf2ea;
  --gw-header-cta-fg: #1f3530;
  background: #edf2ea;
  border-color: #edf2ea;
  color: #1f3530;
}

.sw-h26-emergency {
  --gw-header-cta-bg: #315f62;
  --gw-header-cta-fg: #fff;
  background: #315f62;
  border-color: #315f62;
  color: #fff;
}

.sw-h31-emergency {
  --gw-header-cta-bg: #173b2e;
  --gw-header-cta-fg: #fff;
  background: #173b2e;
  border-color: #173b2e;
  color: #fff;
}

.sw-h33-emergency {
  --gw-header-cta-bg: #111;
  --gw-header-cta-fg: #fff;
  background: #111;
  border-color: #111;
  color: #fff;
}

.sw-h34-emergency {
  --gw-header-cta-bg: #f3ebd9;
  --gw-header-cta-fg: #234231;
  background: #f3ebd9;
  border-color: #f3ebd9;
  color: #234231;
}

.sw-h35-emergency {
  --gw-header-cta-bg: #5b4a25;
  --gw-header-cta-fg: #fff;
  background: #5b4a25;
  border-color: #5b4a25;
  color: #fff;
}

.sw-h36-emergency {
  --gw-header-cta-bg: #431015;
  --gw-header-cta-fg: #fff;
  background: #431015;
  border-color: #431015;
  color: #fff;
}

.sw-h39-emergency {
  --gw-header-cta-bg: #5b4b31;
  --gw-header-cta-fg: #fff;
  background: #5b4b31;
  border-color: #5b4b31;
  color: #fff;
}

.sw-h40-emergency {
  --gw-header-cta-bg: #425b3b;
  --gw-header-cta-fg: #fff;
  background: #425b3b;
  border-color: #425b3b;
  color: #fff;
}

.sw-h41-emergency {
  --gw-header-cta-bg: #76530a;
  --gw-header-cta-fg: #fff;
  background: #76530a;
  border-color: #76530a;
  color: #fff;
}

.sw-h45-emergency {
  --gw-header-cta-bg: #ffd400;
  --gw-header-cta-fg: #10306b;
  background: #ffd400;
  border-color: #ffd400;
  color: #10306b;
}

.sw-h47-emergency {
  --gw-header-cta-bg: #f4ecdb;
  --gw-header-cta-fg: #143034;
  background: #f4ecdb;
  border-color: #f4ecdb;
  color: #143034;
}

.sw-h5-emergency:hover,
.sw-h6-emergency:hover,
.sw-h13-emergency:hover,
.sw-h14-emergency:hover,
.sw-h15-emergency:hover,
.sw-h16-emergency:hover,
.sw-h20-emergency:hover,
.sw-h21-emergency:hover,
.sw-h23-emergency:hover,
.sw-h24-emergency:hover,
.sw-h25-emergency:hover,
.sw-h26-emergency:hover,
.sw-h31-emergency:hover,
.sw-h33-emergency:hover,
.sw-h34-emergency:hover,
.sw-h35-emergency:hover,
.sw-h36-emergency:hover,
.sw-h39-emergency:hover,
.sw-h40-emergency:hover,
.sw-h41-emergency:hover,
.sw-h45-emergency:hover,
.sw-h47-emergency:hover {
  background: var(--gw-header-cta-bg);
  border-color: var(--gw-header-cta-bg);
  color: var(--gw-header-cta-fg);
  filter: brightness(0.9);
}

/* Small marks and photo credits need the same protection as their labels. */
.sw-h5-logo-mark {
  background: #0a5a54;
}

.sw-h24-logo-mark {
  background: #7a4a40;
}

.sw-h39-logo-mark {
  background: #5b4b31;
}

.sw-h6-photo-credit,
.sw-h33-photo-credit {
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
}

.sw-h39-credit {
  background: rgba(255, 255, 255, 0.9);
  color: #3f2e2c;
  padding: 0.25rem 0.5rem;
}

/* Gradient cards keep a dark glass surface so their metadata stays legible. */
.sw-h16-glass {
  background: rgba(42, 27, 77, 0.34);
}

.sw-h16-italic,
.sw-h16-emphasis {
  color: #fff0c9;
}

.sw-h16-tile,
.sw-h16-mod {
  background: rgba(42, 27, 77, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
}

.sw-h16-tile-meta,
.sw-h16-mod-meta-label,
.sw-h16-mod-output {
  color: #f8f4ff;
}

.sw-h16-mod-num {
  color: #ffd59e;
}

.sw-h30-tile-kicker {
  color: #8db7ff;
}

.sw-h40-italic {
  color: #8a4200;
}

/* Content-width repairs for the collapsed grid/flex designs. */
.sw-h3-content,
.sw-h5-content,
.sw-h23-cover,
.sw-h27-content,
.sw-h28-paper,
.sw-h34-main,
.sw-h34-intro,
.sw-h34-introtext {
  max-inline-size: 100%;
}

/*
 * These compositions collide at every relevant width. Their content begins
 * inside the same top band as an absolute 75–95px navigation header.
 */
.sw-h8,
.sw-h9,
.sw-h14,
.sw-h18,
.sw-h24,
.sw-h28 {
  padding-top: 7rem;
}

.sw-h10-content,
.sw-h19-content,
.sw-h20-content,
.sw-h21-content,
.sw-h22-content,
.sw-h23-cover,
.sw-h27-content,
.sw-h29-content,
.sw-h34-main,
.sw-h38-frame {
  padding-top: 7rem;
}

@media (min-width: 961px) {
  /* Desktop-only collisions in the Digital Gradient and Sage Sanctuary sets. */
  .sw-h16,
  .sw-h25-content {
    padding-top: 6.5rem;
  }
}

@media (max-width: 960px) {
  /* Header clearance for compositions that only collide after collapsing. */
  .sw-h17-layout,
  .sw-h26-content,
  .sw-h42-main {
    padding-top: 7rem;
  }

  .sw-h13,
  .sw-h39,
  .sw-h40,
  .sw-h41,
  .sw-h43,
  .sw-h44,
  .sw-h45,
  .sw-h46 {
    padding-top: 7rem;
  }

  .sw-h47 {
    padding-top: 6.5rem;
  }

  /* The collapsed grids must be allowed to shrink to the viewport. */
  .sw-h5-content,
  .sw-h23-cover,
  .sw-h27-content,
  .sw-h28-paper,
  .sw-h34-main,
  .sw-h34-intro,
  .sw-h34-introtext {
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .sw-h5-content {
    padding-inline: clamp(1.5rem, 6vw, 2.5rem);
  }

  .sw-h5-eyebrow,
  .sw-h23-eyebrow,
  .sw-h27-eyebrow,
  .sw-h32-eyebrow,
  .sw-h34-eyebrow,
  .sw-h37-eyebrow,
  .sw-h46-eyebrow {
    flex-wrap: wrap;
    max-inline-size: 100%;
    white-space: normal;
  }

  .sw-h23-brand {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .sw-h32-eyebrow > *,
  .sw-h37-eyebrow > *,
  .sw-h46-eyebrow > * {
    max-inline-size: 100%;
    white-space: normal;
  }

  .sw-h23-actions,
  .sw-h34-actions {
    align-items: stretch;
    flex-direction: column;
    inline-size: 100%;
  }

  .sw-h23-cta-primary,
  .sw-h23-cta-secondary,
  .sw-h34-cta-primary,
  .sw-h34-cta-secondary {
    justify-content: center;
    max-inline-size: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Keep long brand names and utility CTAs inside the mobile header. */
  body > nav[class*="-nav"] {
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  body > nav[class*="-nav"] [class*="-logo"] {
    gap: 0.55rem;
    min-inline-size: 0;
  }

  body > nav[class*="-nav"] [class*="-logo-mark"] {
    block-size: 34px;
    flex: 0 0 34px;
    inline-size: 34px;
  }

  body > nav[class*="-nav"] [class*="-brand"] {
    font-size: clamp(0.72rem, 3.2vw, 0.92rem);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body > nav[class*="-nav"] [class*="-emergency"] {
    flex: none;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    padding: 0.55rem 0.72rem;
    white-space: nowrap;
  }

  .sw-h5-title,
  .sw-h23-title,
  .sw-h27-title,
  .sw-h34-title {
    font-size: clamp(2.55rem, 13vw, 3.5rem);
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
  }

  .sw-h27-content {
    padding-inline: 1.5rem;
  }

  .sw-h34-intro {
    padding-inline: 1.5rem;
  }

  .sw-h23-issue {
    align-items: flex-start;
    gap: 0.75rem;
  }

  .sw-h23-issue-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .sw-h23-foot-meta {
    max-inline-size: 100%;
  }
}