/* Phone presentation: one generous hero, followed by clearly grouped exhibits. */
.redline-short{display:none}
@media(max-width:700px),(pointer:coarse) and (max-height:600px){
 .site-header{height:78px;padding-inline:24px;gap:16px}
 .site-header .brand img{width:104px}
 .site-header .brand span{display:none}
 .site-header nav{gap:18px;font-size:14px}
 .site-header nav a,.site-header .about-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;max-width:none;text-align:center;padding:10px 0;font-size:14px}

 .reveal-control{display:none!important}
 .hero-art{height:auto;aspect-ratio:1.55;margin-top:24px}
 .hero-media{inset:0}
 .hero.phone-hero .hero-world{display:none}
 .hero.phone-hero .hero-media>img,.hero.phone-hero .hero-media>video{object-fit:contain}

 /* Centered like the hero above them: three equal columns, the dividers kept. */
 .metrics{gap:0}
 .metric{text-align:center}
 .metric+.metric{padding-left:0}
 .metric>div{display:flex;align-items:baseline;justify-content:center;gap:8px}
 .metric strong{font-size:clamp(22px,6.6vw,29px)}
 .metric>div>span{display:inline;font-size:14px;line-height:1;margin:0}
 .metric p{margin-top:10px;margin-inline-start:0}
 .redline-short{display:inline}
 .redline-full{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

 .inspiration{display:flex;flex-direction:column;align-items:stretch;gap:22px}
 .inspiration-copy{max-width:none;text-align:left}
 .inspiration .assembly-film{width:calc(100% + 28px);margin:0 -14px;transform:translateX(-8%)}

 .story,.story.reverse{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;margin-top:52px}
 .story+.story{border-top:1px solid var(--line);padding-top:32px;margin-top:42px}
 .story>.story-copy,.story.reverse>.story-copy{display:contents}
 .story .story-copy>h2{grid-column:1;grid-row:1;margin-top:0;text-align:left}
 .story>.story-visual,.story.reverse>.story-visual{grid-column:1;grid-row:2;width:calc(100% + 24px);margin:0 -12px}
 .story .story-copy>p{margin:0;text-align:left}
 .story .inline-spec{border-top:0;margin-top:0;padding-top:6px;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .story .inline-spec p{margin-top:8px}

 .story .valve-story{display:block;min-height:0;aspect-ratio:auto;padding-bottom:0}
 /* The valves stay above 61% of their frame through the whole cycle; the window ends just under them. */
 .story .valve-render{aspect-ratio:2.1}
 .story .valve-frame{width:102%;left:1%;top:-16.4%}
 .story .valve-timing{display:block;width:100%;max-width:none;margin:10px 0 0}
 .story .timing-diagram,.story .timing-context{display:none}
 .story .timing-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:18px;margin:0;padding-inline:12px;text-align:center}
 .story .timing-values strong{font-size:28px;line-height:1.15}
 .story .timing-values strong .unit{font-size:17px}
 .story .timing-values p{font-size:14px;line-height:1.5;margin-top:8px}
 /* The gold inlet label is the legend of the gold curve; the diagram is hidden here, so both labels read alike. */
 .story .timing-values .inlet-label{color:#b9b4a8}
 .story .timing-values .inlet-label .gold-ink{background:none;filter:none;color:inherit!important;-webkit-text-fill-color:currentColor}

 .founder{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start;border-top:1px solid var(--line);padding-top:32px;margin-top:48px}
 .founder-copy{display:contents}
 .founder h2{grid-column:1;grid-row:1;margin-top:0;text-align:left}
 .founder-photo{grid-column:1;grid-row:2;width:100%;max-width:none}
 .founder h3,.founder p{margin-top:0}
 .field input,.field textarea{font-size:16px}
}

/* Portrait phones: the carbon image cropped to the wordmark, the wordmark at mid-height at every width. */
@media(max-width:700px){
 .craft{height:46vw}
 .craft img{object-position:50% 80%}
}

@media(pointer:coarse) and (min-width:701px) and (max-height:600px){
 .hero-art{aspect-ratio:2.25;max-height:330px}
 .story,.story.reverse,.founder,.inspiration{max-width:700px}
}

/* Second phone review: blend the native film into the page and simplify the transition. */
@media(max-width:700px),(pointer:coarse) and (max-height:600px){
 .hero.phone-hero .hero-media{background:var(--paper);isolation:isolate;will-change:auto}
 .hero.phone-hero .hero-media>img,.hero.phone-hero .hero-media>video{mix-blend-mode:lighten}
 .hero.phone-hero .hero-media>video{transition:none}
 .inspiration .assembly-film{display:none}
 .story+.story,.founder,.contact{position:relative;border-top:0}
 .story+.story::before,.founder::before,.contact::before{content:"";position:absolute;top:0;left:10%;width:80%;height:1px;background:var(--line);pointer-events:none}
}