:root{
  --lime:#C9F786;
  --paper:#F4F1E8;
  --mute:#8e8e88;
  --rust:#E8431F;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(16px,2.6vw,48px);
  --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{background:#000;-webkit-text-size-adjust:100%}
body{
  background:#000;color:var(--paper);font-family:var(--sans);
  min-height:100svh;overflow-x:clip;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%23C9F786' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='14' r='1.8' fill='%23C9F786'/%3E%3C/svg%3E") 14 14,crosshair;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* layers: photo 0, paint 1, type 2 */
#paint{position:fixed;inset:0;width:100vw;height:100lvh;z-index:1;pointer-events:none}

.page{min-height:100svh;display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);grid-template-rows:auto 1fr auto 1fr auto}

.top{display:contents}
.logo{display:block;flex:none}
.logo svg{display:block;width:100%;overflow:visible}
.lg{fill:#C9F786;will-change:transform}
.byline{display:flex;align-items:center;gap:.4em;font-size:clamp(11px,.85vw,14px);color:var(--mute);white-space:nowrap}
.byline b{color:var(--paper);font-weight:500}
.tri-wrap{position:relative;display:inline-flex}
.tri{width:1.6em;height:1.6em;display:grid;place-items:center;border:1px solid #555;border-radius:2px;transition:border-color .15s}
.tri:hover{border-color:var(--lime)}
.tri svg{width:.7em;height:.7em;fill:var(--mute)}
.why{
  position:absolute;left:0;bottom:2.4em;width:min(260px,70vw);padding:10px 12px;white-space:normal;
  background:var(--paper);color:#000;font-size:13px;line-height:1.35;z-index:4;
}

/* the picture */
.wall{position:relative;z-index:0;overflow:hidden;background:#161612;min-height:0}
.wall-img,.ad-img{position:absolute;inset:0;width:100%;height:100%}
.wall-img{object-fit:cover;object-position:62% 47%}
.js .wall-img{visibility:hidden}
.ad-img{animation:drift 19s ease-in-out infinite alternate;transform:scale(1.03) translate(calc(var(--px,0)*-1.2%),calc(var(--py,0)*-1.2%))}
.js .wall::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#171713 30%,#2c2c25 50%,#171713 70%) 0 0/300% 100%;
  animation:shim 1s linear infinite;
}
.js .wall.ready::before{display:none}
@keyframes shim{from{background-position:100% 0}to{background-position:-50% 0}}
.closed-note{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;
  background:#000;color:#fff;font:700 clamp(36px,6vw,110px)/1 var(--sans);letter-spacing:-.03em;
  opacity:0;visibility:hidden;transition:opacity .12s,visibility .12s;
}
.is-closed .closed-note{opacity:1;visibility:visible}

@keyframes drift{from{scale:1}to{scale:1.07}}

/* the text waits for the real font so it never re-wraps on screen.
   the keyframe is a failsafe in case main.js never runs.
   don't split the blurb into word wrappers: that breaks the font's spacing around spaces */
.js:not(.type-in) .copy{visibility:hidden;animation:failsafe 0s 2s forwards}
@keyframes failsafe{to{visibility:visible}}

/* the blurb is the point. the email stays quiet */
.copy{align-self:center}
.copy>*{position:relative;z-index:2}
.slogan{font:500 min(5.15vw,8.3svh)/1.03 var(--sans);letter-spacing:-.03em;color:#a4a49e;text-wrap:balance}
.slogan a{font-weight:400;text-decoration:none;transition:color .2s}
@media (hover:hover){.slogan a:hover{color:#e4e4de}}
.e1,.e2{font-weight:600;font-style:normal}
.e1{color:#fff}
.e2{color:var(--lime)}
.contact{margin-top:clamp(14px,3svh,32px);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.contact-label{font:400 clamp(14px,1.15vw,19px)/1 var(--sans);color:var(--mute)}
.email{position:relative;display:inline-block}
.email a{
  position:relative;z-index:1;display:inline-block;padding:.42em 0 .46em;
  font:500 max(15px,min(1.7vw,3svh))/1.1 var(--sans);letter-spacing:-.01em;color:var(--lime);text-decoration:none;transition:color .15s;
}
.email a:hover{color:#fff}
.cities{margin:min(1.4vw,2.2svh) 0 0;font:400 clamp(11px,.95vw,15px)/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* small print */
.bar{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(8px,1vw,14px);font:400 clamp(12px,.95vw,15px)/1 var(--sans)}
.x{
  flex:none;width:2.4em;height:2.4em;display:grid;place-items:center;border-radius:50%;
  background:#222220;color:#ccc;font-size:1.05em;line-height:1;
  transition:transform .22s var(--ease),background .15s;transform:translateX(var(--dx,0));
}
.x:hover{background:var(--rust);color:#fff}
.hint{display:none}

/* desktop: half black, half wall */
@media (min-width:861px){
  .logo{grid-area:1/1;width:clamp(64px,min(7vw,11svh),130px);margin:var(--gut) 0 0 var(--gut);position:relative;z-index:2}
  .copy{grid-area:3/1;padding:0 var(--gut)}
  .wall{grid-area:1/2/6/3}
  .byline{grid-area:5/1;align-self:center;position:relative;z-index:2;margin:0 0 var(--gut) var(--gut)}
  .bar{grid-area:5/1;justify-content:flex-end;padding:0 var(--gut) var(--gut);pointer-events:none}
  .bar>*{pointer-events:auto}
}

/* phones: logo, air, the whole wall edge to edge, air, clean text */
@media (max-width:860px){
  :root{--gut:7.4vw}
  body{touch-action:manipulation}
  .page{display:flex;flex-direction:column;row-gap:12px;padding:calc(16px + env(safe-area-inset-top)) 0 calc(14px + env(safe-area-inset-bottom))}
  .logo{order:1;align-self:flex-start;width:18vw;margin:auto 0 auto var(--gut)}
  .wall{order:2;flex:none;width:100%;aspect-ratio:1179/770;touch-action:none}
  .hint{order:3;display:block;margin-top:-4px;padding:0 var(--gut);font:400 11.5px/1.25 var(--sans);color:var(--mute)}
  .copy{order:5;margin-top:auto;padding:0 var(--gut)}
  .slogan{font-size:5.2vw;line-height:1.16;text-wrap:wrap}
  .contact{gap:0;margin-top:14px}
  .contact-label{font-size:13px}
  .email a{font-size:4vw;padding:10px 0}
  .cities{margin-top:8px;font-size:11px}
  .bar{order:6;margin-top:auto;padding:0 var(--gut)}
  .x{margin-left:auto}
  .byline{order:7;margin:0;padding:0 var(--gut);font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .js .wall::before{display:none}
  .ad-img{animation:none}
}