/* Pink Collar — responsive layer.
 *
 * The page markup carries all of its styling as inline `style` attributes (the
 * dc-runtime template renders them straight onto the elements), so an inline
 * declaration always out-ranks a stylesheet rule. Every override here therefore
 * needs `!important` — that is a consequence of the markup, not a shortcut.
 *
 * Selectors match on the inline style text (e.g. [style*="font-size: 68px"])
 * rather than on classes, so the template itself stays untouched. Only the
 * header needed real markup changes, for the menu button.
 *
 * Everything below lives inside a media query. Above 1024px this file applies
 * nothing at all, so the desktop design renders exactly as it did before.
 */

/* The menu button exists in the markup on every page but is desktop-hidden.
   This is the one rule outside a media query, and it only touches the element
   that was added for mobile. */
.pc-burger { display: none; }


/* ───────────────────────── tablet ───────────────────────── */
@media (max-width: 1024px) {
  /* Three- and four-up card rows get cramped well before phone widths. */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section, header, footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  h1 { font-size: 52px !important; }
  h2 { font-size: 40px !important; }
}


/* ────────────────── phone / small tablet ────────────────── */
@media (max-width: 860px) {

  /* --- containment: nothing may push the page sideways --- */
  html { overflow-x: clip; }
  img, svg { max-width: 100% !important; }

  /* --- header becomes logo + menu button --- */
  header {
    padding: 12px 20px !important;
    gap: 12px !important;
  }
  /* The waitlist CTA moves out of the bar and into the menu panel, so the
     header never has to fit three items across. */
  header > a[href*="#waitlist"] { display: none !important; }

  .pc-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex: none;
  }
  .pc-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #4A2C3D;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* bars animate into an X while the menu is open */
  html.pc-nav-open .pc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.pc-nav-open .pc-burger span:nth-child(2) { opacity: 0; }
  html.pc-nav-open .pc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The nav drops out of the header bar. The header is already
     position:sticky, so it anchors this panel. */
  header nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px 20px 14px !important;
    background: rgba(253,249,250,0.98) !important;
    border-bottom: 1px solid rgba(74,44,61,0.12) !important;
    box-shadow: 0 14px 28px rgba(74,44,61,0.09) !important;
  }
  html.pc-nav-open header nav { display: flex !important; }
  header nav a {
    padding: 13px 2px !important;
    font-size: 16px !important;
    border-bottom: 1px solid rgba(74,44,61,0.08) !important;
  }
  header nav a:last-child { border-bottom: 0 !important; }
  /* The CTA, re-created inside the panel. It carries an inline display:none so
     it stays hidden on desktop, where the nav itself is always visible. */
  header nav .pc-menu-cta {
    display: block !important;
    margin-top: 12px !important;
    padding: 14px 20px !important;
    border-radius: 999px !important;
    background: #C2185B !important;
    color: #fff !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-bottom: 0 !important;
  }

  /* --- layout: every grid stacks --- */
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* …except the four Ember Quo stage chips, which are small buttons and read
     better two-up than as four full-width bars. */
  .pc-chips { grid-template-columns: repeat(2, 1fr) !important; }

  section, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Sticky side columns (the founder portraits) must not stick once the
     layout is a single column. The header keeps its own sticky behaviour. */
  [style*="position: sticky"]:not(header) { position: static !important; }

  /* The hero's glow panel is purely ornamental, so cap it rather than let a
     4:5 block push the real content most of a screen down. Note the spaced
     "4 / 5" — browsers re-serialise the inline `4/5` with spaces, so the
     unspaced spelling never matches once the page has rendered.
     Founder portraits deliberately keep their full ratio and are never
     cropped; they are full-bleed and uncapped on mobile. */
  [style*="aspect-ratio: 4 / 5"][style*="linear-gradient"] {
    max-height: 300px !important;
  }
  img[src*="founder-"] { width: 100% !important; height: auto !important; }

  /* --- typography: scale the display sizes down --- */
  [style*="font-size: 74px"] { font-size: 40px !important; }
  [style*="font-size: 68px"] { font-size: 38px !important; }
  [style*="font-size: 66px"] { font-size: 37px !important; }
  [style*="font-size: 62px"] { font-size: 35px !important; }
  [style*="font-size: 56px"] { font-size: 33px !important; }
  [style*="font-size: 52px"] { font-size: 32px !important; }
  [style*="font-size: 50px"] { font-size: 31px !important; }
  [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size: 44px"] { font-size: 29px !important; }
  [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 34px"] { font-size: 25px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 26px"] { font-size: 20px !important; }
  [style*="font-size: 24px"] { font-size: 18px !important; }
  [style*="font-size: 23px"] { font-size: 17px !important; }
  [style*="font-size: 22px"] { font-size: 17px !important; }
  [style*="font-size: 20px"] { font-size: 16px !important; }
  h1, h2 { letter-spacing: -0.02em !important; }
  /* character-count caps are tuned for desktop measure */
  [style*="max-width: 15ch"], [style*="max-width: 52ch"],
  [style*="max-width: 58ch"], [style*="max-width: 62ch"] { max-width: none !important; }

  /* --- waitlist form --- */
  form[name="waitlist"] {
    flex-direction: column !important;
    gap: 12px !important;
    max-width: none !important;
  }
  form[name="waitlist"] input[type="email"] { width: 100% !important; min-width: 0 !important; }
  form[name="waitlist"] button[type="submit"] { width: 100% !important; }

  /* --- tap targets --- */
  header > a:first-child { min-height: 44px !important; align-items: center !important; }
  footer nav { gap: 14px 22px !important; flex-wrap: wrap !important; }
  footer nav a { padding: 9px 0 !important; }
}


/* ───────────────────── narrow phones ───────────────────── */
@media (max-width: 420px) {
  section, footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* the wordmark competes with the menu button for space */
  header [style*="font-size: 15px"] { font-size: 13px !important; }
  header [style*="font-size: 9px"] { font-size: 8px !important; }
  /* stacked cards no longer need a second column at this width */
  .pc-chips { grid-template-columns: repeat(2, 1fr) !important; }
}