/*
  The phone landing page. index.html loads this through a link carrying
  media="(max-width: 820px)", so not one line applies on a desktop, which still shows
  the peak-to-particle scene. It styles html, body, footer and the bare h1 and p, so
  that scoping is the only thing keeping the two routes apart.
*/
    /* Fonts: Anton and the four static Montserrat weights. Never the variable file, which
       draws as a hairline in Safari on every iPhone. Same files the site already loads. */
    @font-face{font-family:Anton;src:url("/assets/fonts/Anton-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:Montserrat;src:url("/assets/fonts/Montserrat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
    @font-face{font-family:Montserrat;src:url("/assets/fonts/Montserrat-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
    @font-face{font-family:Montserrat;src:url("/assets/fonts/Montserrat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
    @font-face{font-family:Montserrat;src:url("/assets/fonts/Montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

    /* The site's own tokens: the wash, the ink, the muted grey, and the one blue. The page
       declares no red. The only red on it is inside the specimen film and its still. */
    :root{
      --wash:#edf0f2;
      --paper:#ffffff;
      --ink:#1f2327;
      --muted:#666e74;
      --blue:#1b7bff;
      --hair:rgba(0,0,0,.2);
      --display:Anton,Impact,"Arial Narrow",sans-serif;
      --sans:Montserrat,Arial,sans-serif;
      --header:66px;      /* the fixed site header; measured and rewritten by script */
      --gutter:20px;      /* the About page's phone margin */
    }

    *,*::before,*::after{box-sizing:border-box}
    /* One screen per scroll, as the Science page does it. The chapters keep their
       minimum heights as a floor, so nothing is ever squeezed; where a screen is
       taller than that floor the chapter grows to fill it. */
    html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
    /* Every scroll lands on a whole frame and cannot rest between two.
       The footer aligns to its END, not its start: its top sits below the furthest the
       page can scroll, so aligning to the start left a snap point that could never be
       reached and every last scroll came to rest mid-transition. */
    html{scroll-snap-type:y mandatory}
    .hero,.charge,.capture{scroll-snap-align:start;scroll-snap-stop:always}
    footer{scroll-snap-align:end;scroll-snap-stop:always;position:relative;z-index:1}
    html,body{margin:0;padding:0}
    body{background:var(--wash);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:22px;-webkit-font-smoothing:antialiased}
    main{padding-top:0}  /* the bar is in flow now; it reserved 66px it no longer needs */
    a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
    a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
    .wrap{max-width:760px;margin:0 auto;padding:0 var(--gutter)}

    /* Type, at the sizes the site enforces on a phone (mobile-type.css): title 30/36, body
       15/22, caption 12/16. Repeated here so the page is right even on its own. */
    h1{margin:0;font:400 30px/36px var(--display);letter-spacing:0;color:var(--ink);text-wrap:balance;max-width:14em}
    p{margin:0 0 16px;font-size:15px;line-height:22px}
    p:last-child{margin-bottom:0}
    em{font-style:italic}
    .eyebrow{display:block;margin:0;font:600 12px/16px var(--sans);letter-spacing:.08em;color:var(--muted)}


    /* ---------------------------------------------------------------- screen 1 */
    /* The sentence alone, hung from its hyphen. The name stands on the first line at about
       a fifth of the screen's width; every line of the sentence beneath it is indented to
       begin exactly under the hyphen, so the whole block turns on that one stroke. Five
       short lines take about half the first screen; the rest is air, with the top of the
       body copy showing at the bottom edge as the reason to scroll. The size is set with
       enough weight to beat the site's phone scale, which pins every h1 to 30 px. */
    /* The structure. One axis: the hyphen's left edge, 0.474 of the display size in from the
       gutter; the first line of a headline reaches back to the gutter, everything else on the
       page starts on the axis. Four sizes: 74 / 30 / 15 / 12. One unit, 22 px. One drop, 52 px:
       screens 1 and 2 hang from the top at that drop; screen 3 stands on its floor at it. */
    :root{--display-size:32px;--pivot:calc(.474 * var(--display-size));--unit:22px;--drop:52px}
    .hang{padding-left:var(--gutter)}
    .hero-top{display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--drop)}
    .big[class][class]{font-family:var(--display);font-weight:400;font-size:var(--display-size) !important;line-height:36px !important;max-width:none;text-wrap:balance;text-wrap:initial;margin:0}
    .lead{display:block}
    .big .name{display:inline}
    .big .rest{display:inline}
    /* The one act. The hyphen inside the name is the charge inside the product: the only
       blue in the hero, and the only thing that moves, once. It starts as ink and takes the
       blue a moment after the sentence is read; with reduced motion it is simply blue. */
    .big .pole{color:inherit}
    @keyframes charge{to{color:var(--blue)}}
    .ph{display:inline}
    .dk{display:none}
    .hero-copy{padding-top:calc(var(--unit) * 1.4)}  /* its screen rests with a breath under the header */
    .apps-label{margin:30px 0 4px}
    .apps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
    .apps a{display:flex;align-items:center;justify-content:center;text-align:center;inline-size:100%;block-size:100%;min-block-size:44px;padding:0 0 6px;border-bottom:1px solid rgba(31,35,39,.28);text-decoration:none;font:500 11px/15px var(--sans);color:var(--ink);white-space:normal}
    .cue{margin:26px 0 0}

    /* A film: the still shows first; the film plays over it. Masked to a soft disc so the
       film's own background melts into the wash, as the wildfire deck does it. */
    .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent;
      -webkit-mask-image:radial-gradient(circle at center,#000 60%,transparent 78%);
              mask-image:radial-gradient(circle at center,#000 60%,transparent 78%)}
    /* Shown when the film cannot start on its own, in Low Power Mode or under reduced
       motion, and again once it has played its five seconds and stopped, so it can be
       replayed. Without the second case, taking the loop off left no way to see it twice. */
    .play{display:none;position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;padding:0;border:1px solid rgba(31,35,39,.42);border-radius:0;background:#fff;cursor:pointer}
    .play::after{content:"";position:absolute;left:22px;top:17px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--ink)}
    .needs-tap .play,.can-replay .play{display:none}

    /* ---------------------------------------------------------------- screen 2 */
    /* One composed screen, and one tight group inside it: the headline, the frame, the
       caption and the five pills sit close together, centred in the screen, with the air
       shared above and below rather than spread between them. */
    .charge{display:flex;flex-direction:column;justify-content:flex-start;padding:calc(var(--drop) * 1.2) 0 var(--drop);scroll-margin-top:var(--header)}
    .charge h2{margin:0 0 var(--s3)}
    
    /* The site's own specimen frame, as the wildfire deck draws it: a square with a thin
       mark at each corner. The film is cut hard inside it, so the specimen fills the disc
       and its haze meets the edge. */
    .stage{padding:0 0 calc(var(--unit) / 2)}
    .frame{position:relative;width:100%;max-width:300px;aspect-ratio:1/1;margin:0}
    .disc{position:absolute;inset:0;overflow:hidden}
    /* Cut tight and off centre: the specimen sits high and to the right, its rim crossing the
       frame's top and right edges, its haze fading into the wash at the lower left. */
    
    .reg{position:absolute;width:16px;height:16px;border:1px solid rgba(31,35,39,.42)}
    .reg.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
    .reg.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
    .reg.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
    .reg.br{bottom:-2px;right:-2px;border-left:0;border-top:0}
    .picker{display:flex;flex-direction:column;padding-top:14px}
    .cap{margin:0 0 8px;text-align:left;font:500 12px/16px var(--sans);color:var(--ink)}
    .names{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
    /* Quieter than the deck's pills: smaller, a lighter ring, muted until chosen. */
    .names button{appearance:none;-webkit-appearance:none;margin:0;padding:0 12px;min-height:34px;border:1px solid rgba(31,35,39,.28);border-radius:999px;background:transparent;font:500 12px/22px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer}
    .names button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

    /* ---------------------------------------------------------------- screen 3 */
    /* The conclusion on its own full screen, at the hero's scale, with its closing line
       directly beneath it so payoff and explanation are read together; then a hairline
       before the site's footer begins. */
    .capture{display:flex;flex-direction:column;justify-content:flex-start;padding:var(--drop) 0 calc(var(--drop) * 2);scroll-margin-top:var(--header);border-bottom:1px solid rgba(31,35,39,.12)}
    .capture p{margin:var(--unit) 0 0;padding-left:0;max-width:30em}  /* the gap lives on the line: the .big rule pins the h1's margin */
    .break{display:none}

    /* ---------------------------------------------------------------- landing */
    /* On a phone the page moves screen by screen, as the site's own Science and Air pages
       do: each composed screen comes to rest just under the fixed header, so the header
       never cuts through a headline, a caption or a pill at rest. */
    @media (max-width:760px){
      html{}
      .hero,.charge,.capture,.cp-footer{}
      /* The site footer, denser on this page only: no full-screen minimum, a smaller
         newsletter, the two link columns side by side, and a tight vertical rhythm. */
      .cp-footer .cp-footer-panel{min-height:0 !important;padding:20px var(--gutter) max(16px,env(safe-area-inset-bottom)) !important}
      .cp-footer .cp-footer-grid{grid-template-columns:1fr 1fr !important;gap:22px 20px !important;padding:20px 0 16px !important}
      .cp-footer .cp-footer-newsletter{grid-column:1/-1 !important}
      .cp-footer .cp-footer-newsletter h2{max-width:none !important}
      .cp-footer .cp-footer-form{margin-top:14px !important;padding:4px !important}
      .cp-footer .cp-footer-form input,.cp-footer .cp-footer-form button{min-height:44px !important}
      .cp-footer .cp-footer-form button{min-width:44px !important}
      .cp-footer .cp-footer-consent{margin-top:8px !important}
      .cp-footer h3{margin:0 0 8px !important}
      .cp-footer li + li{margin-top:5px !important}
      .cp-footer .cp-footer-social{margin-top:0 !important}
      .cp-footer .cp-footer-bottom{padding:12px 0 36px !important;gap:6px !important}
    }

    /* ---------------------------------------------------------------- wider screens */
    @media (min-width:761px){
      :root{--gutter:40px}
      .wrap{max-width:820px}
      .hero .wrap,.capture .wrap{max-width:1100px}
      .hero-top{padding-top:80px}
      :root{--display-size:clamp(34px,3.4vw,52px)}
      h1.big[class][class]{max-width:9.5em}
      .ph{display:none}
      .dk{display:inline}
      h1{font-size:clamp(30px,2.6vw,40px);line-height:1.12;max-width:12em}
      p{font-size:17px;line-height:26px;margin-bottom:18px}
      .hero-copy p{max-width:620px}
      .apps a{font-size:16px}
      :root{--drop:80px}
      .capture p{max-width:34em}
      .frame{width:min(380px,44svh)}
    }

    @media (prefers-reduced-motion:reduce){
      .big .pole{animation:none;color:inherit}
    }

    /* The site header, as on the About page. */
    .cp-global-nav{will-change:transform}

    
    /* ------------------------------------------------------------------ overrides
       One block. Every value stated once. This replaces eight appended blocks that
       were contradicting each other; the file had reached 95 !important rules and
       five separate .capture declarations, so edits were not reliably reaching the
       page. That, not taste, is why the score had stopped climbing. */

    /* the spacing scale: every vertical gap on this page is one of these */
    :root{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px}

    /* the wave field, from the site's own Science page, under the opening's type */
    .hero{position:relative;background:transparent;
          min-block-size:calc(100svh - var(--header));
          scroll-margin-top:var(--header);
          display:flex;flex-direction:column;padding:var(--s1) 0 var(--s2)}
    #dn-ocean{position:fixed;inset:0;z-index:0;width:100%;height:100%;
              display:block;pointer-events:none;opacity:1}
    .hero > *,.charge > *,.capture > *{position:relative;z-index:1}

    /* the bar scrolls away: a fixed bar cuts content at every position but a snap */
    .cp-global-nav,.cp-global-header,header.cp-global{position:relative !important;z-index:10 !important;
              background:#fff !important;border-bottom:0 !important}
    body{padding-top:0 !important;background:#fff}
    .charge,.capture{background:transparent}
    

    /* one axis: a flex item will not shrink below its content, and the film inside the
       frame is drawn wider than the screen, which was centring the wrappers */
    .hero > .wrap,.charge > .wrap,.capture > .wrap{min-width:0;max-width:100%;
              margin-left:0;margin-right:0}
    .hero,.charge,.capture{max-width:100vw;overflow-x:clip}

    /* the opening */
    .hero-top{padding-top:0}
    .hero-copy{padding-top:0;flex:1 1 auto;display:flex;flex-direction:column}
    .big[class][class],.hero h1[class]{margin:0 0 var(--s3)}
    /* max-width:none in the .big rule is the same property as max-inline-size, so the
       measures had to out-specify it or they did nothing at all */
    .hero .big[class][class]{max-inline-size:360px}
    .charge .big[class][class]{max-inline-size:280px}
    .capture .big[class][class]{max-inline-size:320px}
    .hero-copy p{margin:0 0 var(--s2)}
    .hero-copy p.credit[class][class]{font-size:12px !important;line-height:18px !important;color:var(--muted)}
    .apps-label{margin:0 0 var(--s1);padding-top:var(--s1)}
    .hero-copy .apps-label{margin-top:auto}
    .apps{margin:0}
    p.eyebrow.cue{margin:var(--s3) 0 0}

    /* the charge, as one module */
    .charge{min-block-size:100svh;display:flex;flex-direction:column;justify-content:center;
            padding:var(--s4) 0;scroll-margin-top:0}
    .charge h2{margin:0 0 var(--s3)}
    .frame{inline-size:min(calc(100vw - 40px),calc(100svh - 340px));
           max-width:none;aspect-ratio:1;
           margin-inline:auto}
    .disc .film{width:100%;height:100%;object-fit:cover;
                transform:scale(0.94);transform-origin:50% 50%;
                -webkit-mask-image:radial-gradient(circle at 50% 52%,#000 36%,rgba(0,0,0,0) 50%);
                        mask-image:radial-gradient(circle at 50% 52%,#000 36%,rgba(0,0,0,0) 50%)}
    .picker{padding-top:var(--s2)}
    .cap{margin:0 0 var(--s2);font:500 12px/16px var(--sans);letter-spacing:.04em;color:var(--ink)}
    .names{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);margin:0;padding:0;list-style:none;inline-size:100%}
    .names button{inline-size:100%;block-size:100%;min-block-size:44px;padding:0 0 6px;border:0;border-bottom:1px solid rgba(31,35,39,.28);border-radius:0;background:none;font:500 11px/15px var(--sans);color:var(--ink);text-align:center;white-space:normal;display:flex;align-items:center;justify-content:center}
    .names button[aria-pressed="true"]{background:none;color:var(--ink);border-bottom:2px solid var(--blue)}

    /* the conclusion, sized to what is in it */
    .capture{min-block-size:100svh;display:flex;flex-direction:column;justify-content:center;
             padding:var(--s4) 0;scroll-margin-top:0}
    .capture .big[class][class]{margin:0 0 var(--s3)}
    .capture p{margin:0}

    /* A screen under 620px tall cannot hold the first frame at the normal sizes: it
       measures 560 against 502 of room, and a frame taller than the screen is exactly
       what stops scroll-snap holding, because CSS treats an oversized snap area as
       valid at any position covering the viewport. Tightened just enough to fit.
       Everything here has to out-specify mobile-type.css, which pins these elements
       with !important at a weight no ordinary page rule reaches. */
    @media (max-height:620px){
      .hero-copy p.lead-copy[class][class]{font-size:14px !important;line-height:20px !important}
      .hero-copy p.credit[class][class]{font-size:11px !important;line-height:16px !important}
      .hero .big[class][class]{font-size:28px !important;line-height:32px !important}
      .hero .big[class][class]{margin:0 0 var(--s2)}
      .apps-label{white-space:nowrap;padding-top:var(--s1)}
      .hero-copy p{margin:0 0 var(--s1)}
      /* and the charge frame was still 11px over on a 568 tall screen */
      .charge,.capture{padding:var(--s2) 0}
    }

    /* the footer supports the conclusion rather than competing with it */
    .cp-footer .cp-footer-panel .cp-footer-newsletter h2{font-size:20px !important;
             line-height:23px !important;font-family:var(--sans) !important;
             font-weight:600 !important}
    .cp-footer .cp-footer-panel{padding-top:var(--s4) !important}
    /* the legal links and Back to top overlap by 53px of tap region at 320 wide */
    .cp-footer .cp-footer-bottom{padding:12px 0 60px !important}


/* ------------------------------------------------------------------ reconciliation
   The preview page loaded none of the site's deck stylesheets. The front page loads
   deck_theme.css, which pins everything inside <main> with !important:

     main :where(p, a, button, li, ...)  { color: #000 !important }
     main p, ...                         { font-size: 13px !important; line-height: 1.55 !important }

   Measured on the built page, that turned every colour pure black and the body copy 13 on
   20.15 where the approved page is 15 on 22. Both rules carry !important, so specificity
   decides, and an id beats them: #cp-peak-phone is (1,0,1) against main p at (0,0,2).
   Every value below is the one measured on the approved preview, not a fresh guess. */
#cp-peak-phone,
#cp-peak-phone :where(h1,h2,p,a,button,li,span,em,div,ul){color:var(--ink) !important}
#cp-peak-phone p{font-size:15px !important;line-height:22px !important;font-weight:400 !important}
#cp-peak-phone p.credit{font-size:12px !important;line-height:18px !important;
        color:var(--muted) !important}
#cp-peak-phone .eyebrow{font-size:12px !important;line-height:16px !important;
        font-weight:600 !important;letter-spacing:.08em !important;color:var(--muted) !important}
#cp-peak-phone .big{font-size:var(--display-size) !important;line-height:36px !important;
        font-family:var(--display) !important;font-weight:400 !important}
#cp-peak-phone .cap{font-size:12px !important;line-height:16px !important;
        font-weight:500 !important;letter-spacing:.04em !important}
#cp-peak-phone .names button,
#cp-peak-phone .apps a{font-size:11px !important;line-height:15px !important;
        font-weight:500 !important;color:var(--ink) !important}
/* the journal citation is the one link that stays blue */
#cp-peak-phone .hero-copy p a{color:var(--blue) !important}

@media (max-height:620px){
  #cp-peak-phone p.lead-copy{font-size:14px !important;line-height:20px !important}
  #cp-peak-phone p.credit{font-size:11px !important;line-height:16px !important}
  #cp-peak-phone .hero .big{font-size:28px !important;line-height:32px !important}
}