/* Mobile spacing and sizing refinements for the Styling Easter Egg. */
@media (max-width: 700px) {
  html[data-style-experiment] .hero,
  html[data-style-experiment] .experiments-hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 88px;
    overflow: hidden;
  }

  html[data-style-experiment] .hero-copy,
  html[data-style-experiment] .experiments-hero-copy {
    min-width: 0;
  }

  html[data-style-experiment] .hero .eyebrow,
  html[data-style-experiment] .experiments-hero .eyebrow {
    max-width: 88%;
    margin-bottom: 22px;
    font-size: 0.64rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  html[data-style-experiment] .hero h1,
  html[data-style-experiment] .experiments-hero h1 {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  html[data-style-experiment] .hero-lede,
  html[data-style-experiment] .experiments-hero-lede {
    margin-top: 34px;
  }

  html[data-style-experiment] .hero-actions {
    margin-top: 32px;
    gap: 28px;
  }

  html[data-style-experiment] .about-section {
    padding-bottom: 52px;
  }

  html[data-style-experiment] .contact-section {
    padding-top: 72px;
    padding-bottom: 112px;
  }

  html[data-style-experiment] .contact-grid {
    row-gap: 52px;
  }

  html[data-style-experiment] .availability-status {
    width: fit-content;
    max-width: 100%;
    margin: 28px 0 30px;
    padding: 10px 14px;
    flex-wrap: wrap;
    white-space: normal;
    font-size: 0.74rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  html[data-style-experiment] .contact-options {
    display: grid;
    gap: 20px;
    border-top: 0;
  }

  html[data-style-experiment] .contact-option {
    min-height: 132px;
    padding: 28px 24px;
  }

  html[data-style-experiment] .contact-option:hover,
  html[data-style-experiment] .contact-option:focus-visible {
    padding-inline: 24px;
  }

  html[data-style-experiment] .contact-option strong {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    line-height: 1.18;
  }

  html[data-style-experiment] .contact-note {
    margin-top: 40px;
    font-size: 0.88rem;
    line-height: 1.62;
  }

  html[data-style-experiment] .site-footer {
    min-height: auto;
    padding-top: 54px;
    padding-bottom: 64px;
    gap: 44px;
  }

  html[data-style-experiment] .footer-brand,
  html[data-style-experiment] .footer-meta {
    gap: 10px;
  }

  /* Clouded: keep the portrait atmospheric rather than dominant. */
  html[data-style-experiment="clouded"] .hero h1,
  html[data-style-experiment="clouded"] .experiments-hero h1 {
    font-size: clamp(3.25rem, 14.5vw, 4.65rem);
    line-height: 0.94;
    letter-spacing: -0.05em;
  }

  html[data-style-experiment="clouded"] .hero::after,
  html[data-style-experiment="clouded"] .experiments-hero::after {
    width: min(57vw, 255px);
    right: -15vw;
    top: 13%;
    opacity: 0.27;
  }

  html[data-style-experiment="clouded"] .availability-status {
    color: #f2bd72;
    background: rgba(11, 17, 18, 0.82);
    border: 1px solid #6c5a43;
  }

  /* Graffiti: reduce the shout just enough to keep every word on the wall. */
  html[data-style-experiment="graffiti"] .hero h1,
  html[data-style-experiment="graffiti"] .experiments-hero h1 {
    font-size: clamp(3rem, 13.2vw, 4.2rem);
    line-height: 0.91;
    letter-spacing: -0.015em;
  }

  html[data-style-experiment="graffiti"] .hero::before,
  html[data-style-experiment="graffiti"] .experiments-hero::before {
    width: min(56vw, 255px);
    right: -15vw;
    top: 14%;
    opacity: 0.24;
    border-width: 4px;
    box-shadow: 9px 9px 0 #08a9cf, -7px -7px 0 #e5166f;
  }

  html[data-style-experiment="graffiti"] .availability-status {
    color: #090b12;
    background: #ff7118;
    border: 3px solid #090b12;
    box-shadow: 4px 4px 0 #08a9cf;
    transform: rotate(-1deg);
  }

  /* Faceted: keep the geometry visible without letting it cut through the copy. */
  html[data-style-experiment="faceted"] .hero h1,
  html[data-style-experiment="faceted"] .experiments-hero h1 {
    font-size: clamp(3rem, 13vw, 4.25rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
  }

  html[data-style-experiment="faceted"] .hero::after,
  html[data-style-experiment="faceted"] .experiments-hero::after {
    width: min(57vw, 260px);
    right: -17vw;
    top: 13%;
    opacity: 0.27;
  }

  html[data-style-experiment="faceted"] .hero::before,
  html[data-style-experiment="faceted"] .experiments-hero::before {
    width: min(63vw, 285px);
    right: -21vw;
    top: 9%;
    opacity: 0.14;
  }

  html[data-style-experiment="faceted"] .availability-status {
    color: #f0e7dc;
    background: #18232e;
    border: 1px solid #c77943;
  }

  /* Flat Cartoon: preserve the looser treatment already approved. */
  html[data-style-experiment="cartoon"] .hero h1,
  html[data-style-experiment="cartoon"] .experiments-hero h1 {
    font-size: clamp(3.35rem, 15vw, 4.85rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
  }

  html[data-style-experiment="cartoon"] .hero::after,
  html[data-style-experiment="cartoon"] .experiments-hero::after {
    width: min(58vw, 270px);
    right: -13vw;
    top: 15%;
    opacity: 0.24;
  }

  html[data-style-experiment="cartoon"] .availability-status {
    color: #172437;
    background: #f2d6bd;
    border: 3px solid #172437;
    box-shadow: 4px 4px 0 #d16f3e;
  }
}