@font-face{font-family:"Pitch Sans";src:url(../fonts/pitch-sans-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Pitch Sans";src:url(../fonts/pitch-sans-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* Mangrove holding page. One field, one frame: the ticker runs the border, the M arrives once with its trail, melts into the field, and the field settles into the cool wash. */
:root{
  --black:#171717; --paper:#F2F2EC; --clay:#B2AC9A; --orinj:#F97622;
  --display:"Pitch Sans","Courier New",monospace;
  --tk:30px; color-scheme:dark;
}
html,body{height:100%;margin:0}
body{background:var(--black);color:var(--black);overflow:hidden}
/* ticker frame */
.tk{position:fixed;z-index:5;background:var(--black);overflow:hidden;font-family:var(--display);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.tk span{display:inline-block;animation:run 90s linear infinite}
.tk.t,.tk.b{left:0;right:0;height:var(--tk);line-height:var(--tk)}
.tk.t{top:0;padding-top:env(safe-area-inset-top,0px)} .tk.b{bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.tk.b span{animation-direction:reverse}
.tk.l,.tk.r{top:0;bottom:0;width:var(--tk)}
.tk.l{left:0;padding-left:env(safe-area-inset-left,0px)} .tk.r{right:0;padding-right:env(safe-area-inset-right,0px)}
.tk.l div,.tk.r div{position:absolute;top:50%;left:50%;width:200vh;line-height:var(--tk)}
.tk.l div{transform:translate(-50%,-50%) rotate(-90deg)} .tk.r div{transform:translate(-50%,-50%) rotate(90deg)}
.tk i{font-style:normal;color:var(--clay);padding:0 1.6em}
@keyframes run{to{transform:translateX(-50%)}}
/* field */
.stage{position:fixed;inset:calc(var(--tk) + env(safe-area-inset-top,0px)) calc(var(--tk) + env(safe-area-inset-right,0px)) calc(var(--tk) + env(safe-area-inset-bottom,0px)) calc(var(--tk) + env(safe-area-inset-left,0px));overflow:hidden;background:#E9E2D9}
#field{position:absolute;inset:-8%;width:116%;height:116%;display:block}
#grain{position:absolute;inset:0;pointer-events:none;opacity:.10;mix-blend-mode:multiply}
.lt{position:absolute;left:calc(clamp(20px,3.2vw,52px) + clamp(6.5px,.77vw,13px));top:calc(clamp(20px,3.2vw,48px) + clamp(6.5px,.77vw,13px));height:clamp(9px,1.05vw,18px);width:auto;aspect-ratio:520/41;color:var(--black);opacity:.9}
.mq{position:absolute;right:clamp(20px,3.2vw,52px);bottom:clamp(20px,3.2vw,48px);width:clamp(56px,6vw,104px);height:auto;overflow:visible}
.mq path{fill:var(--black)}
.copy{position:absolute;left:clamp(20px,3.2vw,52px);bottom:clamp(20px,3.2vw,48px);right:30%}
h1{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(30px,5.4vw,96px);line-height:1;letter-spacing:.04em;text-transform:uppercase}
h1 span{display:block;overflow:hidden;padding-bottom:.04em}
h1 b{display:block;font-weight:500}
.js h1 b{transform:translateY(105%)}
.note{margin:clamp(14px,1.6vw,24px) 0 0;font-family:var(--display);font-size:clamp(10px,.8vw,12px);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.js .note{opacity:0}
/* intro */
#intro{position:fixed;inset:0;z-index:20;cursor:pointer;overflow:hidden}
#intro .bg{position:absolute;inset:0;background:#121212}
#intro .mark{position:absolute;top:52%;height:92vh;aspect-ratio:99/78;left:calc(100% - 0.72 * 92vh * 99 / 78);transform:translateY(-50%)}
#intro svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
@media (orientation:portrait){ #intro .mark{--h:min(80vh,96vw);height:var(--h);left:calc(100% - 0.74 * var(--h) * 99 / 78);top:50%} }
@media (max-width:640px){ .copy{right:20px;bottom:calc(clamp(20px,3.2vw,48px) + 70px)} .note i{display:none} .note span{display:block} .note span+span{margin-top:.5em} }
.note i{font-style:normal}
@media (prefers-reduced-motion:reduce){ #intro{display:none} .tk span{animation:none} h1 b{transform:none} .note{opacity:1} }

.no-js #intro{display:none}
#iheat{opacity:0}
.lt svg,.lt{display:block}