/* /alt. It opens on three sheets and one word. As the sheets part, the title
   comes in the middle, the kicker under it, then the dotted list; the title and kicker stay where they are
   while the list gives way, in the same spot, to an example of a contradiction. Then, still under it, a
   line, the count and the form come in, and the page scrolls on to the footer. Only opacity and transform
   move; the list, once replaced, is made inert by alt.js; the form never is. The header (wordmark |
   Free audit, no frame) shows once the form is in view. ?panels=tear: html.tear (alt.js). */
:root{--night:#17181b;--cream-hi:#fdf9f4}
body.alt{color:var(--cream-hi);overflow-x:hidden;timeline-scope:--intro,--form;background:var(--night)}
/* the night the page settles on: the full-bleed sheet as it is once the example is in (112vw by 104vh from
   -2vh, its horizon dimmed to .35), fixed, so the form and the footer sit on it and nothing repeats */
body.alt::before,body.alt::after{content:"";position:fixed;z-index:-1;left:-6vw;top:-2vh;width:112vw;height:104vh;pointer-events:none}
body.alt::before{background:radial-gradient(120% 60% at 50% 112%,rgba(255,180,138,.35) 0%,rgba(255,130,77,.35) 16%,rgba(237,101,49,.19) 34%,rgba(237,101,49,0) 62%),linear-gradient(180deg,#131417 0%,#1f2024 55%,#2d2f34 100%)}
body.alt::after{background:url(brand/grain-specks.svg) 0 0/100px 100px;opacity:.16;mix-blend-mode:screen}
body.alt main{flex:1}
body.alt main>:last-child{padding-bottom:0}

/* the header: the wordmark, a hairline, two words; no frame. Nudged onto one optical axis as on /alt. */
.alt-top{position:fixed;z-index:20;top:20px;left:24px;display:flex;align-items:center;gap:12px;height:24px;color:#fff}
.alt-top a{display:flex;color:inherit;border-radius:3px}
.alt-top a:focus-visible{outline:2px solid #ffc4a3;outline-offset:4px}
.alt-top .wordmark{height:17px;transform:translateY(-1.75px)}
.alt-top .rule{width:1px;height:15px;background:rgba(253,249,244,.4)}
.alt-top .name{font-size:13.5px;font-weight:500;line-height:16px;color:#fff;transform:translateY(-1px)}

/* the intro: two screens of runway, the stage pinned on it */
.intro{position:relative;height:372vh;view-timeline:--intro block}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--cream-hi)}
.p{position:absolute;top:5vh;bottom:5vh;filter:drop-shadow(0 18px 30px rgba(38,38,43,.28))}
.paper,.scene{position:absolute;inset:0}
.p-left{left:1.5vw;width:34vw;transform:rotate(-1.2deg)}
.p-left .paper{background:#ff824d url(brand/paper-orange.webp) center/cover;mask:url(brand/torn-edge-right.svg) right top/24px 100% no-repeat,linear-gradient(#000,#000) left top/calc(100% - 23px) 100% no-repeat;-webkit-mask:url(brand/torn-edge-right.svg) right top/24px 100% no-repeat,linear-gradient(#000,#000) left top/calc(100% - 23px) 100% no-repeat}
.p-right{right:1.5vw;width:34vw;transform:rotate(1deg)}
.p-right .paper{background:#88d3fc url(brand/paper-blue.webp) center/cover;mask:url(brand/torn-edge-left.svg) left top/24px 100% no-repeat,linear-gradient(#000,#000) right top/calc(100% - 23px) 100% no-repeat;-webkit-mask:url(brand/torn-edge-left.svg) left top/24px 100% no-repeat,linear-gradient(#000,#000) right top/calc(100% - 23px) 100% no-repeat}
.p-centre{left:50%;width:36vw;top:3vh;bottom:3vh;transform:translateX(-50%);z-index:2}
.scene{background-color:var(--night);background-image:linear-gradient(180deg,#131417 0%,#1f2024 55%,#2d2f34 100%);mask:url(brand/torn-edge-left.svg) left top/24px 100% no-repeat,url(brand/torn-edge-right.svg) right top/24px 100% no-repeat,linear-gradient(#000,#000) center top/calc(100% - 46px) 100% no-repeat;-webkit-mask:url(brand/torn-edge-left.svg) left top/24px 100% no-repeat,url(brand/torn-edge-right.svg) right top/24px 100% no-repeat,linear-gradient(#000,#000) center top/calc(100% - 46px) 100% no-repeat}
/* the horizon: its own layer, so it can fade as the intro ends (the page then has no seam) */
.scene::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 112%,#ffb48a 0%,#ff824d 16%,rgba(237,101,49,.55) 34%,rgba(237,101,49,0) 62%)}
.scene::after{content:"";position:absolute;inset:0;background:url(brand/grain-specks.svg) 0 0/100px 100px;opacity:.16;mix-blend-mode:screen;pointer-events:none}
.hint{position:absolute;z-index:3;left:0;right:0;bottom:5vh;margin:0;text-align:center;font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(253,249,244,.62)}

/* the one word; then the title in the middle, the kicker under it, and one place under them for the list,
   then the example */
.w1{position:absolute;inset:0;z-index:3;display:grid;place-items:center;margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,4.4vw,64px);letter-spacing:-.01em;color:var(--cream-hi);pointer-events:none}
.words{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px 14vh;pointer-events:none;text-align:center}
.kicker{margin:clamp(16px,2.6vh,26px) 0 0;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(253,249,244,.72)}
.w2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(34px,min(5.2vw,8.4vh),76px);line-height:1.04;letter-spacing:-.025em;color:#fff}
.w2 span{display:block}
.w2 .l2{margin-top:.12em;color:#ffb48a}
.swap{width:min(560px,86vw);margin-top:clamp(28px,5vh,52px);display:grid;grid-template-columns:minmax(0,1fr);text-align:left}
.swap>*{grid-area:1 / 1;align-self:start}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px;color:rgba(253,249,244,.9)}
.toc li{display:flex;align-items:baseline;gap:10px}
.toc li span:last-child{color:rgba(253,249,244,.62)}
.toc i{flex:1;border-bottom:1.5px dotted rgba(253,249,244,.38);transform:translateY(-4px)}

/* after the intro: the same night goes on (the stage ends on its gradient's last colour), the example, then the form */
/* after the example, pulled up under it: the line and the form, on the fixed night */
.flow{position:relative;z-index:5;overflow-x:clip;display:flex;flex-direction:column;align-items:center;margin-top:-34vh;padding:0 24px}
.line{margin:0 0 20px;font-size:14px;letter-spacing:.04em;color:rgba(253,249,244,.66);text-align:center}
.demo{margin:0 calc((100% - min(880px,92vw)) / 2);width:min(880px,92vw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:end}
.quote{min-width:0}
.qa{text-align:right}
.src{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(253,249,244,.5)}
.said{margin:10px 0 0;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.said mark{background:none;color:#ff9a66;font-weight:inherit;padding:0;margin:0;border-radius:0}
.flow .alt-form{margin-top:0;view-timeline:--form block}

/* the form: the dotted list's column, on the ink, hairline fields, white type */
.alt-form{width:min(560px,86vw);margin:0 auto;color:#fff}
.alt-form .formbox{margin:0}
.alt-form .fld label{color:rgba(253,249,244,.78);font-weight:500}
.alt-form .ask input:not([type=checkbox]),.alt-form .ask select{background:rgba(23,24,27,.45);border:1px solid rgba(253,249,244,.24);color:#fff}
.alt-form .ask input::placeholder{color:rgba(253,249,244,.48)}
.alt-form .ask input:hover,.alt-form .ask select:hover{border-color:rgba(253,249,244,.42)}
.alt-form .ask input:focus,.alt-form .ask select:focus{border-color:#ffc4a3;box-shadow:0 0 0 3px rgba(255,130,77,.28)}
.alt-form .ask [aria-invalid="true"]{border-color:#ffb48a}
.alt-form .pick select:invalid{color:rgba(253,249,244,.48)}
.alt-form .pick::after{border-color:rgba(253,249,244,.7)}
.alt-form option{color:var(--s00);background:#fff}
.alt-form .err{color:#ffc4a3}
.alt-form .ask .go{background:#fff;color:var(--s00)}
.alt-form .ask .go:hover{background:var(--cream-hi)}
.alt-form .ask .go:focus-visible{outline-color:#ffc4a3}
.alt-form .ask.code .sent{color:#fff}
.alt-form .ask .plain{color:rgba(253,249,244,.78)}
.alt-form .ask .plain:hover{color:#fff}
.alt-form .pillbtn.dark{background:#fff;color:var(--s00);border-color:#fff}
.alt-form .msg{color:rgba(253,249,244,.78)}

/* one line to Slite, centred; the arrow moves on when pointed at */
.alt-foot{text-align:center;padding:22px 24px 28px;background:var(--night)}
.alt-foot a{display:inline;text-align:center;text-wrap:balance;font-size:13px;font-weight:400;letter-spacing:.01em;color:rgba(253,249,244,.7);text-decoration:none;border-radius:4px;transition:color .15s}
.alt-foot a:hover{color:#fff}
.alt-foot a:focus-visible{outline:0;color:#fff;text-decoration:underline;text-underline-offset:4px}
.alt-foot .go{display:inline-block;width:14px;height:14px;margin-left:7px;vertical-align:-2px;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.alt-foot a:hover .go,.alt-foot a:focus-visible .go{transform:translateX(3px)}
body.alt .plainnote{color:rgba(253,249,244,.7);text-align:center}


.alt-form .agree{margin-top:14px;font-size:12.5px;letter-spacing:.01em;color:rgba(253,249,244,.58);text-align:center}
.alt-form .agree a{color:rgba(253,249,244,.86);text-decoration:underline;text-decoration-color:rgba(253,249,244,.36);text-underline-offset:3px}
.alt-form .agree a:hover{color:#fff;text-decoration-color:currentColor}
.alt-form .ask .go{margin-top:24px}


/* the footer: a comfortable gap under the form, then one line */
body.alt .alt-foot{background:transparent;padding:clamp(64px,10vh,96px) 24px 32px}

/* the sequence, as parts of the intro's runway */
@keyframes alt-left{0%{transform:rotate(-1.2deg)}16.2%,100%{transform:translateX(-112%) rotate(-5deg) scale(.86)}}
@keyframes alt-right{0%{transform:rotate(1deg)}16.2%,100%{transform:translateX(112%) rotate(5deg) scale(.86)}}
@keyframes alt-tear-left{0%{transform:rotate(-1.2deg)}5.9%{transform:translate(-3vw,1.5vh) rotate(-4deg)}17.6%,100%{transform:translate(-34vw,115vh) rotate(-16deg)}}
@keyframes alt-tear-right{0%{transform:rotate(1deg)}5.9%{transform:translate(3vw,1.5vh) rotate(4deg)}17.6%,100%{transform:translate(34vw,115vh) rotate(16deg)}}
@keyframes alt-centre{0%{width:36vw;top:3vh;bottom:3vh}17.6%,100%{width:112vw;top:-2vh;bottom:-2vh}}
@keyframes alt-word{0%,2.9%{opacity:1;transform:none}7.4%,100%{opacity:0;transform:translateY(-3vh) scale(.96)}}
@keyframes alt-hint{0%,1.5%{opacity:1}4.4%,100%{opacity:0}}
@keyframes alt-l1{0%,8.8%{opacity:0;transform:translateY(3vh)}14.7%,100%{opacity:1;transform:none}}
@keyframes alt-l2{0%,13.2%{opacity:0;transform:translateY(3vh)}19.1%,100%{opacity:1;transform:none}}
@keyframes alt-kicker{0%,17.6%{opacity:0;transform:translateY(2vh)}22.8%,100%{opacity:1;transform:none}}
@keyframes alt-list{0%,22.1%{opacity:0;transform:translateY(3vh)}27.9%,42.6%{opacity:1;transform:none}50.8%,100%{opacity:0;transform:translateY(-2vh)}}
@keyframes alt-qa{0%,47.3%{opacity:0;transform:translateX(-16vw)}59%,100%{opacity:1;transform:none}}
@keyframes alt-qb{0%,47.3%{opacity:0;transform:translateX(16vw)}59%,100%{opacity:1;transform:none}}
@keyframes alt-light{0%,61.4%{color:#fff;text-shadow:none}68.4%,100%{color:#ff9a66;text-shadow:0 0 22px rgba(255,130,77,.45)}}
@keyframes alt-glow{0%,49.7%{opacity:1}68.4%,100%{opacity:.35}}
/* once the sheet is the whole screen and its horizon dimmed, it is the fixed night exactly: the stage then
   lets it show through, so its words scroll away over the same night with no edge */
@keyframes alt-stage-bg{0%,17.6%{background-color:#fdf9f4}19.1%,100%{background-color:rgba(253,249,244,0)}}
@keyframes alt-sheet-out{0%,83.1%{opacity:1}87.5%,100%{opacity:0}}
@keyframes alt-in{0%{opacity:0;transform:translateY(4vh)}100%{opacity:1;transform:none}}
@keyframes alt-top{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
.w2 .l1,.w2 .l2,.kicker,.toc,.qa,.qb{opacity:0}
/* where the scroll rests: the middle of each hold (the list, then the lit example), and the form; a flick
   settles there, nothing holds the page (proximity only) */
.rest{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.r1{top:96vh}
.r2{top:206vh}

@media (prefers-reduced-motion:no-preference) and (min-width:701px){
 .p-left{animation:alt-left linear both}
 .p-right{animation:alt-right linear both}
 .tear .p-left{animation-name:alt-tear-left}
 .tear .p-right{animation-name:alt-tear-right}
 .p-centre{animation:alt-centre linear both,alt-sheet-out linear both}
 .stage{animation:alt-stage-bg linear both}
 .w1{animation:alt-word linear both}
 .hint{animation:alt-hint linear both}
 .w2 .l1{animation:alt-l1 linear both}
 .w2 .l2{animation:alt-l2 linear both}
 .kicker{animation:alt-kicker linear both}
 .toc{animation:alt-list linear both}
 .qa{animation:alt-qa linear both}
 .qb{animation:alt-qb linear both}
 .said mark{animation:alt-light linear both}
 .scene::before{animation:alt-glow linear both}
 /* on the intro: paused and set --p seconds in by alt.js, or on the intro's own timeline */
 .stage,.p-left,.p-right,.p-centre,.w1,.hint,.w2 .l1,.w2 .l2,.kicker,.toc,.qa,.qb,.said mark,.scene::before{animation-duration:1s;animation-play-state:paused;animation-delay:calc(var(--p,0) * -1s)}
 @supports (animation-timeline:view()){
  .stage,.p-left,.p-right,.p-centre,.w1,.hint,.w2 .l1,.w2 .l2,.kicker,.toc,.qa,.qb,.said mark,.scene::before{animation-duration:auto;animation-play-state:running;animation-delay:0s;animation-timeline:--intro;animation-range:contain 0% contain 100%}
  /* after the example: each part comes in as it enters the screen, and stays */
  .line,.formbox{animation:alt-in linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  .alt-top{animation:alt-top linear both;animation-timeline:--form;animation-range:entry 0% entry 40%}
 }
 html{scroll-snap-type:y proximity}
 .rest{scroll-snap-align:start}
 .flow .alt-form{scroll-snap-align:center}
 html:not(.form-seen) .alt-top{opacity:0}
 .alt-top{transition:opacity .4s ease}
}

/* still, and on a phone: no sheets, the same order down the page: title, kicker, list, example, line, form */
@media (prefers-reduced-motion:reduce),(max-width:700px){
 .intro{height:auto}
 .stage{position:relative;height:auto;padding:16vh 0 6vh;background:transparent}
 .p-left,.p-right,.p-centre,.w1,.hint,.rest{display:none}
 .words{position:relative;inset:auto;padding:0 16px}
 .w2 .l1,.w2 .l2,.kicker,.toc,.qa,.qb{opacity:1}
 .swap{display:flex;flex-direction:column;gap:9vh}
 .demo{margin:0}
 .flow{margin-top:0;padding-top:8vh}
 .alt-foot .go{transition:none}
}

/* a phone: the same stack, narrower */
@media (max-width:700px){
 .alt-top{top:16px;left:16px}
 .w2{font-size:clamp(30px,9vw,44px)}
 .kicker{font-size:11px;letter-spacing:.12em}
 .toc{font-size:14px}
 .swap{width:100%}
 .flow{padding:6vh 16px 0}
 .demo{width:100%;grid-template-columns:minmax(0,1fr);gap:22px}
 .qa{text-align:left}
 .qb{text-align:right}
 .flow .alt-form{width:100%}
 .ask .fields{grid-template-columns:minmax(0,1fr)}
}