/* ============================================================
   RESPONSIVE COMPOSITIONS | deliberate tablet & mobile layouts,
   not a naive stack of the desktop blocks.
   Desktop reference frame: > 900px (fluid, see tokens.css)
   Tablet: 641–900px   Mobile: ≤ 640px
   ============================================================ */

/* ---------------- TABLET ---------------- */
@media (max-width: 900px) {
  :root {
    --gutter: 2rem;
    --fs-body: 0.8125rem;
    --fs-body-s: 0.78125rem;
    --fs-label: 0.75rem;
    --fs-nav: 0.6875rem;
    --fs-micro: 0.625rem;
    --fs-hero: 2.625rem;
    --fs-card-h: 1.375rem;
    --fs-case-h: 1.625rem;
    --fs-cta-h: 2rem;
    --fs-title: 1.0625rem;
    --fs-title-s: 1rem;
    --fs-stat: 1.875rem;
    --header-h: 4rem;
  }

  /* Header */
  .site-nav { gap: 1.1rem; }
  .site-nav a:not(.btn) { display: none; }
  .site-nav a.nav-keep { display: inline-block; }

  /* Hero | portrait stays dominant, text above the fold */
  .hero { height: auto; min-height: 34rem; display: flex; flex-direction: column; }
  .hero-photo { width: 74%; opacity: 0.92; }
  .hero-desk { display: none; }
  .hero-content { padding-top: 6.5rem; max-width: 30rem; }
  .hero-sub { max-width: 23rem; font-size: 0.875rem; }
  .hero-more { position: static; margin: auto 0 1.5rem; padding-inline: var(--gutter); }
  .btn { height: 2.75rem; padding-inline: 1.5rem; }
  .site-nav .btn { height: 2.25rem; }

  /* Thinking | label stacks above intro; flow scrolls horizontally */
  .thinking { height: auto; padding-bottom: 1.75rem; }
  .thinking-head { grid-template-columns: 1fr; row-gap: 0.75rem; padding-top: 1.75rem; }
  .thinking-label::after { display: none; }
  .thinking-intro { max-width: 34rem; font-size: 0.9375rem; }
  .model-flow {
    margin: 1.5rem 0 0; padding-inline: var(--gutter);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 0.4rem;
    scrollbar-width: none;
  }
  .model-flow::-webkit-scrollbar { display: none; }
  .model-step { scroll-snap-align: center; min-width: 5.4rem; }
  .model-node { width: 3.25rem; height: 3.25rem; }
  .model-node svg { width: 1.6rem; height: 1.6rem; }
  .model-step .t { font-size: 0.6875rem; }
  .model-arrow { margin-top: 1.4rem; }

  /* Focus | label row, then three cards */
  .focus { padding-block: 1.75rem 1.5rem; }
  .focus-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .focus-label { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .focus-label br { display: none; }
  .focus-card { min-height: 0; padding: 1.5rem 1.25rem 1.4rem; }
  .focus-card p { font-size: 0.78125rem; }
  .focus-texture { width: 9rem; opacity: 0.35; }

  /* Principles */
  .principles { padding-block: 2rem 2.25rem; }
  .principles-grid { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; column-gap: 2rem; }
  .principles-label { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1.5rem; }
  .principles-label br { display: none; }
  .principles-label .k-link { margin-top: 0; }
  .principles-col { gap: 1.25rem; }
  .principle { grid-template-columns: 2.1rem 1fr; }
  .principle h3 { font-size: 0.9375rem; }
  .principle p { font-size: 0.78125rem; }

  .insights-grid { gap: 1rem; }
  .fork-col { padding: 1.6rem 1.6rem 1.7rem; }
  .ventures-grid { gap: 1rem; }

  /* Media | panels stack */
  .media-row { grid-template-columns: 1fr; }
  .media-panel + .media-panel { border-left: 0; border-top: 1px solid var(--line-soft); padding-left: var(--gutter); }
  .media-panel { padding: 1.5rem var(--gutter) 1.75rem; }
  .media-grid { gap: 1rem; }
  .vcard p, .acard p { font-size: 0.78125rem; }
  .acard .tag { font-size: 0.625rem; }

  /* Cases | content above, photo banner below */
  .cases { grid-template-columns: 1fr; }
  .case-content { padding: 2rem var(--gutter) 1.75rem; }
  .case-body { max-width: 30rem; }
  .case-media { height: 17rem; }
  .case-media img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
            mask-image: linear-gradient(180deg, transparent 0, #000 18%);
    object-position: center 42%;
  }

  /* CTA | content full width, quote + portrait side by side below */
  .cta { grid-template-columns: 1fr; column-gap: 0; }
  .cta-content { grid-column: 1 / -1; padding: 2rem var(--gutter) 1.5rem; }
  .cta-quote { align-self: stretch; margin: 0 0 0 var(--gutter); padding: 1.4rem 1.5rem; }
  .cta-quote p { font-size: 0.8125rem; }
  .cta-quote .sig { font-size: 1.6rem; }

  .site-footer { padding: 0.9rem var(--gutter); }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 640px) {
  :root {
    --gutter: 1.25rem;
    --fs-hero: 2.125rem;
    --fs-cta-h: 1.75rem;
    --fs-case-h: 1.5rem;
    --header-h: 3.5rem;
  }

  /* Hero | headline first, portrait as its own full-width frame */
  .hero { min-height: 0; }
  .hero-media { position: relative; order: 2; height: 21rem; margin-top: 0.5rem; }
  .hero-photo {
    width: 100%; height: 100%; top: 0; opacity: 1;
    object-position: 72% 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .hero-grain { display: none; }
  .hero-content { order: 1; padding-top: 5.5rem; }
  .hero-title .line { display: inline; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-more { order: 3; margin: 0 0 1.75rem; }

  /* Thinking | vertical progression with a connective spine */
  .model-flow {
    flex-direction: column; align-items: stretch;
    overflow: visible; gap: 0; padding-inline: var(--gutter);
    position: relative;
  }
  .model-arrow { display: none; }
  .model-step {
    flex-direction: row; align-items: center; gap: 1rem;
    width: 100%; min-width: 0;
    padding-block: 0.55rem;
    position: relative;
  }
  .model-step::before {
    content: ""; position: absolute; left: 1.6rem; top: 0; bottom: 0;
    width: 1px; background: var(--line-gold-soft);
  }
  .model-step:first-child::before { top: 50%; }
  .model-step:last-child::before { bottom: 50%; }
  .model-node { position: relative; z-index: 1; background: #181411; flex: 0 0 auto; }
  .model-step .t { font-size: 0.75rem; letter-spacing: 0.16em; }

  /* Focus / principles | single column */
  .focus-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .fork-grid { grid-template-columns: 1fr; }
  .fork-them { border-left: 0; border-top: 1px solid var(--line-soft); }
  .fork-me { border-left: 0; border-top: 1px solid var(--c-gold); }
  .ventures-grid { grid-template-columns: 1fr; }
  .principles-label { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .principles-col { gap: 1.1rem; }

  /* Media | swipeable rows */
  .media-grid {
    display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; gap: 0.9rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .media-grid::-webkit-scrollbar { display: none; }
  .vcard, .acard { flex: 0 0 72%; scroll-snap-align: start; }

  /* Cases */
  .case-stats { flex-wrap: wrap; gap: 1.25rem 2.5rem; }
  .case-media { height: 14rem; }
  .case-head { flex-direction: column; gap: 0.5rem; }

  /* CTA */
  .cta { grid-template-columns: 1fr; }
  .cta-content { padding-bottom: 0.5rem; }
  .cta-actions { flex-wrap: wrap; }
  .cta-actions .btn { flex: 1 1 100%; }
  .cta-quote { margin: 1rem var(--gutter) 1.25rem; }

  .about-grid { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .about-media { max-width: 16rem; }

  .site-footer { flex-direction: column; gap: 0.9rem; padding: 1.4rem var(--gutter); }
  .foot-left { flex-direction: column; align-items: center; gap: 0.4rem; }

  .bridge-cta { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; padding: 1.75rem var(--gutter); }
}