/* ==========================================================================
   DIRECT ADVENTURES — RESPONSIVE OVERRIDES
   responsive.css
   Loaded after styles.css. Contains breakpoint-specific adjustments only.
   Breakpoints:
     Large desktop  1440px+
     Desktop/laptop 1024–1439px  (base styles in styles.css target this)
     Tablet          768–1023px
     Mobile          below 768px
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET — 768px to 1023px
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .section {
    padding: 64px 5%;
  }

  /* ---- Hero ---- */
  .hero {
    padding: 2.5rem 5% 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .hero__content {
    max-width: none;
  }

  .hero__stage {
    order: -1;
    max-width: 460px;
    margin-inline: auto;
    width: 100%;
    min-height: 380px;
    padding: 1rem 1rem 2.5rem;
  }

  .hero__portrait {
    width: min(340px, 78%);
  }

  .hero__book {
    font-size: 0.75rem;
    padding: 0.45rem 0.8rem;
  }

  .hero__books {
    width: 140px;
  }

  .hero__mug {
    width: 88px;
    height: 88px;
  }

  .hero__annotation {
    font-size: 1.125rem;
  }

  /* ---- Meet the Girls ---- */
  .character-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 460px;
    margin-inline: auto;
  }

  .character-row {
    grid-template-columns: 38% 1fr;
  }

  .character-row__traits--3col {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Book One ---- */
  .book-feature {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
  }

  .book-feature__cover-wrap {
    max-width: 300px;
    width: 100%;
    margin-top: -2.5rem;
  }

  .book-feature__content {
    max-width: 560px;
    text-align: left;
  }

  /* ---- Perspectives / Articles ---- */
  .perspective-grid {
    grid-template-columns: 1fr 1fr;
  }

  .article-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Real Dogs ---- */
  .brand-story {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .brand-story__figure {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  /* ---- Follow the Chaos ---- */
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .social-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Footer ---- */
  .site-footer__top {
    justify-content: center;
    text-align: center;
  }

  .site-footer__tagline {
    text-align: center;
  }

  .site-footer__nav {
    order: 3;
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — below 768px
   Deliberately redesigned rather than a shrunk desktop layout. Decorative
   hero props are simplified rather than stacked, per the visual-correction
   brief: character prominence, headline and CTAs stay primary; world-
   building props reduce or disappear so they never compete for space.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .section {
    padding: var(--section-padding-mobile);
  }

  .container {
    padding-inline: 20px;
  }

  .site-header__inner {
    padding-inline: 20px;
    height: var(--header-height-mobile);
  }

  .mobile-nav {
    top: var(--header-height-mobile);
    height: calc(100vh - var(--header-height-mobile));
    height: calc(100dvh - var(--header-height-mobile));
  }

  .site-logo img {
    height: 36px;
  }

  .header-actions .btn {
    padding: 0.7rem 1.25rem;
    font-size: 0.875rem;
  }

  /* ---- Hero ---- */
  .hero {
    padding: 2rem 20px 0;
  }

  .hero__inner {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* Mobile-only reorder: the brand proposition (eyebrow, headline,
     supporting copy) must read before the illustration, then the
     artwork, then CTAs/perspectives. Desktop and tablet composition
     are untouched — .hero__content becomes display:contents here only
     so its children can be individually reordered as siblings of
     .hero__stage within .hero__inner. */
  .hero__content {
    display: contents;
  }

  .hero__content > .eyebrow {
    order: 1;
  }

  .hero__headline {
    order: 2;
  }

  .hero__lead {
    order: 3;
  }

  .hero__stage {
    order: 4;
  }

  .hero__actions {
    order: 5;
  }

  .perspective-strip {
    order: 6;
  }

  .hero__headline {
    font-size: clamp(2.1rem, 11vw, 2.75rem);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .perspective-strip {
    flex-direction: column;
    gap: 0.85rem;
  }

  /* Decorative hero props simplify hard on mobile: the book stack, mug
     and handwritten annotations all disappear so Izzie + Anna and the
     headline remain the unambiguous focus and the page doesn't grow
     tall with off-screen-feeling decoration. One quiet paw mark remains. */
  .hero__stage {
    min-height: 0;
    max-width: 320px;
    padding: 0.5rem 0 1.5rem;
  }

  .hero__portrait {
    width: 88%;
  }

  .hero__books,
  .hero__mug,
  .hero__annotation,
  .hero__crown,
  .hero__scribble,
  .hero__paw--2,
  .hero__paw--3 {
    display: none;
  }

  .hero__paw--1 {
    left: 8%;
    bottom: 2%;
  }

  /* ---- Meet the Girls ---- */
  .section-head {
    max-width: none;
  }

  .character-grid {
    gap: 2.5rem;
    max-width: none;
  }

  .character-row {
    grid-template-columns: 34% 1fr;
    gap: 1rem;
  }

  .character-row__name {
    font-size: 1.75rem;
  }

  .character-row__question {
    font-size: 1.25rem;
  }

  .character-row__traits {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  /* ---- Book One ---- */
  .book-feature__cover-wrap {
    max-width: 240px;
    margin-top: -2rem;
  }

  .book-feature__sticky-note {
    right: 0;
    max-width: 130px;
    font-size: 0.9375rem;
    padding: 0.75rem 0.9rem;
  }

  .book-feature__content {
    text-align: left;
  }

  .book-feature__actions {
    flex-direction: column;
  }

  .book-feature__actions .btn {
    width: 100%;
  }

  /* ---- Perspectives + Articles ---- */
  .perspective-grid,
  .article-grid {
    grid-template-columns: 1fr;
  }

  /* ---- Real Dogs ---- */
  .brand-story__figure {
    max-width: none;
  }

  .brand-story__paw {
    width: 40px;
  }

  /* ---- Follow the Chaos ---- */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .social-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Newsletter ---- */
  .newsletter {
    padding: 2.25rem 1.5rem;
    border-radius: var(--radius-image);
  }

  .newsletter__eyebrow {
    font-size: 1.625rem;
  }

  .newsletter-form {
    flex-direction: column;
  }

  /* Stacked on mobile: stop the 260px flex-basis acting as a height (it left a large gap above the button) */
  .newsletter-form__field {
    flex: 0 0 auto;
  }

  .newsletter-form__submit {
    align-self: stretch;
  }

  .newsletter-form__submit .btn {
    width: 100%;
  }

  /* ---- Footer ---- */
  .site-footer__inner {
    padding: 1.5rem 20px 0.75rem;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .site-footer__tagline {
    text-align: center;
    font-size: 1.25rem;
  }

  .site-footer__closing {
    text-align: center;
  }

  .site-footer__bottom-inner {
    padding: 1rem 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   SHORT LANDSCAPE — reduce vertical hero padding when height is tight
   -------------------------------------------------------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
  .hero__stage {
    min-height: 0;
  }

  .hero__books,
  .hero__mug {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   LARGE DESKTOP — 1440px and above
   Content is already capped by --max-width; only breathing room changes.
   -------------------------------------------------------------------------- */

@media (min-width: 1440px) {
  .hero__inner {
    gap: 4rem;
  }
}

/* --------------------------------------------------------------------------
   INTERIOR PAGES — TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .editorial-grid { grid-template-columns: repeat(4, 1fr); }
  .editorial-tile { grid-column: span 2; }
  .editorial-tile--wide { grid-column: span 4; }

  .action-gallery { grid-template-columns: repeat(3, 1fr); }

  .values-grid { grid-template-columns: repeat(2, 1fr); }

  .person-block { grid-template-columns: 200px 1fr; gap: 1.75rem; }

  .blog-featured { grid-template-columns: 1fr; gap: 1.5rem; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   INTERIOR PAGES — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .page-hero { padding: 1.75rem 20px 0; }
  .page-hero__inner { padding-bottom: 1.5rem; }
  .page-hero__headline { font-size: clamp(1.9rem, 9vw, 2.5rem); }

  .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .editorial-tile { grid-column: span 2; min-height: 180px; }
  .editorial-tile--wide { grid-column: span 2; }

  .action-gallery { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .action-gallery__item:nth-child(3n+1) { aspect-ratio: 4 / 5; }

  .values-grid { grid-template-columns: 1fr; }

  .person-block { grid-template-columns: 1fr; text-align: center; }
  .person-block__portrait { max-width: 220px; margin-inline: auto; }

  .timeline { padding-left: 1.5rem; }
  .timeline__item::before { left: -1.9rem; }

  .blog-categories { gap: 0.4rem; }
  .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .popular-post { grid-template-columns: 56px 1fr; }

  .contact-form { padding: 1.5rem; }

  .error-page { padding: 3rem 20px 3.5rem; }
  .error-page__code { font-size: 4rem; }
  .error-page__actions { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   VERY NARROW MOBILE — ~390px and below
   Social row stacks to a single column if 2-up starts feeling cramped.
   -------------------------------------------------------------------------- */

@media (max-width: 390px) {
  .social-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   MEET THE GIRLS — RICH CHARACTER PAGE — TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .girls-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 5% 2.5rem;
  }

  .girls-hero__figure {
    order: -1;
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  .character-feature,
  .character-feature--reverse {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .character-feature--reverse .character-feature__images { order: 1; }
  .character-feature--reverse .character-feature__content { order: 2; }

  .character-feature__images {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  .versus__row {
    grid-template-columns: 1fr auto 1fr;
    gap: 0.85rem;
  }

  .real-illustrated__pairs {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   MEET THE GIRLS — RICH CHARACTER PAGE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .girls-hero {
    padding: 1.75rem 20px 2rem;
  }

  .girls-hero__headline {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .character-feature__images--triptych {
    grid-template-columns: 1fr 1fr;
  }

  .character-feature__name {
    font-size: 2.25rem;
  }

  .character-feature__question {
    font-size: 1.5rem;
  }

  .character-feature__facts {
    grid-template-columns: 1fr 1fr;
  }

  .versus__row {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }

  .versus__izzie, .versus__anna {
    text-align: center;
  }

  .versus__divider {
    margin-inline: auto;
  }

  .pair-card__images {
    grid-template-columns: 1fr auto 1fr;
  }
}

/* --------------------------------------------------------------------------
   BLOG ARTICLE TEMPLATE — MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .article-hero {
    max-height: 260px;
  }

  .article-hero img {
    max-height: 260px;
    object-position: center 20%;
  }

  .article-header {
    padding: 1.5rem 20px 0;
  }

  .article-body {
    padding: 0 20px 2rem;
  }

  .article-pull-quote {
    padding: 1.5rem;
  }

  .article-pull-quote p {
    font-size: 1.25rem;
  }

  .article-assessment,
  .article-verdict {
    padding: 1.5rem;
  }

  .article-assessment__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }

  .article-assessment__value {
    text-align: left;
  }

  .article-author__card {
    padding: 1.5rem;
  }

  .article-author__ctas {
    flex-direction: column;
  }

  .article-next {
    padding: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   BLOG ARTICLE — WIDE DESKTOP EDITORIAL LAYOUT COLLAPSES BELOW 1024px
   Tablet and mobile both get the same clean single-column article;
   the two-column "magazine" treatments are a genuine-desktop feature.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .article-body {
    max-width: 740px;
    padding: 0 6% 3rem;
  }

  .article-col {
    max-width: none;
  }

  .article-intro {
    max-width: none;
  }

  .article-intro__paw {
    display: none;
  }

  .article-two-col,
  .article-two-col--rating,
  .article-two-col--split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-two-col--rating .article-stat-card {
    max-width: 260px;
    margin-inline: auto;
  }

  .article-productivity__row1 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-pull-quote--aside {
    height: auto;
  }

  .article-panel {
    padding: 2rem;
  }

  .article-panel .article-col {
    max-width: none;
  }

  .article-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-assessment,
  .article-verdict {
    max-width: none;
  }

  .article-verdict {
    padding: 2rem;
  }

  .article-verdict__icon {
    display: none;
  }

  .article-bottom-grid {
    max-width: 740px;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 6% 3rem;
  }
}

@media (max-width: 767px) {
  .article-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   IZZIE REVIEWS — EV ARTICLE — collapses to single column below 1024px,
   same breakpoint as the iPhone Duo article's editorial layout.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .article-concern-badge {
    position: static;
    width: auto;
    text-align: left;
    margin: 1rem 0 1.5rem;
  }

  .article-concern-badge__paw {
    margin-left: 0;
  }

  .roar-split {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .roar-split__vs {
    margin-inline: auto;
  }

  .journey-flow {
    justify-content: center;
    gap: 1.25rem 0.75rem;
  }

  .little-things-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .little-things-grid .article-feature-card:nth-child(2n) {
    transform: none;
  }

  .evidence-strip,
  .car-spec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .little-things-grid {
    grid-template-columns: 1fr;
  }

  .journey-flow__step {
    width: 76px;
  }

  .journey-flow__arrow {
    display: none;
  }
}

@media (max-width: 767px) {
  .article-hero.article-hero--full,
  .article-hero.article-hero--full img {
    max-height: none;
  }
}

@media (max-width: 1023px) {
  .article-photo-split,
  .article-photo-split--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .article-photo-split__img {
    max-width: 480px;
    margin-inline: auto;
  }

  .evidence-strip {
    grid-template-columns: 75fr 46fr;
  }
}

@media (max-width: 767px) {
  .evidence-strip.evidence-strip--three {
    grid-template-columns: 75fr 46fr;
    gap: 0.75rem;
  }

  .evidence-strip.evidence-strip--three .evidence-strip__label:nth-of-type(2) {
    grid-column: 1 / span 2;
    margin-top: 1rem;
  }

  .evidence-strip.evidence-strip--three .evidence-strip__img:nth-of-type(3) {
    grid-column: 1 / span 2;
    max-width: 240px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .evidence-strip.evidence-strip--three .evidence-strip__label--wide { order: 1; }
  .evidence-strip.evidence-strip--three .evidence-strip__img:nth-of-type(1),
  .evidence-strip.evidence-strip--three .evidence-strip__img:nth-of-type(2) { order: 2; }
  .evidence-strip.evidence-strip--three .evidence-strip__label:not(.evidence-strip__label--wide) { order: 3; }
  .evidence-strip.evidence-strip--three .evidence-strip__img:nth-of-type(3) { order: 4; }
}

/* EV hero: on real desktop only, cap the displayed width so the full,
   uncropped artwork takes less vertical space. Height stays auto, so the
   native aspect ratio is preserved. Tablet/mobile are unaffected. */
@media (min-width: 1024px) {
  .article-hero.article-hero--full img {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------------------
   ANNA INVESTIGATES — tablet and mobile: clean single column
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .anna-shell { width: calc(100% - 40px); }

  .anna-hero__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .anna-hero__figure { max-width: 320px; }

  .anna-robots__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .anna-testing__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .anna-testlog { grid-template-columns: repeat(2, 1fr); }

  .anna-findings {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1.75rem;
  }

  .anna-status { max-width: 340px; }

  .anna-about {
    grid-template-columns: 1fr;
    padding: 1.75rem;
  }

  .anna-about__ctas { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .anna-paper { padding: 2rem 1.5rem 1.5rem; }

  .anna-robot {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .anna-polaroid { max-width: 260px; margin-inline: auto; }

  .anna-testlog { grid-template-columns: 1fr; }

  .anna-testing__figure { padding: 0.4rem; }

  .anna-postnav {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 1rem;
  }

  .anna-postnav__back { justify-self: start; }

  .anna-process__step { font-size: 0.75rem; }

  .anna-hero__lead-line { font-size: 1.375rem; }
}

/* Anna Investigates — desktop only: the Testing Programme heading and its
   introductory paragraph read as ONE section introduction (stacked, left-
   aligned, tied together by a cyan rule) instead of sitting at opposite
   ends of the row. Tablet/mobile keep their existing stacked layout. */
@media (min-width: 1024px) {
  .anna-testing__intro {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
  }

  .anna-testing__lede {
    max-width: 780px;
    padding-left: 1.1rem;
    border-left: 4px solid #BDE9F9;
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   BEHIND THE ADVENTURES: large tablet, tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .bta-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .bta-sidecard { grid-column: 1 / -1; justify-self: start; width: 100%; }
  .bta-sidecard--pink .bta-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; }
  .bta-sidecard--pinkblue { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.5rem; }
  .bta-sidecard--pinkblue .bta-sidecard__line { margin: 0; }
  .bta-sidecard--pinkblue .bta-sidecard__line br { display: none; }
  .bta-duo { grid-template-columns: 1fr; }
  .bta-org { max-width: 620px; justify-self: center; width: 100%; }
  .bta-trio { grid-template-columns: 1fr 1fr; }
  .bta-roles { grid-column: 1 / -1; grid-row: 2; max-width: 560px; justify-self: center; width: 100%; }
  .bta-final { grid-template-columns: 1fr 1fr; }
  .bta-pairs { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1023px) {
  .bta-shell { width: calc(100% - 40px); }
  .bta-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .bta-hero__figure { max-width: 640px; width: 100%; justify-self: center; }
  .bta-story { grid-template-columns: 1fr; padding-top: 2.75rem; }
  .bta-beds { grid-template-columns: 1fr auto auto; }
}

@media (max-width: 767px) {
  .bta-hero__lede { font-size: 1.125rem; }
  .bta-note--top, .bta-note--side { font-size: 1.1rem; }
  .bta-note--top { left: 0.75rem; }
  .bta-note--side { right: 0.75rem; }

  .bta-collage--izzie { grid-template-columns: 1fr 1fr; }
  .bta-collage--anna  { grid-template-columns: 1fr 1fr; }
  .bta-polaroid__cap { font-size: 1.05rem; }

  .bta-org__label { font-size: 1.1rem; }
  .bta-org__label--izzie { left: 0.25rem; }
  .bta-org__label--anna  { right: 0.25rem; }

  .bta-beds { grid-template-columns: auto 1fr; gap: 1.25rem 1.75rem; }
  .bta-beds__copy { grid-column: 1 / -1; }

  .bta-trio { grid-template-columns: 1fr; gap: 1.5rem; }
  .bta-roles { grid-row: auto; }
  .bta-bubble { font-size: 1.05rem; }
  .bta-bubble--pink, .bta-bubble--blue { left: 50%; }
  .bta-roles { gap: 0.75rem; }
  .bta-role { padding-left: 0.25rem; padding-right: 0.25rem; }
  .bta-plaque { min-width: 0; width: 100%; padding: 0.5rem 0.4rem; }

  .bta-final { grid-template-columns: 1fr; gap: 2rem; }
  .bta-pairs { grid-row: auto; grid-template-columns: 1fr; }
  .bta-work { grid-template-columns: minmax(0, 1fr) 120px; }

  .bta-closing { padding-bottom: 6rem; }
  .bta-closing__text br { display: none; }

  .bta-postnav { grid-template-columns: 1fr; }
  .bta-postnav__back { justify-self: start; }
}

/* --------------------------------------------------------------------------
   THEIR WORLD: large tablet, tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .tw-strip { display: flex; flex-wrap: wrap; justify-content: center; }
  .tw-strip .tw-polaroid { width: calc((100% - 3rem) / 3); }
  .tw-books__grid { grid-template-columns: 1fr; }
  .tw-books__copy { max-width: 40rem; }
  .tw-butterfly--blue { right: -0.4rem; top: auto; bottom: 1rem; }
}

@media (max-width: 1023px) {
  .tw-shell { width: calc(100% - 40px); }
  .tw-hero { padding-top: 2.5rem; }
  .tw-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .tw-note--hero { right: 0.75rem; }
  .tw-life__head { grid-template-columns: 1fr; }
  .tw-note--life { justify-self: start; }
  .tw-cards { grid-template-columns: 1fr; }
  .tw-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tw-card__media { min-height: 280px; }
  .tw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .tw-card__body { justify-content: center; }
  .tw-card__text { flex: 0 1 auto; }
  .tw-follow__grid { grid-template-columns: 1fr; gap: 2rem; }
  .tw-close__grid { grid-template-columns: 1fr 0.62fr; gap: 1.75rem; }
  .tw-close__statement { font-size: 1.5rem; }
  .tw-deco--paw1 { display: none; }
}

@media (max-width: 767px) {
  .tw-hero__lead { font-size: 1.0625rem; }
  .tw-note--hero { font-size: 1.2rem; max-width: 12rem; bottom: -2rem; }
  .tw-strip { gap: 1.25rem 1rem; }
  .tw-strip .tw-polaroid { width: calc((100% - 1rem) / 2); }
  .tw-strip .tw-polaroid:last-child { width: 60%; }
  .tw-card { display: flex; }
  .tw-card__media { min-height: 0; }
  .tw-card__media img { position: static; height: auto; aspect-ratio: 4 / 3; }
  .tw-btn { padding-left: 1.25rem; padding-right: 1.25rem; }
  .tw-butterfly--blue { right: -0.25rem; top: 55%; }
  .tw-polaroid__cap { font-size: 1.15rem; }
  .tw-snaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Real to illustrated to book: stacked, arrows turn to point down */
  .tw-journey { grid-template-columns: 1fr; gap: 0.75rem; justify-items: center; }
  .tw-journey__step { width: 100%; justify-content: center; }
  .tw-journey__step--real { max-width: 340px; }
  .tw-journey__step--illustrated { max-width: 330px; margin-top: 1.25rem; }
  .tw-journey__arrow { justify-self: center; transform: rotate(90deg); margin-top: 0; }
  .tw-book { max-width: 220px; }

  .tw-btn { white-space: normal; text-align: center; }
  .tw-close__grid { grid-template-columns: 1fr; }
  .tw-close__statement { font-size: 1.625rem; }
  .tw-close__media { max-width: 300px; justify-self: center; width: 100%; }
}

/* --------------------------------------------------------------------------
   BOOKS: large tablet, tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .bk-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-hero__side { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 3rem; }
  .bk-date { width: 160px; font-size: 1.8rem; }
  .bk-date span { font-size: 1.45rem; }
  .bk-hero__tagline span { font-size: 1.35rem; }
  .bk-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
  .bk-views { grid-template-columns: 1fr; }
  .bk-view, .bk-view--izzie { padding: 2.5rem 40px; }
  .bk-real__grid { grid-template-columns: 1fr; gap: 2rem; }
  .bk-real__copy { max-width: 40rem; }
  .bk-peek__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .bk-peek__copy { max-width: 40rem; }
  .bk-peek__arrow { display: none; }
  .bk-launch__grid { grid-template-columns: 1fr 1fr; }
  .bk-launch__main { grid-column: 1 / -1; grid-row: 1; }
  .bk-date--launch { justify-self: center; }
  .bk-launch__art { max-width: 280px; justify-self: center; width: 100%; }
}

@media (max-width: 1023px) {
  .bk-shell { width: calc(100% - 40px); }
  .bk-view, .bk-view--izzie { padding: 2.25rem 20px; }
}

@media (max-width: 767px) {
  .bk-hero { padding-top: 2rem; }
  .bk-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .bk-hero__cover { max-width: 340px; }
  .bk-hero__side { gap: 1.5rem; }
  .bk-date { width: 140px; font-size: 1.6rem; }
  .bk-date span { font-size: 1.3rem; }
  .bk-note--hero { font-size: 1.3rem; }
  .bk-butterfly--a { display: none; }
  .bk-beats { grid-template-columns: 1fr; gap: 2rem; }
  .bk-view { grid-template-columns: 1fr; text-align: center; }
  .bk-view__art img { max-width: 220px; }
  .bk-note--view { font-size: 1.15rem; }
  .bk-real__pairs { grid-template-columns: 1fr; gap: 1.5rem; }
  .bk-polaroid__cap { font-size: 1.15rem; }
  .bk-spreads { grid-template-columns: 1fr; gap: 1.75rem; }
  .bk-launch__grid { grid-template-columns: 1fr; gap: 2rem; }
  .bk-form .newsletter-form__submit { align-self: stretch; }
  .bk-form .newsletter-form__field { flex: 0 0 auto; }
  .bk-launch__art { max-width: 240px; }
  .bk-note--launch { font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   FOLLOW THE GIRLS: large tablet, tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .ftg-panel { padding: 1.75rem 1.5rem 2rem; }
  .ftg-bridge__inner { grid-template-columns: 1fr; }
  .ftg-plats { grid-column: 1; }
  .ftg-sign { display: none; }
}

@media (max-width: 1023px) {
  .ftg-shell { width: calc(100% - 40px); }
  .ftg-hero { padding: 2.5rem 0 0; }
  .ftg-hero__copy { padding-bottom: 1.5rem; }
  /* the two real girls sit side by side below the copy, as in the approved tablet and mobile designs */
  /* The two photos overlap slightly and fade into each other at the centre and into the
     hero at the top, so they read as one composition. Same overall height as before. */
  .ftg-hero__dog {
    position: static; display: inline-block; vertical-align: bottom; position: relative;
    width: 57%; height: auto; aspect-ratio: 57 / 33.33;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%), linear-gradient(var(--ftg-join, to right), #000 0%, #000 36%, rgba(0, 0, 0, 0.82) 52%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.18) 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 18%, #000 42%), linear-gradient(var(--ftg-join, to right), #000 0%, #000 36%, rgba(0, 0, 0, 0.82) 52%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.18) 86%, transparent 100%);
            mask-composite: intersect;
  }
  .ftg-hero__dog--izzie { --ftg-join: to right; z-index: 0; }
  .ftg-hero__dog--anna  { --ftg-join: to left; margin-left: -14%; z-index: 1; }
  .ftg-hero { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ftg-hero__copy { order: -1; flex: 0 0 calc(100% - 40px); }
  .ftg-hero__dog--izzie { order: 1; object-position: 40% 22%; }
  .ftg-hero__dog--anna  { order: 2; object-position: 50% 30%; }
  .ftg-butterfly--a { left: 8%; top: 1rem; }
  .ftg-butterfly--b { right: 8%; bottom: auto; top: 1.5rem; }

  .ftg-panels { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 0 2.75rem; }
  .ftg-tile--wide-only { display: none; }
  .ftg-feed__fallback { min-height: 220px; }
}

@media (max-width: 767px) {
  .ftg-hero__lead { font-size: 1rem; padding-inline: 0.5rem; }
  .ftg-panel { padding: 1.5rem 1.1rem 1.75rem; border-radius: 22px; }
  .ftg-panel__icon { width: 2rem; height: 2rem; }
  .ftg-panel--da .ftg-panel__icon { width: 2.3rem; }
  .ftg-handle { font-size: 0.875rem; gap: 0.45rem; }
  .ftg-handle .ftg-ig { width: 26px; height: 26px; }
  .ftg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .ftg-btn { white-space: normal; text-align: center; }
  .ftg-plats { gap: 1.25rem 0.5rem; }
  .ftg-plat { flex: 0 0 calc(33.333% - 0.4rem); display: flex; justify-content: center; }
  .ftg-plat__link { min-width: 0; }
  .ftg-plat__icon { width: 60px; height: 60px; }
  .ftg-plat__icon svg { width: 28px; height: 28px; }
}

/* --------------------------------------------------------------------------
   NAVIGATION: seven links (Follow the Girls added after Blog)
   Between 1024px and 1279px the desktop menu tightens its spacing so every
   label stays on one line. 1280px and wider, and the mobile menu, are unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .primary-nav { gap: 1.25rem; }
  .primary-nav__list { gap: 1.15rem; }
  .primary-nav__link { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .primary-nav { gap: 0.9rem; }
  .primary-nav__list { gap: 0.75rem; }
  .primary-nav__link { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   ABOUT: large tablet, tablet and mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .ab-bizs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-hub__lines { display: none; }
  .ab-hub { margin-bottom: 1.75rem; }
}

@media (max-width: 1023px) {
  .ab-shell { width: calc(100% - 40px); }
  .ab-hero { padding-top: 2.25rem; }
  .ab-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ab-hero__copy { padding-bottom: 0; }
  .ab-hero__media { max-width: 640px; width: 100%; justify-self: center; }
  .ab-stories__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-close__grid { grid-template-columns: 1fr; }
  .ab-close__media { min-height: 0; aspect-ratio: 16 / 10; }
  .ab-close__media img {
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
  }
  .ab-close__copy { padding: 2rem 20px 3.5rem; }
}

@media (max-width: 767px) {
  .ab-hero__lead { font-size: 1.0625rem; }
  .ab-note--titles { font-size: 1.5rem; margin-left: 0.5rem; }
  .ab-hero__media { padding: 4.75rem 0.75rem 0; }
  .ab-ann__name { font-size: 1.4rem; }
  .ab-ann__role { font-size: 0.95rem; }
  .ab-ann__arrow { width: 26px; height: 26px; }
  .ab-ann--izzie { right: 0; top: 0; }
  .ab-ann--anna { left: 0; top: 0; }
  .ab-deco--h1 { display: none; }
  .ab-stories { padding: 3.25rem 0; }
  .ab-quote { padding: 2.25rem 1.5rem 2.5rem 2.5rem; }
  .ab-quote__mark { width: 1.75rem; height: 1.3rem; left: 0.75rem; top: 0.85rem; }
  .ab-net { padding: 3.25rem 0; }
  .ab-net__head { text-align: left; }
  .ab-hub { align-items: flex-start; }
  .ab-hub__brand { padding-left: 0; }
  .ab-hub__name { font-size: 1.3rem; }
  .ab-bizs { grid-template-columns: 1fr; gap: 1.1rem; }
  .ab-biz__name { min-height: 0; }
  .ab-close__ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   MOBILE OVERFLOW FIXES (approved, minimal)
   Electric Car: the spec grid's 1fr column could not shrink below its content
   (3px overflow at 390, 32px at 360). Behind the Adventures: the bed list could
   not wrap at narrow widths.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .car-spec-grid { grid-template-columns: minmax(0, 1fr); }
  .car-spec-card { padding: 1.5rem; }
  .bta-duo { grid-template-columns: minmax(0, 1fr); }
  .bta-beds { grid-template-columns: auto minmax(0, 1fr); }
  .bta-paws li { white-space: normal; }
}

/* Footer social contact route: a little more space below the stacked footer links on phones */
@media (max-width: 767px) {
  .site-footer__social { margin-top: 1.25rem; }
}

/* Footer company details: comfortable wrapping on phones */
@media (max-width: 767px) {
  .site-footer__company { padding: 0.9rem 20px 1.4rem; line-height: 1.65; }
  .site-footer__company p + p { margin-top: 0.35rem; }
}

/* Newsletter temporarily removed (Home): clearance above the footer wave on mobile */
@media (max-width: 767px) {
  #follow-the-chaos { padding-bottom: calc(48px + 2.5rem); }
}
@media (max-width: 767px) {
  .bk-peek { padding-bottom: calc(48px + 2.5rem); }
  section[aria-labelledby="popular-heading"] { padding-bottom: calc(48px + 2.5rem); }
}