/* ===== cape-stack.css — The CAPE Method on anything that is not a desktop ==

   WHAT WAS WRONG. The homepage's CAPE section is a horizontal, scroll-driven
   film strip: #home-cape-method is 340vh tall, #methodPin sticks to the top of
   the viewport for its whole length, and #methodTrack — four 100vw panels laid
   out in a 400vw flex row — is translated sideways by a scroll-driven
   animation (`animation-timeline: --method`). On a desktop it is the best
   thing on the site.

   On a tablet and on a phone it was not merely cramped, it was BROKEN, and in
   three separate ways at once:

     1. It froze. Reported from a 1007px-wide tablet: the track stops between
        two panels and will not move again, so the visitor is left looking at a
        seam between the yellow panel and the green one with a slice of each.
     2. Below the frozen strip, ~240vh of empty green ground scrolls past
        before the next section, because the section reserves 340vh of scroll
        for a track that is no longer travelling.
     3. Even where it did move, the panels were unreadable. The field-note card
        is `width:min(34vw,400px)` — 34vw is 400px on a desktop and 133px on a
        390px phone, so the card became a column one or two words wide. The
        watermark letter is `min(94vh,50vw)`, which shrinks the same way.

   The section also carried a `keep scrolling — it scrolls sideways →` caption
   that was, on these widths, an instruction to do something that did nothing.

   WHY NOT REPAIR THE HORIZONTAL SCROLL INSTEAD. Because it cannot be made
   dependable here. Scroll-driven animations (`animation-timeline`) are
   Chromium-only: Safari on an iPhone and an iPad — which is most of this
   school's traffic — never runs it at all, and the pack's own
   `@supports not (animation-timeline: view())` fallback turns the strip into a
   `overflow-x:auto` swipe rail, so the SAME section already behaved in two
   different ways on two phones. Add a mobile address bar that resizes the
   viewport mid-animation (which is what freezes it) and there is no version of
   this that works everywhere.

   WHAT IT DOES INSTEAD. On every width below the desktop breakpoint, and on
   any touch device up to a landscape iPad, the film strip becomes four stacked
   cards in ordinary document flow: no sticky, no 340vh, no transform, no
   scroll-driven animation, nothing to freeze. Each step gets the full width —
   a big watermark letter, the step's heading and prose, and the field note at
   a readable size underneath. It is plain block layout, so it is identical in
   Safari, Firefox, Chrome, Samsung Internet and on a fold.

   DESKTOP IS UNTOUCHED. Every rule below is inside the one media query, whose
   arms are: narrower than 1150px, or a coarse pointer up to 1400px (the
   landscape-iPad convention used by touch.css and responsive.css). A mouse on
   a window wider than 1150px matches neither and sees the film strip exactly
   as before.

   THE JUMP BUTTONS still work: capeGo() in the pack's page class detects the
   stacked layout (#methodPin is no longer `position:sticky`) and scrolls the
   matching <article> into view instead of computing a position along the
   track. */

