@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,900&family=Space+Mono:wght@400;700&display=swap');

:root { --lime:#d8ee43; --forest:#132c22; --paper:#fbf6cf; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--forest); }
body { color:var(--forest); font-family:'Space Mono',monospace; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid currentColor; outline-offset:5px; }
.page {
  min-height:100svh; position:relative; overflow:hidden;
  background:var(--lime); display:grid; grid-template-columns:1fr 1fr; isolation:isolate;
}
.page::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#0000000a 3px 4px); opacity:.45;
}
.copy { padding:5vw 3vw 5vw 6vw; align-self:center; position:relative; z-index:3; }
.copy h1 {
  font:900 italic clamp(100px,14vw,230px)/.79 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:-.035em; text-transform:uppercase; margin:0 0 .23em; text-shadow:5px 5px 0 #95ad2b;
}
.copy h1 span { display:block; }
.copy p { font-size:clamp(15px,1.25vw,21px); line-height:1.6; margin:0; }
.copy .role {
  font-weight:700; font-size:clamp(17px,1.6vw,26px); max-width:24ch;
  margin-bottom:1.3em; padding-left:20px; border-left:7px solid var(--forest);
}
.copy .find { max-width:32ch; }
.copy a { color:inherit; text-decoration-thickness:2px; text-underline-offset:.25em; font-weight:700; }
.copy a:hover { background:var(--forest); color:var(--lime); }
.art {
  position:relative; align-self:stretch; min-width:0; min-height:0; display:grid; place-items:center;
  background:var(--forest); transform:rotate(-5deg) scale(1.04); margin:-3vh -3vw -3vh 0;
}
.art canvas {
  width:115%; height:100%; min-width:0; min-height:0; max-width:none; display:block;
  object-fit:contain; image-rendering:pixelated; image-rendering:crisp-edges;
}
.motion-controls { position:absolute; right:26px; bottom:24px; z-index:6; }
.pause-control {
  width:44px; height:44px; padding:11px; border:1px solid currentColor; cursor:pointer;
  background:var(--forest); color:var(--paper); box-shadow:3px 3px 0 #0005;
}
.pause-control svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:miter; }
.pause-control .play-symbol,.paused .pause-control .pause-symbol { display:none; }
.paused .pause-control .play-symbol { display:block; }
@media (min-width:801px) { .page { height:100svh; min-height:660px; } }
@media (max-width:800px) {
  .page { grid-template-columns:1fr; }
  .copy { padding:9vw 7vw 6vw; }
  .copy h1 { font-size:22vw; }
  .copy h1 span { display:inline; }
  .copy .role { font-size:18px; max-width:27ch; }
  .copy .find { font-size:14px; max-width:33ch; }
  .art { margin:0 -8vw -6vh; transform:rotate(-5deg); min-height:480px; }
  .art canvas { width:100%; height:500px; }
  .motion-controls { right:16px; bottom:16px; }
}