/* Identity machine. Uses the site tokens, with fallbacks so it also runs alone. */
.mx{
  --mx-ground:var(--ground,#e4e6e1);--mx-ink:var(--ink,#0b0e2c);--mx-ink2:var(--ink-2,#4a4e63);
  --mx-line:var(--line,#b9bdb6);--mx-cobalt:var(--cobalt,#2236ff);--mx-paper:var(--paper,#f6f7f4);
  --mx-display:var(--display,'Bricolage Grotesque',system-ui,sans-serif);--mx-serif:var(--serif,'Newsreader',Georgia,serif);
  --mx-ease:var(--ease,cubic-bezier(.16,1,.3,1));
  color:var(--mx-ink);font-family:var(--mx-serif);
}
.mx *,.mx *::before,.mx *::after{box-sizing:border-box}
.mx-head{max-width:62rem;margin-bottom:clamp(28px,4vw,56px)}
.mx-h{margin:0;font-family:var(--mx-display);font-weight:700;font-variation-settings:'wdth' 75;font-size:clamp(48px,8vw,128px);line-height:.85;letter-spacing:-.035em}
.mx-lede{margin:18px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.4;max-width:46ch;color:var(--mx-ink)}

.mx-grid{display:grid;grid-template-columns:minmax(300px,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:start}
.mx-left{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:96px}
.mx-label{font-family:var(--mx-display);font-weight:500;font-size:14px;color:var(--mx-ink2)}
.mx-input{width:100%;font-family:var(--mx-display);font-weight:600;font-variation-settings:'wdth' 85;font-size:clamp(26px,2.4vw,34px);letter-spacing:-.02em;color:var(--mx-ink);
  background:transparent;border:0;border-bottom:2px solid var(--mx-ink);border-radius:0;padding:4px 0 8px;margin-top:-6px}
.mx-input:focus{outline:none;border-bottom-color:var(--mx-cobalt)}
.mx-input:focus-visible{outline:2px solid var(--mx-cobalt);outline-offset:4px}

.mx-stage{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:6%;padding:clamp(18px,2vw,28px);margin-top:10px;transition:background-color .3s var(--mx-ease)}
.mx-markbox svg{display:block;width:100%;height:auto;overflow:visible}
.mx-wordbox svg{display:block;width:100%;height:auto;overflow:visible}
.mx-type{margin:0;font-family:var(--mx-display);font-size:14px;line-height:1.45;color:var(--mx-ink2)}

.mx-pal{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mx-pal li{display:flex;flex-direction:column;gap:2px;min-width:0;font-family:var(--mx-display);font-size:12px;line-height:1.3;color:var(--mx-ink2)}
.mx-sw{display:block;height:56px;margin-bottom:6px;border:1px solid rgba(11,14,44,.12)}
.mx-pn{font-weight:600;font-size:13px;color:var(--mx-ink)}
.mx-hex{font-variant-numeric:tabular-nums}
.mx-cr{font-size:11px}

.mx-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.mx-btn{appearance:none;font:inherit;font-family:var(--mx-display);font-weight:500;font-size:15px;cursor:pointer;
  padding:12px 20px;border-radius:999px;border:1.5px solid var(--mx-ink);background:var(--mx-ink);color:var(--mx-paper);
  transition:background-color .3s var(--mx-ease),color .3s var(--mx-ease),border-color .3s var(--mx-ease),transform .3s var(--mx-ease)}
.mx-btn:hover{background:var(--mx-cobalt);border-color:var(--mx-cobalt)}
.mx-btn:active{transform:scale(.97)}
.mx-btn-alt{background:transparent;color:var(--mx-ink)}
.mx-btn-alt:hover{background:var(--mx-ink);border-color:var(--mx-ink);color:var(--mx-paper)}
.mx-btn:focus-visible{outline:2px solid var(--mx-cobalt);outline-offset:3px}
.mx-btn[disabled]{cursor:progress;opacity:.7}
.mx-note{margin:0;font-family:var(--mx-display);font-size:13px;line-height:1.45;color:var(--mx-ink2)}
.mx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* collage */
.mx-right{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:auto;column-gap:clamp(12px,1.6vw,24px);row-gap:0;min-width:0}
.mx-app{margin:0;min-width:0;position:relative}
.mx-f svg{display:block;width:100%;height:auto}
.mx-app figcaption{font-family:var(--mx-display);font-weight:500;font-size:13px;color:var(--mx-ink2);margin-top:8px}
.mx-shop{grid-column:1/9;grid-row:1}
.mx-phone{grid-column:9/13;grid-row:1/3;margin-top:clamp(40px,6vw,96px);align-self:start;padding:0 6%}
.mx-phone .mx-f{transform:rotate(2deg)}
.mx-card{grid-column:1/7;grid-row:2;margin-top:clamp(28px,3vw,44px);z-index:2}
.mx-card .mx-f{transform:rotate(-2.2deg);box-shadow:0 18px 40px -18px rgba(11,14,44,.45),0 2px 6px rgba(11,14,44,.12)}
.mx-card .mx-f svg{border-radius:6px}
.mx-post{grid-column:7/12;grid-row:2/4;margin-top:clamp(56px,7vw,120px)}
.mx-strip{grid-column:1/7;grid-row:3;margin-top:clamp(28px,3vw,48px)}

/* transition when the identity changes: transform and opacity only */
@keyframes mx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mx-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes mx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mx-fade{from{opacity:.25}to{opacity:1}}
.mx-go .mx-markbox .mx-d{stroke-dasharray:1;animation:mx-draw .38s var(--mx-ease) both}
.mx-go .mx-markbox .mx-c{transform-box:fill-box;transform-origin:center;animation:mx-pop .34s var(--mx-ease) both}
.mx-go .mx-wordbox svg{animation:mx-rise .3s var(--mx-ease) .05s both}
.mx-go .mx-pal li{animation:mx-rise .3s var(--mx-ease) both;animation-delay:calc(var(--i) * 40ms)}
.mx-go .mx-f svg{animation:mx-fade .3s ease-out both}
.mx-go .mx-shop .mx-f svg{animation-delay:.04s}
.mx-go .mx-phone .mx-f svg{animation-delay:.08s}
.mx-go .mx-card .mx-f svg{animation-delay:.12s}
.mx-go .mx-post .mx-f svg{animation-delay:.16s}
.mx-go .mx-strip .mx-f svg{animation-delay:.2s}
.mx-go .mx-icon{transform-box:fill-box;transform-origin:center;animation:mx-pop .36s var(--mx-ease) .1s both}
@media (prefers-reduced-motion:reduce){
  .mx *,.mx *::before,.mx *::after{animation:none!important;transition:none!important}
}

@media (max-width:1080px){
  .mx-grid{grid-template-columns:minmax(0,1fr)}
  .mx-left{position:static;max-width:560px}
}
@media (max-width:640px){
  .mx-right{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mx-shop{grid-column:1/7;grid-row:auto}
  .mx-phone{grid-column:1/5;grid-row:auto;margin-top:28px;padding:0 4%}
  .mx-card{grid-column:1/7;grid-row:auto;margin-top:24px}
  .mx-post{grid-column:1/6;grid-row:auto;margin-top:32px}
  .mx-strip{grid-column:1/7;grid-row:auto;margin-top:28px}
  .mx-pal{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .mx-sw{height:44px}
}