@media (max-width: 1150px), (max-width: 1400px) and (pointer: coarse) {

  /* 1. Give the section back its natural height. 340vh of reserved scroll is
        what produced the long empty green run under the frozen strip. */
  /* The doubled ID is deliberate — see the specificity note in home-mobile.css.
     rhythm.css sets `padding-block` on every non-hero section below 719px at
     (2,2,2), which beat the first version of this rule and left the section's
     title sitting IN the wave. The pack's own padding-top here is 230px, for
     a 96px SVG wave plus a taller clip-path polygon above it; this keeps that
     and adds a little, rather than replacing it with a smaller number. */
  main.page#page-home > section#home-cape-method#home-cape-method {
    height: auto !important;
    padding-top: calc(230px + 3vh) !important;
    padding-bottom: 7vh !important;
  }

  /* 2. Unpin. `contain:paint` goes with it — it was there to stop the track
        painting outside the pinned window, and there is no window now. */
  #page-home #methodPin {
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    contain: none !important;
  }

  /* 3. The title and the C→A→P→E chip were absolutely positioned inside the
        pinned window. In flow they simply head the stack. */
  #page-home #methodPin > div:first-child {
    position: static !important;
    top: auto !important;
    padding: 0 6vw !important;
    margin: 0 0 clamp(22px, 4vw, 38px) !important;
    gap: 12px !important;
  }

  /* 4. The film strip becomes a column. `animation:none` has to beat the
        pack's `animation-timeline` rule, and `transform:none` clears whatever
        frame the animation had already committed. */
  #page-home #methodTrack {
    display: grid !important;
    grid-auto-flow: row !important;
    width: 100% !important;
    height: auto !important;
    gap: clamp(16px, 3vw, 26px) !important;
    padding: 0 clamp(14px, 4vw, 34px) !important;
    box-sizing: border-box !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* 5. Each panel becomes a card. The Challenge panel is `background:transparent`
        in the pack because it sat on the section's own sage ground; as a card
        it needs a ground of its own or it reads as a hole. A flat colour,
        not a texture: the converter strips the pack's texture URLs and
        grain.css paints the grain from its own copy. */
  #page-home #methodTrack > article {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: clamp(26px, 6vw, 44px) !important;
    border-radius: 26px !important;
    box-shadow: 0 16px 40px rgba(34, 48, 30, .16) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #page-home #home-challenge-step {
    background: #FAF6EC !important;
  }

  /* 6. Inside the card: one column, and no leftover scale() from the pack's
        short-viewport rules (`max-height:820px` and `max-height:680px` shrink
        the panel to .78 and .56 — written for the pinned strip, and on a
        landscape phone they would shrink the card instead). */
  #page-home #methodTrack .cape-inner {
    display: block !important;
    height: auto !important;
    transform: none !important;
  }
  #page-home #methodTrack .cape-inner > div {
    transform: none !important;
    height: auto !important;
    display: block !important;
  }

  /* 7. The watermark letter. It was a small grey shape stranded behind the
        text; here it is what it is on the desktop — the card's ground. Sized
        against the CARD's width rather than the viewport's height, anchored
        top-right so the prose sits clear of it, and nudged out past the
        padding so it reads as a mark and not as a letter someone typed. */
  #page-home #methodTrack .cape-mark {
    position: absolute !important;
    left: auto !important;
    right: -.04em !important;
    top: -.12em !important;
    transform: none !important;
    font-size: clamp(190px, 46vw, 340px) !important;
    line-height: .74 !important;
    z-index: 0 !important;
  }
  #page-home #methodTrack > article > .cape-inner { position: relative !important; }
  /* The Challenge letter is cream (rgba(250,246,236,.3)) because on the
     desktop it sits on the section's sage ground. On its own cream card it is
     cream on cream — invisible. It takes the sage instead. */
  #page-home #home-challenge-step .cape-mark { color: rgba(143, 160, 115, .34) !important; }

  /* 8. The prose block sits over the watermark. */
  #page-home #methodTrack .cape-inner > div:first-of-type {
    position: relative !important;
    z-index: 2 !important;
  }
  #page-home #methodTrack article h3 {
    font-size: clamp(30px, 8vw, 46px) !important;
    margin: 0 0 14px !important;
  }
  #page-home #methodTrack article .cape-inner > div:first-of-type > p:last-child {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    max-width: 44ch !important;
  }

  /* 9. THE FIELD NOTE. The one the school called out by name: `min(34vw,400px)`
        made a 133px ribbon on a phone. It gets the card's full width, capped
        so it does not become a letterbox on an iPad, and it keeps its tilt —
        that is the charm, and 1.5deg does not cost layout. */
  #page-home #methodTrack .cape-inner > div:last-child {
    position: relative !important;
    z-index: 2 !important;
    margin: clamp(22px, 5vw, 34px) auto 0 !important;
    gap: 14px !important;
  }
  #page-home #methodTrack .cape-inner > div:last-child > div:first-child {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    transform: rotate(-1.5deg) !important;
    padding: clamp(20px, 5vw, 28px) !important;
    box-sizing: border-box !important;
  }
  #page-home #home-analyze-step .cape-inner > div:last-child > div:first-child,
  #page-home #home-evaluate-step .cape-inner > div:last-child > div:first-child {
    transform: rotate(1.5deg) !important;
  }
  /* The step word under the card ("CHALLENGE") — it was sized min(2.2vw,24px),
     which is 8.6px on a phone. */
  #page-home #methodTrack .cape-inner > div:last-child > span:last-child {
    display: block !important;
    margin-top: 18px !important;
    text-align: center !important;
    font-size: 15px !important;
    letter-spacing: .28em !important;
  }

  /* 10. The caption that told people to do something that does not happen
         here. Hidden rather than reworded: below this breakpoint the four
         steps are simply the next four things down the page, and a visitor
         scrolling does not need to be told to scroll. */
  #page-home #home-method-intro > p:last-of-type { display: none !important; }
}

/* A browser with no scroll-driven animation at DESKTOP width still falls back
   to the pack's `overflow-x:auto` swipe rail, which is a reasonable thing with
   a mouse and a trackpad. Nothing here changes that. */