/* Applications uses the shared shell, typography and appearance settings. */
.application-story{--as-space:clamp(76px,9vw,124px);max-width:1100px;margin:0 auto;padding-bottom:32px}
.application-story .as-eyebrow{font-size:13px;line-height:1.5;letter-spacing:.08em;color:var(--muted);margin:0 0 22px;font-weight:500}
.application-story h1{font-size:clamp(56px,6.3vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.055em;margin:0 0 28px;max-width:760px}
.application-story h2{font-size:clamp(34px,4vw,54px);font-weight:500;line-height:1.08;letter-spacing:-.043em;margin:0 0 24px}
.application-story p{font-size:19px;line-height:1.58;max-width:600px;margin:0 0 24px;color:var(--muted)}
.application-story .as-lead{font-size:clamp(20px,2vw,25px);max-width:650px;line-height:1.5;margin-bottom:44px}
.application-story .as-photo{margin:0;overflow:hidden;border-radius:14px;background:var(--soft);isolation:isolate}
.application-story .as-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.application-story .as-hero img{object-position:58% 50%}
.application-story .as-premise{font-size:20px;margin:30px 0 0;max-width:none;line-height:1.55;color:var(--fg)}
.application-story .as-chapter{margin-top:var(--as-space);scroll-margin-top:118px}
.application-story .as-chapter-copy{margin-bottom:34px;max-width:660px}
.application-story .as-chapter-copy>p:last-child{margin-bottom:0}
.application-story .as-detail{max-width:660px;margin:18px 0 0;border:0;background:transparent}
.application-story .as-detail summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:48px;padding:10px 0;list-style:none;font-size:15px;font-weight:500;color:var(--fg);line-height:1.45}
.application-story .as-detail summary::-webkit-details-marker{display:none}
.application-story .as-detail summary span{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;font-size:23px;font-weight:300;transition:transform 200ms ease}
.application-story .as-detail[open] summary span{transform:rotate(45deg)}
.application-story .as-detail>div{padding:12px 26px 8px 0}
.application-story .as-detail p{font-size:16px;line-height:1.65;margin-bottom:16px}
.application-story .as-detail p:last-child{margin-bottom:0}
.application-story .as-detail .quiet-button{font-size:15px;margin-top:8px}
.application-story .as-reason{margin:var(--as-space) 0;padding:clamp(30px,5vw,64px);border-radius:14px;background:var(--fg);color:var(--bg);scroll-margin-top:118px}
.application-story .as-reason .as-eyebrow,.application-story .as-reason p{color:inherit;opacity:.78}
.application-story .as-reason h2{color:inherit}
.application-story .as-reason .as-reason-lead{font-size:21px;max-width:620px}
.application-story .as-reason .as-detail summary,.application-story .as-reason .quiet-button{color:inherit}
.application-story .as-principle{display:flex;flex-direction:column;gap:22px;margin:42px 0;font-size:clamp(21px,2.5vw,30px);line-height:1.35;letter-spacing:-.025em}
.application-story .as-principle>span:first-child{opacity:.6}
.application-story .as-principle strong{font-weight:500;max-width:500px}
.application-story .as-principle-rule{height:1px;width:70px;background:currentColor;opacity:.35}
.application-story .as-reason :focus-visible{outline-color:var(--bg)}
.application-story .as-control{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(24px,4vw,56px);align-items:center;scroll-margin-top:118px}
.application-story .as-phone img{aspect-ratio:2/3;object-fit:cover}
.application-story .as-control h2{font-size:clamp(30px,3.4vw,46px)}
.application-story .as-control p:not(.as-eyebrow){font-size:18px}
.application-story .as-close{margin-top:var(--as-space);padding:0 0 22px;max-width:660px}
.application-story .as-close .button{margin:4px 0 22px}
.application-story .as-close .as-release{font-size:14px;margin:0;line-height:1.5}
.application-story .as-institution-link{display:inline-flex;align-items:center;gap:12px;margin-top:38px;font-size:15px;color:var(--muted);line-height:1.5}
.application-story .as-institution-link:hover{color:var(--fg)}
.application-story .as-institution-link svg{flex:0 0 20px;width:20px;height:20px}
@media(max-width:760px){.application-story h1{font-size:clamp(49px,10.5vw,72px)}.application-story h2{font-size:clamp(33px,7.5vw,45px)}.application-story p{font-size:18px}.application-story .as-eyebrow{font-size:12px;margin-bottom:17px}.application-story .as-lead{font-size:21px;margin-bottom:30px}.application-story .as-photo{border-radius:12px}.application-story .as-hero img{aspect-ratio:4/3}.application-story .as-premise{font-size:18px;margin-top:24px}.application-story .as-chapter-copy{margin-bottom:24px}.application-story .as-chapter,.application-story .as-control,.application-story .as-reason{scroll-margin-top:108px}.application-story .as-control{grid-template-columns:1fr 1fr;gap:24px}.application-story .as-control h2{font-size:30px}.application-story .as-reason{padding:30px 24px}.application-story .as-reason .as-reason-lead{font-size:19px}}
@media(max-width:600px){.application-story .as-control{grid-template-columns:1fr}.application-story .as-control>div{grid-row:1}.application-story .as-phone{max-width:430px}.application-story .as-phone{max-width:320px;margin-inline:auto}.application-story .as-phone img{aspect-ratio:2/3;object-fit:contain;object-position:center}.application-story .as-reason h2{font-size:33px}.application-story .as-detail summary{font-size:14px}.application-story .as-detail>div{padding-right:0}.application-story .as-control h2{font-size:35px}.application-story .as-hero img{aspect-ratio:1/1;object-position:60% center}}
@media(prefers-reduced-motion:reduce){.application-story .as-detail summary span{transition:none}}

/* Preserve the complete physical interaction in each camera composition. */
.application-story .as-control{display:flex;flex-direction:column;align-items:stretch;gap:30px}.application-story .as-control>div{max-width:660px}.application-story .as-control h2{font-size:clamp(34px,4vw,54px)}.application-story .as-control .as-photo{max-width:none}
@media(max-width:760px){.application-story .as-hero img{aspect-ratio:3/2;object-position:center}.application-story .as-control h2{font-size:clamp(33px,7.5vw,45px)}}
