/* Built by _dev/bundle.mjs from assets/home/ (10-hero.css, 15-say.css, 40-built.css, 60-launched.css, 70-hosted.css, 80-behind.css, 85-make.css, 90-start.css). Edit the pieces, not this file. */
.hero { position: relative; isolation: isolate; overflow: clip; container-type: inline-size; }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--chalk); transition: background-color .5s; }
.hero__in {
--hs: max(3.25rem, min(12.2cqw, (76svh - 236px) / 2.7));
--hc: var(--ink); --hw: 800;
display: grid; grid-template-rows: auto 1fr auto; row-gap: 20px;
min-height: max(100svh, 640px);
padding: 104px var(--gut) clamp(22px, 4.5svh, 48px);
color: var(--ink);
transition: color .4s;
}
.hero__h {
font-size: var(--hs); line-height: .9; letter-spacing: -.035em;
font-weight: var(--hw);
color: var(--hc);
transition: font-weight .45s steps(4, end), color .4s;
text-wrap: nowrap; white-space: nowrap;
}
.hero__w { position: relative; display: block; width: fit-content; cursor: pointer; border-radius: .06em; -webkit-tap-highlight-color: transparent; }
.hero__w--launched { margin-left: .5em; }
.hero__w--hosted { margin-left: 1em; }
.hero__w--built { display: inline-block; }
.hero__w::before { content: ""; position: absolute; right: calc(100% + .05em); top: .5em; width: min(.15em, var(--gut) - 7px); aspect-ratio: 9 / 10; translate: 0 -50%; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); scale: 0; transform-origin: 100% 50%; transition: scale .3s var(--spring); }
#side-built:checked ~ .hero__in .hero__w--built::before,
#side-launched:checked ~ .hero__in .hero__w--launched::before,
#side-hosted:checked ~ .hero__in .hero__w--hosted::before { scale: 1; }
#side-built:focus-visible ~ .hero__in .hero__w--built,
#side-launched:focus-visible ~ .hero__in .hero__w--launched,
#side-hosted:focus-visible ~ .hero__in .hero__w--hosted { outline: 3px solid var(--ring); outline-offset: .06em; box-shadow: 0 0 0 3px var(--ring-2); }
.hero__sign { margin-left: .9rem; vertical-align: calc(var(--hs) * .36); font-family: var(--font); letter-spacing: 0; }
.hero__sign .wedge { rotate: 90deg; }
.hero__row { grid-row: 3; display: grid; gap: 28px clamp(24px, 4cqw, 64px); align-items: end; }
.hero__say { display: grid; gap: clamp(12px, 1.8svh, 20px); justify-items: start; }
.hero__say .lead { font-size: clamp(1.1rem, 1rem + .42vw, 1.4rem); }
.hero__go { --gap: 10px 12px; }
.hero__p { grid-area: 1 / 1; max-width: 26em; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.hero__p--launched { visibility: visible; opacity: 1; }
#side-built:checked ~ .hero__in .hero__p--launched,
#side-hosted:checked ~ .hero__in .hero__p--launched { visibility: hidden; opacity: 0; }
#side-built:checked ~ .hero__in .hero__p--built,
#side-hosted:checked ~ .hero__in .hero__p--hosted { visibility: visible; opacity: 1; transition-delay: .1s, 0s; }
.hero__clock { margin: 0; }
.hero__show { position: relative; justify-self: center; width: min(100%, 660px); }
.hero__frame { position: relative; }
.hero__frame .frame__body { flex: none; aspect-ratio: 16 / 7.4; container-type: size; }
.hero__tag { display: none; }
.hero__tag--launched { display: block; }
#side-built:checked ~ .hero__in .hero__tag--launched, #side-hosted:checked ~ .hero__in .hero__tag--launched { display: none; }
#side-built:checked ~ .hero__in .hero__tag--built, #side-hosted:checked ~ .hero__in .hero__tag--hosted { display: block; }
.hero__wedge, .hero__outline {
position: absolute; z-index: -1; left: 50%; bottom: calc(100% - 16px);
width: min(58cqw, 118svh); height: auto; aspect-ratio: 10 / 9;
translate: -50% 0;
}
.hero__wedge { transition: translate .6s var(--ease-out); }
.hero__outline { overflow: visible; opacity: 0; transition: opacity .25s; }
.hero__outline polygon { fill: none; stroke: var(--red); stroke-width: 3px; stroke-dasharray: 10 9; }
.hsite { --u: min(1cqw, 2.3cqh); position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: calc(var(--u) * 2.2); padding: calc(var(--u) * 2.6) calc(var(--u) * 3) calc(var(--u) * 3); font-size: calc(var(--u) * 2.5); line-height: 1.15; background: #fff; }
.hsite__top { display: flex; align-items: center; gap: calc(var(--u) * 2.6); font-weight: 600; }
.hsite__top b { margin-right: auto; font-weight: 800; font-size: 1.25em; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52cqw; }
.hsite__main { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 2.4); min-height: 0; }
.hsite__copy { display: grid; align-content: center; justify-items: start; gap: calc(var(--u) * 1.6); min-height: 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: var(--ink); color: #fff; overflow: hidden; }
.hsite__copy p { font-size: calc(var(--u) * 4.1); font-weight: 800; letter-spacing: -.03em; line-height: .96; }
.hsite__btn { padding: calc(var(--u) * 1) calc(var(--u) * 2.2); border-radius: 99px; background: var(--red); color: var(--ink); font-weight: 700; font-size: .92em; }
.hsite__art { position: relative; border-radius: calc(var(--u) * 2); background: var(--blush); overflow: hidden; }
.hsite__art i { position: absolute; }
.hsite__art i:nth-child(1) { left: 12%; bottom: 0; width: 34%; height: 62%; border-radius: 99px 99px 0 0; background: var(--red); }
.hsite__art i:nth-child(2) { right: 14%; bottom: 0; width: 30%; height: 40%; border-radius: calc(var(--u) * 2) calc(var(--u) * 2) 0 0; background: var(--ink); }
.hsite__art i:nth-child(3) { right: 20%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.hsite__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); height: calc(var(--u) * 7.5); }
.hsite__tiles i { border-radius: calc(var(--u) * 1.6); background: var(--mist); }
.hsite__tiles i:nth-child(2) { background: var(--blush); }
.hsite__tiles i:nth-child(3) { background: var(--chalk); box-shadow: inset 0 0 0 2px var(--mist); }
.hsite--wire .hsite__top i { display: block; width: calc(var(--u) * 7); height: calc(var(--u) * 1.5); border-radius: 99px; background: var(--mist); }
.hsite--wire .hsite__top i:first-child { width: calc(var(--u) * 16); height: calc(var(--u) * 2.4); margin-right: auto; }
.hsite--wire .hsite__copy { background: none; box-shadow: inset 0 0 0 2px var(--mist); }
.hsite--wire .hsite__copy i { display: block; width: 86%; height: calc(var(--u) * 3); border-radius: 99px; background: var(--mist); }
.hsite--wire .hsite__copy i:nth-child(2) { width: 64%; }
.hsite--wire .hsite__copy i:nth-child(3) { width: 30%; height: calc(var(--u) * 3.6); }
.hsite--wire .hsite__art { background: none; box-shadow: inset 0 0 0 2px var(--mist); }
.hsite--wire .hsite__tiles i, .hsite--wire .hsite__tiles i:nth-child(n) { background: none; box-shadow: inset 0 0 0 2px var(--mist); }
.hsite--live { clip-path: inset(0); transition: clip-path .6s var(--ease-out); }
#side-built:checked ~ .hero__bg { background: #fff; }
#side-built:checked ~ .hero__in { --hw: 300; }
#side-built:checked ~ .hero__in .hero__wedge { translate: -50% -130%; }
#side-built:checked ~ .hero__in .hero__outline { opacity: 1; transition-delay: .2s; }
#side-built:checked ~ .hero__in .hsite--live { clip-path: inset(0 0 100% 0); }
#side-hosted:checked ~ .hero__bg { background: var(--ink); }
#side-hosted:checked ~ .hero__in { --hc: #fff; color: #fff; --fg: #fff; --bg: var(--ink); --fg-2: #B4BDDA; --ring: #fff; --ring-2: var(--ink); }
#side-hosted:checked ~ .hero__in .hero__start { --btn-bg: #fff; --btn-fg: var(--ink); }
#side-hosted:checked ~ .hero__in .hero__start:hover { --btn-bg: var(--red); }
.js .hero__h { animation: hero-type .45s steps(4, end) .5s backwards; }
.js .hero__wedge { animation: hero-drop .65s var(--ease-out) .5s backwards; }
.js .hero__outline { animation: hero-line .3s linear .5s backwards; }
.js .hsite--live { animation: hero-wipe .65s var(--ease-out) .72s backwards; }
@keyframes hero-type { from { font-weight: 300; } }
@keyframes hero-drop { from { translate: -50% -130%; } }
@keyframes hero-line { from { opacity: 1; } }
@keyframes hero-wipe { from { clip-path: inset(0 0 100% 0); } }
@media (min-width: 60em) {
.hero__row { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.hero__frame .frame__body { aspect-ratio: auto; height: clamp(150px, 24svh, 250px); }
.hero__go .btn { min-height: 56px; padding: 0 24px 0 20px; font-size: 1.0625rem; }
}
@media (max-width: 59.99em) {
.hero__in { --hs: max(3rem, min(17.4cqw, 9.2rem)); min-height: 0; padding-top: 96px; padding-bottom: 34px; row-gap: 0; }
.hero__row { margin-top: clamp(28px, 7cqw, 56px); }
.hero__show { grid-row: 1; width: 100%; max-width: 560px; }
.hero__wedge, .hero__outline { width: min(116cqw, 660px); }
.hero__go { display: none; }
.hero__sign { display: none; }
.hero__p { max-width: none; }
}
@media (max-width: 59.99em) and (max-height: 520px) { .hero__in { --hs: 3.25rem; } }
.say { padding-block: clamp(64px, 8vw, 128px) clamp(96px, 12vw, 200px); }
.say__in { display: grid; gap: clamp(40px, 5vw, 80px) clamp(32px, 6vw, 104px); }
.say__lead h2 { max-width: 13em; }
.say__lead .lead { margin-top: clamp(18px, 2vw, 30px); }
.say__list { display: flex; flex-wrap: wrap; gap: .08em .34em; font-size: var(--t-2); line-height: 1.04; letter-spacing: -.03em; }
.say__list a { border-radius: .08em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: .3em; text-underline-offset: -.06em; text-decoration-skip-ink: none; transition: text-decoration-color .2s; }
.say__list a:hover, .say__list a:focus-visible { text-decoration-color: var(--red); }
.say__what .note { margin-top: 16px; }
.say__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.say__logo { display: grid; place-items: center; height: 84px; padding: 16px 18px; border-radius: var(--r-m); background: var(--tile, #fff); }
.say__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.say__names .note { margin-top: 14px; }
@media (min-width: 60em) {
.say__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.say__lead { grid-column: 1 / -1; }
.say__logos { gap: 12px; }
.say__logo { height: 96px; }
}
.built { padding-bottom: 14svh; }
.built__open .lead { margin-top: clamp(18px, 2.2vw, 34px); }
.built__ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .26em; margin-top: clamp(44px, 6vw, 96px); font-size: var(--t-2); line-height: 1.1; }
.built__blank { display: flex; align-items: baseline; max-width: 100%; }
.built__name { width: 7.4em; max-width: 100%; min-height: 48px; padding: .05em .08em .1em; border: 0; border-bottom: max(5px, .1em) solid var(--red); border-radius: 0; background: none; letter-spacing: inherit; line-height: 1.2; caret-color: var(--red); }
.built__name::placeholder { color: var(--fg-2); opacity: 1; }
@supports (field-sizing: content) { .built__name { field-sizing: content; width: auto; min-width: 3em; } }
.built__open .note { margin-top: 14px; }
.built__scene { margin-top: clamp(40px, 5vw, 80px); }
.built__show { display: grid; justify-items: center; gap: 14px; container-type: inline-size; }
.built__steps { display: grid; gap: clamp(28px, 3vw, 44px); margin-top: 32px; }
.built__step { transition: opacity .3s; }
.built__step h3 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.6rem); }
.built__step p { margin-top: 12px; max-width: 31em; }
.built__next { margin-top: clamp(72px, 10vw, 160px); font-size: var(--t-2); line-height: 1; }
.built__next span { display: block; }
.built__frame { --frame-bar: var(--ink); justify-self: start; width: var(--fw, 100%); margin-inline: 0; translate: calc(50cqi - 50%); transition: width .7s var(--ease-out); }
.built__frame[data-held] { transition: none; }
.built__frame .frame__bar, .built__frame .frame__handle { --ring: #fff; color: #fff; }
.built__frame .frame__body { flex: none; height: clamp(340px, 100svh - 480px, 400px); border-radius: 0; container-type: size; }
.built__w { padding: 6px 10px; border-radius: 99px; background: #fff; color: var(--ink); font-size: .75rem; transition: background-color .3s; }
.built__w:empty { display: none; }
.built__sign { display: none; }
.built__sign .wedge { rotate: 180deg; }
.built__site { --g: clamp(8px, 2.6cqi, 14px); position: relative; display: grid; grid-template-rows: auto minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: var(--g); height: 100%; padding: calc(var(--g) * 1.5); background: #fff; font-size: .875rem; font-weight: 650; line-height: 1.1; contain: layout paint; }
.built__site *, .built__t::after { transition: color .35s, background-color .5s, opacity .35s, scale .5s var(--spring); transition-delay: calc(var(--d, 0) * 90ms); }
.built__top { display: flex; align-items: center; gap: 20px; min-width: 0; min-height: 36px; }
.built__brand { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 1.25rem/1.3 var(--font-d); letter-spacing: -.02em; }
.built__nav { display: none; gap: 20px; }
.built__menu { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); }
.built__menu::before { content: ""; width: 14px; height: 7px; border-block: 2px solid #fff; }
.built__t { position: relative; display: inline-block; }
.built__t::after { content: ""; position: absolute; inset: .14em 0; border-radius: 99px; background: var(--bar, var(--mist)); opacity: 0; }
.built__hero { --d: 1; --bar: #fff; display: grid; align-content: center; justify-items: start; gap: clamp(8px, 3cqh, 18px); min-height: 0; padding: 0 clamp(14px, 4cqi, 32px); border-radius: var(--r-m); background: var(--ink); color: #fff; overflow: hidden; }
.built__h { font: 800 clamp(1.3rem, 7.6cqi, 2rem)/1 var(--font-d); letter-spacing: -.03em; text-wrap: balance; }
.built__btn { --bar: var(--mist); padding: .7em 1.15em; border-radius: 99px; background: var(--red); color: var(--ink); }
.built__pic { --d: 2; position: relative; border-radius: var(--r-m); background: var(--blush); overflow: hidden; }
.built__site i { position: absolute; transform-origin: bottom; }
.built__pic i:nth-child(1) { left: 14%; bottom: 0; width: 26%; height: 72%; border-radius: 99px 99px 0 0; background: var(--red); }
.built__pic i:nth-child(2) { right: 14%; bottom: 0; width: 32%; height: 40%; border-radius: 12px 12px 0 0; background: var(--ink); }
.built__pic i:nth-child(3) { right: 21%; top: 13%; height: 27%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.built__tiles { --d: 3; display: grid; gap: calc(var(--g) * .7); }
.built__tile { --bar: #fff; position: relative; display: flex; align-items: center; height: clamp(34px, 10cqh, 46px); padding: 0 14px; border-radius: 10px; background: var(--mist); overflow: hidden; }
.built__tile:nth-child(2) { background: var(--blush); }
.built__tile:nth-child(3) { background: var(--ink); color: #fff; }
.built__tile i { right: 8%; top: 18%; height: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--red); }
.built__tile:nth-child(2) i { top: auto; bottom: 0; height: 64%; aspect-ratio: .74; border-radius: 99px 99px 0 0; background: var(--ink); }
.built__tile:nth-child(3) i { top: 36%; height: 28%; aspect-ratio: 2.6; border-radius: 99px; }
.built__q { --d: 2; position: absolute; z-index: 1; top: 30%; left: 36%; padding: 8px 12px; border-radius: 10px; background: var(--blush); white-space: nowrap; opacity: 0; scale: .6; }
.built__q:nth-of-type(2) { top: 51%; left: 30%; }
.built__q:nth-of-type(3) { inset: auto 6% 6% auto; }
@container frame (min-width: 440px) {
.built__site { grid-template: auto minmax(0, 1fr) 25cqh / 1.3fr 1fr; }
.built__top, .built__tiles { grid-column: 1 / -1; }
.built__nav { display: flex; }
.built__menu { display: none; }
.built__h { font-size: clamp(1.5rem, min(5.8cqi, 11cqh), 3rem); }
.built__tiles { grid-template-columns: 1fr 1fr 1.3fr; }
.built__tile { height: auto; align-items: start; padding: 14px 16px; }
.built__tile i { top: 40%; }
.built__q:nth-of-type(2) { left: 26%; }
.built__q:nth-of-type(3) { inset: 24% 9% auto auto; }
}
@container frame (max-width: 439.98px) and (max-height: 430px) {
.built__site { grid-template-rows: auto minmax(0, 1fr) auto; }
.built__pic { display: none; }
}
@media (max-width: 39.99em) {
.built__frame { padding-right: 0; }
.built__frame .frame__handle { display: none; }
}
@media (min-width: 40em) { .js .built__sign { display: inline-flex; } }
@media (min-width: 60em) {
.built__stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.built__show { grid-area: 1 / 2; }
.built__steps { grid-area: 1 / 1; margin-top: 0; }
.built__frame .frame__body { height: clamp(340px, 100svh - 260px, 560px); }
}
@media (min-width: 60em) and (min-height: 600px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.js .built__scene { height: 310svh; }
.js .built__stage { position: sticky; top: 0; height: 100svh; padding-top: 64px; }
.js .built__step { grid-area: 1 / 1; align-self: start; opacity: 0; }
.js .built__step h3 { font-size: var(--t-2); }
.js .built__step p { margin-top: 20px; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.42; }
.js [data-step="0"] .built__step:nth-child(1), .js [data-step="1"] .built__step:nth-child(2), .js [data-step="2"] .built__step:nth-child(3) { opacity: 1; transition-delay: .18s; }
}
@media (max-width: 59.99em) and (min-height: 760px) and (prefers-reduced-motion: no-preference) {
.js .built__scene { margin-top: 0; }
.js .built__show { position: sticky; top: 0; z-index: 1; padding-top: 82px; background: var(--bg); }
}
.is-staged[data-step="0"] .built__t { color: transparent; }
.is-staged[data-step="0"] .built__t::after, .is-staged[data-step="0"] .built__q { opacity: 1; scale: 1; }
.is-staged[data-step="0"] :is(.built__hero, .built__pic, .built__tile, .built__menu) { background-color: var(--mist); }
.is-staged[data-step="0"] .built__btn { background-color: #fff; }
.is-staged[data-step="0"] :is(.built__pic, .built__tile) i { scale: 0; }
.is-staged[data-step="2"] .built__w { background-color: var(--red); }
.launched { position: relative; isolation: isolate; }
.launched__gate { --p: 0; height: 190svh; margin-bottom: -34svh; }
.launched__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; overflow: clip; background: var(--red); }
.launched__curtain { --open: calc(var(--p) * (62.5vw + 72vh) - 6px); position: absolute; top: -140vmax; width: 120vmax; height: 280vmax; background: var(--mist); }
.launched__curtain--l { right: 50%; transform-origin: 100% 50%; rotate: -29deg; translate: calc(var(--open) * -1) 0; }
.launched__curtain--r { left: 50%; transform-origin: 0 50%; rotate: 29deg; translate: var(--open) 0; }
.launched__gate.is-live .launched__curtain { will-change: translate; }
.launched__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mist); opacity: calc(1 - var(--p) * 12); }
html:not(.js) .launched__gate { display: none; }
@media (prefers-reduced-motion: reduce) { .launched__gate { display: none; } }
.launched__in { position: relative; z-index: 1; padding: var(--pad) var(--gut) calc(var(--pad) + var(--r-xl)); }
@media (prefers-reduced-motion: no-preference) { .js .launched__in { padding-top: clamp(36px, 6svh, 72px); } }
.launched__title { color: #fff; }
@media (max-width: 59.99em) { .launched__title { font-size: min(19.5vw, 9rem); } }
.launched__intro { display: grid; gap: 20px clamp(32px, 6vw, 104px); margin-top: clamp(18px, 2.4vw, 36px); }
.launched__note { max-width: 25em; font-weight: 600; text-wrap: pretty; }
.launched__note .link { padding-block: 12px; }
.launched__deck { display: grid; gap: 22px; margin-top: clamp(44px, 6vw, 96px); }
.launched__exhibit {
--ep: clamp(12px, 1.9vw, 28px); --fh: clamp(300px, 100svh - 200px, 540px);
--fg-2: #44506F; --ring: var(--ink); --ring-2: #fff;
display: grid; gap: 14px; padding: var(--ep);
border-radius: calc(var(--r-l) + var(--ep)); background: var(--chalk); color: var(--ink);
}
.launched__hang { min-width: 0; min-height: calc(var(--fh) + 42px); }
.launched__frame { contain: layout paint; }
.launched__frame .frame__body { flex: none; height: var(--fh); }
.launched__width { flex: none; opacity: .72; }
.launched__hang .dm { overflow: hidden; overscroll-behavior: auto; }
.launched__hang .frame:focus-within .dm, .launched__hang .frame.is-touched .dm { overflow-y: auto; }
.launched__soon { display: grid; place-items: center; height: 100%; padding: 24px; color: var(--fg-2); font-weight: 600; text-align: center; }
.launched__side { display: contents; }
.launched__name { font-size: clamp(1.9rem, 1rem + 2.8vw, 3.75rem); margin: 6px 4px 0; }
.launched__sign { order: -1; justify-self: start; }
.launched__open { justify-self: start; margin-bottom: 4px; }
html:not(.js) .launched__open { display: none; }
@media (max-width: 29.99em) {
.launched__frame { padding-right: 0; }
.launched__frame .frame__handle, .launched__width { display: none; }
.launched__frame .frame__body { border-radius: 0 0 var(--r-l) var(--r-l); }
}
@media (min-width: 60em) {
.launched__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.launched__exhibit { --fh: clamp(480px, min(68svh, 100svh - 244px), 720px); grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); gap: clamp(20px, 2.6vw, 40px); }
.launched__side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(6px, 1vw, 16px) clamp(0px, .8vw, 12px) 4px 0; }
.launched__name { margin: 0; }
.launched__sign { order: 0; margin-top: auto; }
.launched__sign .wedge { rotate: 90deg; }
.launched__open { margin: 0; }
}
@media (min-width: 60em) and (min-height: 730px) and (prefers-reduced-motion: no-preference) {
.launched__deck { gap: clamp(40px, 22svh, 220px); padding-bottom: 14svh; }
.launched__exhibit { position: sticky; top: calc(92px + var(--i) * 16px); transform-origin: 50% 0; scale: calc(1 - var(--d, 0) * .035); transition: scale .5s var(--ease-out); }
.launched__exhibit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--blush); opacity: 0; transition: opacity .4s; }
.launched__exhibit.is-under::before { opacity: 1; }
.launched__exhibit .launched__frame { scale: calc(1 / (1 - var(--d, 0) * .035)); transition: scale .5s var(--ease-out); }
}
.launched__end { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; margin-top: clamp(56px, 8vw, 128px); }
.launched__ask { max-width: 11em; }
.launched__full { inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: clamp(8px, 2vw, 30px); border: 0; background: none; color: #fff; overflow: hidden; overscroll-behavior: contain; --ring: #fff; --ring-2: var(--ink); }
.launched__full[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.launched__full::backdrop { background: rgba(3, 19, 53, .82); }
.launched__full-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 6px 6px 22px; border-radius: 36px; background: var(--ink); }
.launched__full-say { font-size: .875rem; line-height: 1.3; }
.launched__full-say strong { display: inline-block; margin-right: .5em; font-size: 1rem; }
.launched__slot { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.launched__slot .frame__body { flex: 1; height: auto; }
.launched__frame.is-moving { view-transition-name: launched-frame; }
:root:has(.launched__frame.is-moving) .cap { view-transition-name: none; }
::view-transition-group(launched-frame) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(launched-frame), ::view-transition-new(launched-frame) { height: 100%; object-fit: cover; object-position: 0 0; overflow: clip; border-radius: var(--r-l); }
.hosted__in { display: grid; gap: clamp(52px, 9vw, 84px); }
.hosted__head .lead { max-width: 25em; margin-top: clamp(20px, 2.6vw, 40px); }
.hosted__receipt { width: min(100%, 32rem); margin-inline: auto; container-type: inline-size; }
.hosted__slip { padding: clamp(20px, 8cqw, 40px); padding-bottom: calc(clamp(14px, 5cqw, 24px) + var(--tail, 0px)); border-radius: var(--r-m) var(--r-m) 0 0; }
.hosted__tear {
display: block; aspect-ratio: 250 / 9; margin-top: -1px; background: var(--white);
clip-path: polygon(0 0, 100% 0, 98% 100%, 96% 0, 94% 100%, 92% 0, 90% 100%, 88% 0, 86% 100%, 84% 0, 82% 100%, 80% 0, 78% 100%, 76% 0, 74% 100%, 72% 0, 70% 100%, 68% 0, 66% 100%, 64% 0, 62% 100%, 60% 0, 58% 100%, 56% 0, 54% 100%, 52% 0, 50% 100%, 48% 0, 46% 100%, 44% 0, 42% 100%, 40% 0, 38% 100%, 36% 0, 34% 100%, 32% 0, 30% 100%, 28% 0, 26% 100%, 24% 0, 22% 100%, 20% 0, 18% 100%, 16% 0, 14% 100%, 12% 0, 10% 100%, 8% 0, 6% 100%, 4% 0, 2% 100%);
}
.hosted__mark { width: clamp(24px, 8cqw, 36px); height: auto; color: var(--red); }
.hosted__h { margin-top: clamp(14px, 4.6cqw, 22px); font-size: clamp(1.45rem, 7cqw, 2.1rem); line-height: 1.02; letter-spacing: -.025em; }
.hosted__rows { --fs: clamp(2rem, 11.4cqw, 3.4rem); margin-top: clamp(22px, 8cqw, 40px); }
.hosted__row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--fs) * 3.2); column-gap: 12px; align-items: start; padding-bottom: clamp(2px, 1.2cqw, 6px); }
.hosted__row > dt { padding-top: .22em; font-size: clamp(.9375rem, 3.4cqw, 1.0625rem); font-weight: 600; line-height: 1.28; text-wrap: balance; }
.hosted__row > dd { display: flex; flex-direction: column; align-items: flex-end; }
.hosted__fig { width: calc(100% + 1.2em); text-align: right; font-family: var(--font-d); font-size: var(--fs); font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.hosted__unit { display: inline-block; width: 2.2em; padding-left: .3em; text-align: left; font-family: var(--font); font-size: .4em; font-weight: 650; letter-spacing: 0; }
.hosted__more { width: 11em; min-height: 1.4em; text-align: right; font-size: .875rem; line-height: 1.4; color: var(--fg-2); white-space: nowrap; }
.hosted__server { margin-top: clamp(14px, 4cqw, 18px); padding-top: clamp(16px, 5cqw, 24px); border-top: 2px dashed var(--rule); font-weight: 600; line-height: 1.35; }
.hosted__slip .note { margin-top: .55em; font-size: clamp(.8125rem, 3.9cqw, .9375rem); text-wrap: pretty; }
.js .hosted__cached { min-height: 2.9em; }
.hosted__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; width: min(100%, 32rem); margin: clamp(26px, 7vw, 40px) auto 0; }
html:not(.js) .hosted__ask { display: none; }
.hosted__ask > .note { flex: 1 1 13em; max-width: 19em; }
.hosted__again { padding-block: 12px; line-height: 1.15; text-align: left; white-space: normal; }
.hosted__again:disabled { --btn-bg: transparent; --btn-fg: var(--fg-2); box-shadow: inset 0 0 0 2px currentColor; cursor: default; scale: none; }
.hosted__again:disabled .wedge { display: none; }
.hosted__readings { flex: 1 1 100%; color: var(--fg-2); font-weight: 600; line-height: 1.3; }
.hosted__readings:empty { display: none; }
.hosted__readings > li { margin-top: 5px; }
.hosted__readings > li:first-child { margin: 6px 0 9px; color: var(--fg); font-size: 1.3125rem; }
.hosted__list { display: grid; gap: 14px clamp(20px, 3vw, 48px); margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(min(1.0625rem, 5vw), 1.25vw, 1.1875rem); font-weight: 500; line-height: 1.3; }
.hosted__list > li + li { margin-top: 0; }
.hosted__on { margin-top: clamp(22px, 2.4vw, 32px); }
.hosted__people { max-width: 24em; font-size: clamp(1.5rem, 1rem + 2.6vw, 3.4rem); line-height: 1.02; }
.hosted__clock { margin-top: clamp(18px, 2.2vw, 30px); color: var(--fg-2); }
.hosted__go { margin-top: clamp(18px, 2vw, 26px); }
@media (min-width: 30em) {
.hosted__list { grid-auto-flow: column; grid-template: repeat(4, auto) / repeat(2, minmax(0, 17.6em)); }
}
@media (min-width: 60em) {
.hosted__in { grid-template: auto auto 1fr / minmax(0, 7fr) minmax(0, 5fr); gap: clamp(56px, 6vw, 96px) clamp(40px, 6vw, 104px); }
.hosted__proof { display: contents; }
.hosted__head { grid-area: 1 / 1; }
.hosted__ask { grid-area: 2 / 1; width: auto; margin: 0; }
.hosted__care { grid-area: 3 / 1; }
.hosted__receipt { grid-area: 1 / 2 / span 3; align-self: start; rotate: -2deg; }
.hosted__reach { grid-area: 4 / 1 / auto / -1; }
}
.behind__head { display: grid; gap: clamp(20px, 3vw, 36px) clamp(36px, 6vw, 96px); }
.behind__say { display: grid; gap: 14px; }
.behind__say .lead { font-size: clamp(1.2rem, .84rem + .78vw, 1.5rem); }
.behind__count { font-weight: 650; text-wrap: balance; }
.behind__wall {
--g: 8px; --row: 100px; --py: 16px; --k: 60px;
display: flex; flex-wrap: wrap; gap: var(--g);
margin-top: clamp(32px, 4.6vw, 68px); padding: var(--g);
border-radius: calc(var(--r-l) + var(--g)); background: var(--mist);
}
.behind__tile {
--n: 5; --span: calc(var(--n) - var(--give, 0));
flex: 1 1 calc((100% + var(--g)) * var(--span) / 12 - var(--g) - .1px);
min-width: 0; height: calc(var(--row) + var(--more, 0px));
}
.behind__face {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
height: 100%; padding: var(--py) clamp(12px, 1.5vw, 22px);
border-radius: var(--r-l); background: var(--tile, #fff); color: var(--ink);
text-align: center; text-decoration: none;
}
.behind__tile--dark .behind__face { color: #fff; }
.behind__logo {
width: auto; height: calc(var(--k) * var(--s, .63));
max-width: 100%; max-height: calc(var(--row) - 2 * var(--py)); object-fit: contain;
transition: scale .25s var(--ease);
}
.behind__wall--rel { --more: 22px; }
.behind__rel { font-size: .875rem; font-weight: 650; line-height: 1.15; }
a.behind__face:focus-visible { border-radius: var(--r-l); }
a.behind__face:hover .behind__logo, a.behind__face:focus-visible .behind__logo { scale: 1.04; }
.behind__tile--you { --span: var(--n); flex-grow: 160000; }
.behind__tile--you .behind__face { flex-direction: row; gap: .5em; background: var(--red); font-size: clamp(1.1rem, 5.4vw, 1.4rem); }
.behind__tile--you .wedge { transition: rotate .42s var(--spring); }
.behind__tile--you a:hover .wedge, .behind__tile--you a:focus-visible .wedge { rotate: -90deg; }
@media (max-width: 47.99em) {
.behind__tile:nth-child(3n) { flex-grow: 400; }
.behind__tile--wide { --n: 7; }
.behind__tile--long { --n: 12; }
}
@media (min-width: 48em) {
.behind__wall { --row: 112px; --py: 18px; --k: 66px; }
.behind__tile { --n: 2; }
.behind__tile:is(:nth-child(18n+5), :nth-child(18n+9), :nth-child(18n+11), :nth-child(18n+12), :nth-child(18n+17), :nth-child(18n)) { --n: 3; }
.behind__tile:is(:nth-child(18n+1), :nth-child(18n+4), :nth-child(18n+13)) { --n: 4; }
.behind__tile--wide { --span: max(3, var(--n) - var(--give, 0)); }
.behind__tile--wide:is(:nth-child(18n+3), :nth-child(18n+8), :nth-child(18n+10), :nth-child(18n+16)) + *,
.behind__tile--wide:is(:nth-child(18n+2), :nth-child(18n+7), :nth-child(18n+15)) + * + *,
.behind__tile--wide:is(:nth-child(18n+6), :nth-child(18n+14)) + * + * + * { --give: 1; }
.behind__tile--you { min-width: calc((100% + var(--g)) / 4 - var(--g) - 1px); }
.behind__tile--you .behind__face { font-size: clamp(1.2rem, .3rem + 1.7vw, 1.8rem); }
}
@media (min-width: 68em) { .behind__wall { --g: 10px; --row: 124px; --py: 22px; --k: 82px; } }
.behind__below { --pp: clamp(26px, 4.4vw, 60px); display: grid; gap: 92px clamp(36px, 5.5vw, 88px); margin-top: clamp(72px, 10vw, 152px); }
.behind__who { display: grid; gap: clamp(16px, 1.8vw, 24px); align-content: start; justify-items: start; }
.behind__who h3 { max-width: 10em; }
.behind__links { --gap: 0 28px; margin-top: -6px; }
.behind__links .link, .behind__more .link { display: inline-block; padding-block: 10px; }
.behind__sign, .behind__rules { grid-area: 2 / 1; }
.behind__sign { place-self: start; margin-left: var(--pp); translate: 0 calc(-100% - 10px); }
.behind__rules { padding: var(--pp); }
.behind__list { display: grid; gap: .86em; margin-top: clamp(26px, 3.4vw, 48px); font-size: clamp(1.4rem, 1.04rem + 1.3vw, 2.1rem); }
.behind__list li {
font-family: var(--font-d); font-weight: 750; letter-spacing: -.022em; line-height: 1.05; text-wrap: balance;
}
.behind__after { max-width: 30em; margin-top: clamp(30px, 3.8vw, 52px); color: var(--fg-2); }
.behind__more { margin-top: 4px; }
@media (min-width: 64em) { .behind__head { grid-template-columns: max-content minmax(0, 1fr); align-items: end; } }
@media (min-width: 60em) {
.behind__below { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.behind__who { position: sticky; top: 112px; }
.behind__sign, .behind__rules { grid-area: 1 / 2; }
}
.make { --fs: clamp(2.2rem, 10.6vw, 3.4rem); }
.make__head { display: grid; gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(36px, 6vw, 88px); }
.make__you { color: var(--fg-2); }
.make__you b { color: var(--fg); }
.make__h { font-size: var(--fs); line-height: 1; }
.make__btn { display: flex; align-items: center; gap: .2em; width: 100%; padding: .14em 0; border: 0; background: none; letter-spacing: inherit; text-align: left; cursor: default; }
.make__tick { width: .36em; height: .32em; color: var(--red); transition: rotate .4s var(--spring), color .2s; }
.js .make__row:not(.is-open) .make__btn { cursor: pointer; }
.js .make__row:not(.is-open) .make__tick { rotate: -90deg; color: var(--ink); }
.js .make__row:not(.is-open) .make__btn:hover .make__tick { color: var(--red); }
.js .make__row:not(.is-open) .make__panel { display: none; }
.make__panel { display: grid; gap: 22px; padding: 10px 0 36px; }
.make__text { display: grid; gap: 18px; justify-items: start; max-width: 42em; }
.make__text > p { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.35; text-wrap: pretty; }
.make__ticks { width: 100%; columns: 2 15em; column-gap: 2.5em; }
.make__ticks li { break-inside: avoid; }
.make__stage { display: none; }
.make__close { display: grid; gap: 18px; justify-items: start; margin-top: clamp(36px, 6vw, 88px); }
.make__close p { max-width: 21em; font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem); line-height: 1; }
@media (min-width: 40em) {
.make__panel { grid-template-columns: 20rem minmax(0, 1fr); gap: 36px; align-items: center; }
}
@media (min-width: 60em) and (min-height: 600px) {
.make { --fs: clamp(3rem, .2rem + 5.9vw, 6.6rem); }
.js .make__head, .js .make__body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 31vw, 440px); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.make__head h2 { grid-column: 1 / -1; }
.make__you { align-self: end; }
.js .make__panel { display: block; padding-left: calc(var(--fs) * .56); }
.js .make__stage { display: block; position: sticky; top: 110px; aspect-ratio: 1; border-radius: var(--r-l); background: var(--panel); }
.js .make__panel > .make__demo, .make__stage > :not(.is-cur) { display: none; }
}
.make__demo { display: grid; align-content: center; aspect-ratio: 1; padding: 8%; border-radius: var(--r-l); background: var(--panel); color: var(--ink); font-weight: 650; line-height: 1.15; container-type: inline-size; }
.make__demo .d { display: block; max-height: 3.08em; padding-bottom: .08em; line-height: 1; overflow: hidden; overflow-wrap: anywhere; }
.make__cap { margin-top: 5cqw; font-size: clamp(13px, 4.2cqw, 15px); }
.make__page, .make__item, .make__hit, .make__kit { padding: 6cqw; border-radius: 4.5cqw; background: #fff; }
.make__bag b, .make__sw i::after, .make__dots i, .make__mark { aspect-ratio: 1; border-radius: 50%; }
.make__page > *, .make__shapes p, .make__swap > *, .make__sw i, .make__sw i::after, .make__flow span { transition: .45s var(--spring) calc(var(--i, 0) * var(--gap, .14s) + .15s); transition-property: opacity, scale, translate, background-color, color; }
.js .make__demo:not(.is-on) :is(.make__page > *, .make__shapes p, .make__swap > :last-child) { opacity: 0; scale: .6; }
.js .make__demo:not(.is-on) .make__swap > :first-child { opacity: 1; }
.js .make__demo:not(.is-on) :is(.make__sw i, .make__flow span) { background: var(--mist); color: var(--fg-2); }
.js .make__demo:not(.is-on) .make__sw i::after { translate: -100%; }
.make__page { display: grid; grid-template: 6cqw 44cqw 15cqw / repeat(3, 1fr); gap: 3.5cqw; }
.make__page > * { position: relative; border-radius: 3cqw; background: var(--mist); }
.make__page > :nth-child(2) { grid-column: 3; }
.make__page > :first-child, .make__page > b { background: var(--ink); }
.make__page > b { grid-column: span 2; display: grid; align-content: end; padding: 4.5cqw; color: #fff; font-size: 8.6cqw; }
.make__page > :nth-child(4), .make__page > :nth-child(6) { background: var(--blush); }
.make__page > :nth-child(4)::after { content: ""; position: absolute; inset: 38% 22% 0; border-radius: 9em 9em 0 0; background: var(--red); }
.make__page > :nth-child(7) { background: var(--chalk); }
.make__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4cqw; font-size: max(11px, 4.5cqw); }
.make__item > .d { font-size: 6.2cqw; }
.make__bag { justify-self: end; display: flex; align-items: center; gap: 2cqw; }
.make__bag b { width: 1.8em; background: var(--red); place-items: center; }
.make__jar { grid-column: 1 / -1; display: grid; place-items: center; height: 44cqw; border-radius: 3cqw; background: var(--blush); }
.make__jar::after { content: ""; width: 21cqw; height: 30cqw; border-top: 6cqw solid var(--red); border-radius: 4.5cqw; background: var(--ink); }
.make__pill { padding: 2.6cqw 5cqw; border-radius: 9em; background: var(--ink); color: #fff; text-align: center; }
.make__swap { --i: 8; display: grid; }
.make__swap > * { grid-area: 1 / 1; }
.make__swap > :first-child { opacity: 0; }
.make__sw { --gap: .34s; display: flex; align-items: center; justify-content: space-between; padding: 4cqw 4.5cqw 4cqw 7cqw; border-radius: 9em; background: #fff; font-size: 6.4cqw; }
.make__sw + .make__sw { margin-top: 3cqw; }
.make__sw i { display: flex; justify-content: flex-end; width: 16cqw; padding: 1cqw; border-radius: 9em; background: var(--red); }
.make__sw i::after { content: ""; width: 7cqw; background: #fff; }
.make__hit { display: grid; gap: 1.8cqw; color: var(--fg-2); font-size: max(11.5px, 4.4cqw); font-weight: 400; line-height: 1.38; overflow-wrap: anywhere; }
.make__hit b { color: var(--ink); font-size: 1.4em; line-height: 1.16; }
.make__shapes { display: grid; grid-template: 54cqw 18cqw / 42.5cqw 1fr; gap: 3.5cqw; }
.make__shapes p { display: grid; align-content: space-between; padding: 4.8cqw; border-radius: 4cqw; background: var(--ink); color: #fff; font-size: 6.6cqw; }
.make__shapes .wedge { justify-self: end; width: 19cqw; height: auto; color: var(--red); }
.make__shapes > :first-child { grid-row: span 2; font-size: 7.4cqw; }
.make__shapes > :first-child > .wedge { justify-self: center; width: 28cqw; }
.make__shapes > :last-child { grid-auto-flow: column; place-content: center start; align-items: center; gap: 3.5cqw; padding-block: 0; font-size: 5.4cqw; }
.make__shapes > :last-child > .wedge { width: 9.5cqw; }
.make__flow { --gap: .7s; display: grid; grid-template-columns: 19cqw 19cqw 1fr 19cqw 19cqw; align-items: center; row-gap: 3.5cqw; }
.make__flow span { grid-column: 1 / span 3; display: grid; align-content: end; height: 24cqw; padding: 4.2cqw; border-radius: 4cqw; background: #fff; font-size: 6cqw; }
.make__flow span:nth-child(3) { grid-column: 2 / span 3; background: var(--red); }
.make__flow span:nth-child(5) { grid-column: 3 / span 3; background: var(--ink); color: #fff; }
.make__flow .wedge { grid-column: 1; justify-self: end; margin-right: 4cqw; width: 6cqw; height: auto; rotate: -90deg; color: var(--red); }
.make__flow .wedge:nth-child(4) { grid-column: 2; }
.make__kit { --c: var(--red); --t: var(--ink); display: grid; grid-template-columns: 31cqw 1fr; align-items: center; gap: 6cqw; }
.make__dots { grid-column: 1 / -1; display: flex; gap: 3.5cqw; }
.make__dots i { width: 9.5cqw; background: var(--s); }
.make__dots .is-at { outline: 1cqw solid var(--ink); outline-offset: 1cqw; }
.make__mark, .make__card, .make__cta { background: var(--c); color: var(--t); transition: background-color .5s, border-color .5s, color .5s; }
.make__mark { grid-row: span 2; border: 8cqw solid var(--c); background: none; }
.make__card { display: grid; align-content: end; height: 32cqw; padding: 4.2cqw; border-radius: 3.5cqw; font-size: 6.4cqw; }
.make__cta { justify-self: start; padding: 2.4cqw 5cqw; border-radius: 9em; font-size: max(11px, 4.5cqw); }
.start { overflow: clip; padding-bottom: calc(var(--pad) + var(--r-xl)); }
.start__in { display: grid; gap: clamp(28px, 4vw, 60px) clamp(32px, 5vw, 96px); }
.start__h { position: relative; z-index: 1; max-width: 8em; }
.start__show { position: relative; }
.start__wedge { position: absolute; z-index: 0; left: 50%; bottom: calc(100% - 18px); width: min(118vw, 700px); translate: -50% 0; --wedge: var(--chalk); }
.start__frame { position: relative; z-index: 1; }
.start__frame .frame__body { flex: none; display: grid; align-content: center; gap: clamp(8px, 1.6cqw, 16px); min-height: clamp(200px, 46cqw, 360px); padding: clamp(22px, 6cqw, 56px); }
.start__name { font-size: clamp(2.3rem, 13.5cqw, 8.5rem); line-height: .92; overflow-wrap: anywhere; text-wrap: balance; }
.start__tag { font-size: clamp(1rem, 3.3cqw, 1.6rem); font-weight: 600; color: #44506F; }
.start__do { display: grid; gap: 18px; justify-items: start; align-content: start; }
.start__ask { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; width: 100%; }
.start__ask .field { flex: 1 1 15rem; max-width: 26rem; }
.start__ask .sign { margin-bottom: 9px; }
.start__ask .sign .wedge { rotate: 90deg; }
.start__small { font-size: var(--t-small); line-height: 1.45; font-weight: 500; max-width: 30em; margin: 0; }
.start__line { margin-top: clamp(10px, 2vw, 26px); max-width: 16em; }
.start__right { display: none; }
.has-name .start__right { display: inline; }
.start__routes { display: grid; gap: 2px; margin-top: 6px; }
.start__routes a { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 6px 12px 6px 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 650; letter-spacing: -.01em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: .22em; transition: text-decoration-color .16s; }
.start__routes a:hover { text-decoration-color: var(--ink); }
.start__routes .i { width: 1.2em; height: 1.2em; }
@media (min-width: 60em) {
.start__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; }
.start__h { grid-column: 1 / -1; }
.start__show { grid-column: 2; grid-row: 2; margin-top: clamp(60px, 9vw, 150px); }
.start__do { grid-column: 1; grid-row: 2; }
.start__wedge { width: min(58vw, 860px); }
}