.card{clip-path:inset(50%);opacity:0;pointer-events:none;margin:auto;position:fixed;inset:0;& .tagline{font-family:var(--font-narrow);text-transform:uppercase;place-items:center;margin:0;font-size:1.2em;font-weight:700;display:grid}& .cta{letter-spacing:.06em;color:var(--light);background:var(--primary);border-radius:var(--radius-pill);box-shadow:0 .5rem 1.25rem -.5rem var(--glow);padding:.35em .9em;font-weight:400;text-decoration:none}}body:has(.viewer:is([data-phase=settled],[data-phase=moving])) .card:has(.cta:focus-visible){inset:auto 0 calc(var(--footer-h) + var(--space-5));clip-path:none;opacity:1;width:fit-content;height:fit-content;&>:not(.tagline),& .idle{display:none}}.paper-card{--card:#fbfbf9;--card-ink:#2a292d;--card-muted:#77767b;width:min(100%, 22rem, (100dvh - var(--header-h) - var(--footer-h) - 4rem) * 1.8);perspective:60rem;-webkit-box-reflect:below .0625rem linear-gradient(to top, rgb(0 0 0/var(--reflect,.08)), transparent 50%);color:var(--card-ink);display:none;& .turn{aspect-ratio:90/50;transform-style:preserve-3d;transition:transform .8s var(--ease);position:relative}&[data-flipped] .turn{transform:rotateY(180deg)}& :is(.face,.back){font:inherit;color:inherit;background:linear-gradient(to top, color-mix(in srgb, var(--card), var(--card-ink) 5%), var(--card));backface-visibility:hidden;border:0;border-radius:.0625rem;margin:0;padding:0;position:absolute;inset:0;box-shadow:0 .0625rem .125rem #00000014,0 .5rem 1.5rem #0000000f}& .face{cursor:pointer;align-content:center;justify-items:center;gap:.625rem;padding-bottom:4%;display:grid}& .logo{width:66%;& svg{width:100%;height:auto}}& .tagline{font-family:var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:var(--card-muted);font-size:.75rem;font-weight:700}& .hint{width:.875rem;height:.875rem;color:var(--card-muted);opacity:.7;position:absolute;bottom:.625rem;right:.625rem;& svg{width:100%;height:100%}}& .back{text-align:left;flex-direction:column;padding:8%;display:flex;transform:rotateY(180deg)}& .name{font-family:var(--font-narrow);letter-spacing:.24em;text-transform:uppercase;margin:0 0 .3125rem;font-size:.9375rem;font-weight:700}& .role{font-family:var(--font-narrow);letter-spacing:.16em;text-transform:uppercase;color:var(--card-muted);margin:0;font-size:.5625rem;font-weight:700}& ul{gap:.3125rem;margin:auto 0 0;padding:0;display:grid}& li{align-items:center;gap:.5rem;margin:0;font-size:.75rem;list-style:none;display:flex}& .icon{filter:grayscale()brightness(.1);flex:none;width:.8125rem;height:.8125rem;& svg{width:100%;height:100%}}& a{color:inherit;text-decoration:none}}:root[data-theme=dark] .paper-card{--card:#f3eee5;--reflect:.04}.intro{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}@media (width<=48rem),(height<=30rem){.paper-card{display:block}main:has(>.paper-card){padding-bottom:calc(var(--space-4) + 8dvh);place-items:center;display:grid}.intro{clip-path:none;text-align:center;white-space:normal;width:min(100%,22rem);height:auto;color:color-mix(in srgb, var(--text), transparent 25%);margin-top:3.25rem;font-size:.9375rem;line-height:1.55;position:static;overflow:visible;& p{margin:0 0 .75rem}& a{color:var(--text);text-decoration-color:color-mix(in srgb, var(--primary), transparent 45%);text-underline-offset:.3em}}}:is(:root:has(.no-js),:root[data-scene=failed]){& .paper-card{display:block}& main:has(>.paper-card){padding-bottom:calc(var(--space-4) + 8dvh);place-items:center;display:grid}& .intro{clip-path:none;text-align:center;white-space:normal;width:min(100%,22rem);height:auto;color:color-mix(in srgb, var(--text), transparent 25%);margin-top:3.25rem;font-size:.9375rem;line-height:1.55;position:static;overflow:visible;& p{margin:0 0 .75rem}& a{color:var(--text);text-decoration-color:color-mix(in srgb, var(--primary), transparent 45%);text-underline-offset:.3em}}}@media (width>=48.0625rem) and (height>=30.0625rem){:root:not(:has(.no-js),[data-scene=failed]){& .intro:focus-within{inset:auto 0 calc(var(--footer-h) + var(--space-5));z-index:var(--z-chrome);clip-path:none;white-space:normal;width:min(36rem,100% - 2rem);height:auto;color:var(--ink);background:var(--paper);border-radius:var(--radius-m);box-shadow:var(--shadow-float);margin-inline:auto;padding:1rem 1.25rem;font-size:.9375rem;line-height:1.5;overflow:visible;& p{margin:0 0 .5rem}& p:last-child{margin:0}}}}@media (width<=48rem) and (prefers-reduced-motion:no-preference),(height<=30rem) and (prefers-reduced-motion:no-preference){.paper-card .turn{animation:card-hint 1.4s .9s var(--ease) both}}@keyframes card-hint{0%,to{rotate:y 0deg}45%{rotate:y -16deg}}.contacts{grid-template-columns:minmax(12rem,19rem) minmax(0,40em);justify-content:center;gap:clamp(2rem,5vw,5em);min-height:100%;display:grid}.profile{flex-direction:column;display:flex;& h1{color:var(--text);margin-bottom:.875rem;font-size:2.5rem}& .role{font-family:var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--text), transparent 38%);margin-bottom:2.25rem;font-size:.8125rem;font-weight:700;&:before{content:"";background:var(--primary);width:2rem;height:.0625rem;box-shadow:0 0 .75rem var(--glow);margin-bottom:.875rem;display:block}}& .reach{flex-direction:column;gap:1.75rem;margin-top:auto;display:flex}& ul{flex-direction:column;gap:.5rem;margin:0;padding:0;display:flex}& li{align-items:center;gap:.875rem;margin:0;padding:0;font-size:1.0625rem;list-style:none;display:flex}& .icon{filter:grayscale()brightness(.1);flex:none;width:1.125em;height:1.125em;transition:filter .5s}& .icon svg{width:100%;height:100%;display:block}& li:hover .icon{filter:grayscale(0) brightness(1) drop-shadow(0 0 .3125rem var(--textShadowColor))}& :is(a,a:visited){color:var(--text);white-space:nowrap;text-underline-offset:.3em;transition:text-decoration-color var(--motion-fast) var(--ease);text-decoration:underline #0000}& a:hover{text-decoration-color:var(--primary)}}.write{flex-direction:column;min-width:0;display:flex;& .lead{color:color-mix(in srgb, var(--text), transparent 25%);margin-bottom:2.5rem;font-size:1.0625rem;line-height:1.55}}@media (width<=48rem),(height<=30rem){.contacts{grid-template-columns:minmax(0,1fr);gap:2.5rem}.profile{& h1{font-size:2.125rem}& .role{margin-bottom:1.75rem}& .reach{gap:.75rem;margin-top:0}& ul{gap:0}& a{padding-block:.4375rem}}.write .lead{margin-bottom:2rem;font-size:1rem}}.sheet[data-shot=tablet]:has(.deck){padding:0;overflow:hidden}.sheet .deck{--slide-pad:clamp(1.5rem, 3.2vw, 3rem);--line:color-mix(in srgb, var(--text), transparent 90%);--shade:var(--dark);--plate:white;--accent:var(--primary);--bar:#dee0e2;--bar-ink:#232629;--bar-h:1.75rem;grid-template-rows:minmax(0,1fr) auto;max-width:none;height:100%;margin:0;display:grid;:root[data-theme=dark] &{--shade:black;--plate:color-mix(in srgb, var(--paper), white 7%);--accent:color-mix(in srgb, var(--primary), white 25%);--bar:#292c30;--bar-ink:#fcfcfc}& .track{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;min-height:0;display:flex;overflow:auto hidden;&::-webkit-scrollbar{display:none}}& .slide{min-width:0;padding:var(--slide-pad) var(--slide-pad) .5rem;scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,3vw,2.75rem);display:grid}& .shot{box-shadow:0 0 0 .0625rem color-mix(in srgb, var(--bar-ink), var(--bar) 78%), 0 .25rem .75rem -.125rem color-mix(in srgb, var(--shade), transparent 84%), 0 1.25rem 2.5rem -1rem color-mix(in srgb, var(--shade), transparent 55%);background:#fff;border-radius:.3125rem .3125rem 0 0;grid-template-rows:auto minmax(0,1fr);align-self:stretch;margin:0;display:grid;position:relative;overflow:hidden;&:before{content:attr(data-url);height:var(--bar-h);font-family:var(--font);font-size:.8125rem;line-height:var(--bar-h);text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--bar-ink);background:var(--bar);border-bottom:.0625rem solid color-mix(in srgb, var(--bar-ink), transparent 88%);padding:0 5rem;display:block;overflow:hidden}&:after{content:"";height:var(--bar-h);background:var(--bar-ink);pointer-events:none;position:absolute;inset:0 0 auto;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cellipse cx='8' cy='8' rx='2.75' ry='6.5'/%3E%3Cpath d='M1.5 8h13M2.6 4.5h10.8M2.6 11.5h10.8'/%3E%3C/svg%3E") .5rem/1rem 1rem no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 18' fill='none' stroke='black' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M4 7l5 5 5-5M28 11l5-5 5 5'/%3E%3Ccircle cx='57' cy='9' r='9' fill='black' fill-opacity='.12' stroke='none'/%3E%3Cpath d='M53 5l8 8m0-8l-8 8'/%3E%3C/svg%3E") right .375rem center/4.125rem 1.125rem no-repeat}&>img:first-child{object-fit:cover;object-position:50% 0;width:100%;height:100%;min-height:0;transition:object-position 1.2s var(--ease);display:block}&:hover>img:first-child{object-position:50% 100%;transition-duration:7s;transition-timing-function:linear}}& .logo{object-fit:contain;border-radius:var(--radius-s);width:auto;max-width:50%;height:3rem;box-shadow:0 .5rem 1.25rem -.5rem color-mix(in srgb, var(--shade), transparent 60%);background:#fffffff0;padding:.5rem .75rem;position:absolute;bottom:1rem;left:1rem}& .meta{font-family:var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .625rem;font-size:.8125rem;font-weight:700}& .slide h2{font-family:var(--font);letter-spacing:-.015em;text-transform:none;color:var(--text);margin:0 0 .5rem;font-size:2.25rem;line-height:1.05;display:block}& .about>p:not([class]){color:var(--quiet);margin:0 0 1.25rem;font-size:1.125rem;line-height:1.45}& ul.features{margin:0 0 1.25rem;& li{align-items:baseline;gap:.65em;margin:0 0 .5rem;font-size:1.0625rem;line-height:1.35;list-style:none;display:flex;&:before{content:"";background:var(--primary);flex:none;width:.375rem;height:.375rem;translate:0 -.12em}}}& .stack{font-family:var(--font-narrow);letter-spacing:.03em;color:color-mix(in srgb, var(--text), transparent 38%);margin:0;font-size:.875rem}& .cover{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);& :is(.eyebrow,h1 em){color:var(--accent)}& h1{margin-bottom:.75rem;font-size:3rem}& .lead{margin-bottom:1.5rem}}& .hint{font-family:var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--text), transparent 38%);margin:0;font-size:.8125rem}& :is(ul.collage,ul.wall){align-self:stretch;gap:.75rem;margin:0;display:grid;& li{border-radius:var(--radius-s);min-height:0;box-shadow:0 0 0 .0625rem var(--line);background:#fff;margin:0;list-style:none;overflow:hidden}& img{object-fit:cover;object-position:50% 0;width:100%;height:100%;display:block}}& ul.collage{grid-template:repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr))}& .more{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}& ul.wall{grid-template:repeat(5,minmax(0,1fr))/repeat(4,minmax(0,1fr));gap:.5rem}& .featured{grid-template-columns:minmax(0,1fr);padding-bottom:.5rem;& .shot{grid-area:1/1}& .about{background:color-mix(in srgb, var(--plate), transparent 10%);border-radius:var(--radius-l);max-width:25rem;box-shadow:0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--shade), transparent 45%);backdrop-filter:blur(.75rem);grid-area:1/1;place-self:end start;margin:0 0 1.25rem 1.25rem;padding:1.5rem 1.75rem}& .logo{inset:auto 1.25rem 1.25rem auto}& ul.features{margin-bottom:.875rem}}& .chapter{grid-template-columns:minmax(0,1fr);position:relative;overflow:hidden;& .num{right:var(--slide-pad);font-family:var(--font-narrow);letter-spacing:-.04em;color:color-mix(in srgb, var(--text), transparent 93%);pointer-events:none;font-size:18rem;font-weight:700;line-height:1;position:absolute;bottom:-2.5rem}& .about{max-width:34rem;position:relative}& h2{font-size:3rem}& .about>p:not([class]){border-left:.125rem solid var(--primary);padding-left:1rem;font-size:1.25rem}}& .slide :is(.shot,.about>*,ul.features li,ul.collage li,ul.wall li,.num),& .featured .about{transition:opacity .6s var(--ease), translate .7s var(--ease)}&[data-ready] .slide:not([data-active]){& .shot,& .num{opacity:0;translate:2rem}&.featured .about,& :is(.about>*,ul.features li,ul.collage li,ul.wall li){opacity:0;translate:0 .75rem}}& .slide[data-active]{& .about>:nth-child(2){transition-delay:60ms}& .about>:nth-child(3){transition-delay:.12s}& .about>:nth-child(n+4){transition-delay:.18s}& ul.features li:first-child{transition-delay:.24s}& ul.features li:nth-child(2){transition-delay:.32s}& ul.features li:nth-child(3){transition-delay:.4s}& :is(ul.collage,ul.wall) li:nth-child(odd){transition-delay:.1s}& :is(ul.collage,ul.wall) li:nth-child(3n){transition-delay:.2s}}& .controls{padding:.75rem var(--slide-pad) calc(var(--slide-pad) * .6);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}& .counter{font-family:var(--font-narrow);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:color-mix(in srgb, var(--text), transparent 38%);font-size:.875rem}& .dots{gap:.375rem;display:flex}& .dot{appearance:none;background:color-mix(in srgb, var(--text), transparent 80%);border-radius:var(--radius-pill);cursor:pointer;width:.5rem;height:.5rem;transition:width var(--motion-med) var(--ease), background-color var(--motion-med) var(--ease);border:0;padding:0;&:hover{background:color-mix(in srgb, var(--text), transparent 60%)}&[aria-current]{background:var(--primary);width:1.5rem}}& .arrows{justify-content:flex-end;gap:.5rem;display:flex}& .arrow{appearance:none;width:2.5rem;height:2.5rem;color:var(--text);background:var(--plate);box-shadow:0 0 0 .0625rem color-mix(in srgb, var(--text), transparent 88%), 0 .375rem 1rem -.5rem color-mix(in srgb, var(--shade), transparent 60%);cursor:pointer;transition:color var(--motion-fast) var(--ease), translate var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease);border:0;border-radius:50%;place-items:center;padding:0;display:grid;&>span,& svg{width:1.25rem;height:1.25rem;display:block}&:hover:not([aria-disabled=true]){color:var(--primary);translate:0 -.0625rem}&[aria-disabled=true]{cursor:default;opacity:.35}}@media (width<=37.5rem){& .slide,& .cover,& .more{grid-template-columns:minmax(0,1fr)}}}.load-indicator{width:9.375rem;height:.0625rem;display:flex;&>[aria-hidden]{background:var(--primary);box-shadow:0 0 1.25rem var(--primary);animation:load-indicator .8s calc(var(--i) * -.08s) infinite alternate ease;border-radius:.125rem;flex:1}}@keyframes load-indicator{to{background:0 0;flex:10;box-shadow:0 0 #0000}}@media (prefers-reduced-motion:reduce){.load-indicator>[aria-hidden]{animation:none}}.inquiry{--under:color-mix(in srgb, var(--text), transparent 72%);--under-strong:color-mix(in srgb, var(--text), transparent 45%);--row:1.75rem;flex-direction:column;flex:1;display:flex;& .fields{flex-direction:column;flex:1;gap:1.625rem;display:flex}& :where(input[type=text],textarea){height:auto;color:var(--text);background:linear-gradient(var(--primary), var(--primary)) left bottom / 0 .0625rem no-repeat, linear-gradient(var(--under), var(--under)) left bottom / 100% .0625rem no-repeat;box-shadow:none;transition:background-size var(--motion-med) var(--ease), box-shadow var(--motion-med) var(--ease);border:0;border-radius:0;padding:.375rem 0 .4375rem;font-size:1.0625rem;line-height:1.5}& :where(input[type=text],textarea):hover{--under:var(--under-strong);border-color:#0000}& :where(input[type=text],textarea):focus-visible{box-shadow:0 .75rem .75rem -.75rem var(--glow);background-color:#0000;background-size:100% .0625rem,100% .0625rem}& textarea{height:calc(var(--row) * 4);max-height:calc(var(--row) * 4);line-height:var(--row);background:linear-gradient(var(--primary), var(--primary)) left bottom / 0 .0625rem no-repeat scroll, repeating-linear-gradient(transparent 0 calc(var(--row) - .0625rem), var(--under) calc(var(--row) - .0625rem) var(--row)) 0 0 / 100% var(--row) local;padding:.3125rem 0 0}& textarea:focus-visible{background-size:100% .0625rem, 100% var(--row)}& .topics{border:0;min-width:0;margin:0;padding:0;& legend{margin-bottom:.75rem;padding:0}}& .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem 1.5rem;display:grid}& .option{color:color-mix(in srgb, var(--text), transparent 25%);cursor:pointer;transition:color var(--motion-fast) var(--ease);flex-direction:row;align-items:center;gap:.625rem;font-size:1rem;line-height:1.3;&:hover,&:has(:checked){color:var(--text)}}& :is(input[type=radio],input[type=checkbox]){border:.0625rem solid var(--under-strong);width:1rem;height:1rem;box-shadow:none;cursor:pointer;transition:background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);background:0 0;border-radius:.125rem;flex:none;margin:0;padding:0;&:hover{border-color:var(--text)}&:checked{background-color:var(--primary);border-color:var(--primary);box-shadow:0 0 .625rem var(--glow)}&:focus-visible{box-shadow:0 0 0 .25rem var(--ring);outline:0}}& input[type=checkbox]:checked{background:var(--primary) url(/i/tick.svg) center / 85% no-repeat}& input[type=radio]:checked{background:var(--primary) content-box;box-shadow:0 0 .5rem -.125rem var(--glow);padding:.1875rem}&:not([data-phase=idle]) .fields{display:none}& .label{font-family:var(--font-narrow);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--text), transparent 38%);font-size:.8125rem;font-weight:700}& :is(label,.topics):focus-within .label{color:var(--primary)}& .terms{color:color-mix(in srgb, var(--text), transparent 25%);cursor:pointer;flex-direction:row;align-items:flex-start;gap:.75rem;font-size:.875rem;line-height:1.45}& .terms a{color:inherit;text-decoration-color:color-mix(in srgb, currentColor, transparent 60%);&:hover{color:var(--primary);text-decoration-color:currentColor}}& .terms input{margin-top:.1875rem}& .send{height:3rem;font-family:var(--font-narrow);letter-spacing:.14em;text-transform:uppercase;background:var(--primary);border-radius:var(--radius-s);box-shadow:0 .0625rem .125rem color-mix(in srgb, var(--primaryDark), transparent 60%), 0 .75rem 1.25rem -.875rem var(--glow);align-self:flex-start;margin-top:auto;padding:0 1.5rem 0 1.75rem;font-size:1rem;&:hover{box-shadow:0 .0625rem .125rem color-mix(in srgb, var(--primaryDark), transparent 60%), 0 .875rem 1.75rem -.75rem var(--glow)}}& .plane svg{width:1.15em;height:1.15em;transition:translate var(--motion-med) var(--ease-spring);display:block}& .send:hover:not(:disabled) .plane svg{translate:.15em -.15em}& .trap{position:absolute;left:-100vw}& .status{text-align:center;flex-direction:column;align-items:center;margin:auto;display:flex}& .mark svg{width:5.5rem;height:5.5rem;margin-bottom:1.5rem;display:block}& .title{margin:0 0 .5rem;font-size:1.75rem}&[data-phase=success] :is(.mark,.title){color:var(--success)}&[data-phase=error] :is(.mark,.title){color:var(--danger)}}@media (width<=48rem),(height<=30rem){.inquiry .send{align-self:stretch}}@media (width<=30rem){.inquiry .options{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:no-preference){.inquiry .mark{& .ring{animation:.75s mark-ring}& .tick{stroke-dasharray:1;animation:.75s both mark-tick}& .cross{transform-box:fill-box;transform-origin:50%;animation:.775s both mark-cross}& .cross.late{animation-duration:.975s}}}@keyframes mark-ring{0%,50%{stroke-opacity:.2}90%,to{stroke-opacity:1}}@keyframes mark-tick{0%,54%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes mark-cross{0%,54%{scale:0}70%{scale:.7}84%{scale:1.1}to{scale:1}}
