:root{
  --paper:#dfe7ea;
  --paper2:#cbd7dc;
  --ink:#111619;
  --ice:#edf8ff;
  --blue:#a9d8ef;
  --acid:#d5ff37;
  --orange:#ff6a2a;
  --line:rgba(17,22,25,.28);
  --softline:rgba(17,22,25,.12);
  --max:1460px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 180px),
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.8), transparent 20%),
    linear-gradient(180deg,var(--paper),var(--paper2));
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  opacity:.12;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.snow-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:80;
  opacity:.28;
  background:
    radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 40% 40%,#fff 0 1.3px,transparent 1.8px),
    radial-gradient(circle at 70% 15%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 85% 65%,#fff 0 1.2px,transparent 1.7px),
    radial-gradient(circle at 30% 80%,#fff 0 1px,transparent 1.5px);
  background-size:260px 260px,320px 320px,280px 280px,360px 360px,300px 300px;
  animation:drift 34s linear infinite;
}

.topo{
  position:fixed;
  right:-8vw;
  top:8vh;
  width:58vw;
  height:58vw;
  max-width:900px;
  max-height:900px;
  border-radius:50%;
  opacity:.12;
  pointer-events:none;
  background:
    repeating-radial-gradient(ellipse at 52% 48%,
      transparent 0 28px,
      rgba(17,22,25,.35) 29px 31px,
      transparent 32px 54px);
  transform:rotate(-14deg) scaleY(.72);
  filter:blur(.2px);
}

.site-head{
  width:min(var(--max),calc(100% - 36px));
  margin:0 auto;
  min-height:78px;
  display:grid;
  grid-template-columns:240px 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:10;
}
.mark{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.08em;
}
.mark-no{
  border:1px solid var(--ink);
  padding:7px 8px;
  font:900 10px/1 "Courier New", monospace;
}
.mark strong{font-weight:950}
.weather-strip{
  display:flex;
  justify-content:flex-end;
  gap:26px;
  font:900 10px/1 "Courier New", monospace;
  letter-spacing:.08em;
}
.weather-strip .live{color:#274d00}

main{
  width:min(var(--max),calc(100% - 36px));
  margin:0 auto;
}

.cover{
  min-height:820px;
  display:grid;
  grid-template-columns:78px minmax(0,1.05fr) minmax(420px,.95fr);
  grid-template-rows:1fr auto;
  border-bottom:1px solid var(--line);
  position:relative;
}

.rail{
  grid-row:1 / 3;
  border-right:1px solid var(--line);
  padding:30px 12px 28px 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.rail-block{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  display:flex;
  gap:10px;
}
.rail-block span{
  font:900 9px/1 "Courier New", monospace;
  letter-spacing:.14em;
}
.rail-block b{
  font-size:18px;
  line-height:.9;
  letter-spacing:-.05em;
}
.rail-bottom{align-self:flex-start}

.cover-copy{
  padding:60px 30px 32px 42px;
  position:relative;
  z-index:2;
}
.micro{
  width:min(520px,90%);
  font:900 10px/1.45 "Courier New", monospace;
  letter-spacing:.12em;
  margin-bottom:40px;
}
h1{
  margin:0;
  font-size:clamp(90px,11vw,180px);
  line-height:.64;
  letter-spacing:-.09em;
  font-weight:950;
}
h1 span{display:block}
h1 .outline{
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  text-stroke:2px var(--ink);
  transform:translateX(7vw);
}
h1 .slash{
  position:absolute;
  font-size:.62em;
  color:var(--orange);
  transform:rotate(-12deg) translate(2vw,-1vw);
}
h1 .cat{
  margin-left:1.2em;
  margin-top:.04em;
}
.intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:30px;
  margin-top:64px;
  max-width:780px;
}
.intro>p{
  margin:0;
  font-size:clamp(18px,2vw,28px);
  line-height:1.15;
  font-weight:750;
  letter-spacing:-.03em;
}
.coords{
  border-left:1px solid var(--line);
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font:900 9px/1.2 "Courier New", monospace;
}

.cover-photo{
  padding:42px 0 34px 28px;
  position:relative;
}
.cover-photo figure{
  margin:0;
  position:relative;
  background:#171b1e;
  padding:12px;
  clip-path:polygon(0 0,100% 0,100% 92%,92% 100%,0 100%);
  box-shadow:20px 24px 0 rgba(17,22,25,.08);
}
.cover-photo img{
  width:100%;
  display:block;
  aspect-ratio:.83;
  object-fit:cover;
  object-position:50% 48%;
  filter:saturate(.72) contrast(1.08) brightness(.98) sepia(.04);
}
.cover-photo figcaption{
  color:#e9f5fb;
  display:flex;
  justify-content:space-between;
  padding:12px 4px 2px;
  font:900 9px/1 "Courier New", monospace;
  letter-spacing:.08em;
}
.stamp{
  position:absolute;
  z-index:3;
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  font:950 11px/.9 "Courier New", monospace;
  text-align:center;
}
.stamp-a{
  top:64px;
  right:-14px;
  padding:13px 11px;
  background:var(--acid);
  transform:rotate(7deg);
}
.stamp-b{
  left:8px;
  bottom:60px;
  padding:11px 13px;
  background:var(--ice);
  transform:rotate(-5deg);
}

.link-rack{
  grid-column:2 / 4;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.link-rack a{
  color:var(--ink);
  text-decoration:none;
  min-height:92px;
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:14px;
  padding:0 20px;
  border-right:1px solid var(--line);
  transition:.18s ease;
  position:relative;
  overflow:hidden;
}
.link-rack a:last-child{border-right:0}
.link-rack a::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:0;
  background:var(--acid);
  transition:.18s ease;
  z-index:-1;
}
.link-rack a:hover::before{height:100%}
.link-rack small{
  font:900 9px/1 "Courier New", monospace;
  opacity:.65;
}
.link-rack span{
  font-size:clamp(20px,2vw,32px);
  font-weight:950;
  letter-spacing:-.04em;
}
.link-rack b{font-size:24px}

.field-board{
  min-height:540px;
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px;
  padding:110px 6vw 110px 8vw;
  position:relative;
  border-bottom:1px solid var(--line);
}
.field-label span,.index{
  display:block;
  font:900 10px/1 "Courier New", monospace;
  letter-spacing:.14em;
  margin-bottom:18px;
}
.field-label strong{
  display:block;
  font-size:clamp(54px,6.5vw,100px);
  line-height:.82;
  letter-spacing:-.07em;
}
.big-note{
  margin:0 0 52px;
  max-width:790px;
  font-size:clamp(26px,3vw,48px);
  line-height:1.04;
  font-weight:800;
  letter-spacing:-.05em;
}
.big-note em{
  font-family:Georgia, serif;
  font-weight:400;
}
.spec-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.spec-grid div{
  min-height:100px;
  padding:18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.spec-grid span{
  display:block;
  font:900 9px/1 "Courier New", monospace;
  margin-bottom:26px;
  opacity:.65;
}
.spec-grid b{
  font-size:21px;
  letter-spacing:-.03em;
}
.patch{
  position:absolute;
  right:3vw;
  top:52px;
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--orange);
  color:#fff;
  border:2px dashed #fff;
  outline:4px solid var(--orange);
  text-align:center;
  font:950 11px/1 "Courier New", monospace;
  transform:rotate(10deg);
}

.market-sheet{
  padding:105px 0 115px;
  border-bottom:1px solid var(--line);
}
.market-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:34px;
}
.market-head h2,.contract-title h2,.closing h2{
  margin:0;
  font-size:clamp(64px,9vw,140px);
  line-height:.72;
  letter-spacing:-.085em;
}
.market-head a{
  color:var(--ink);
  font:900 10px/1 "Courier New", monospace;
  padding-bottom:8px;
}
.instrument{
  background:#101517;
  color:#eef7fb;
  border:1px solid #101517;
  box-shadow:22px 26px 0 rgba(17,22,25,.08);
}
.instrument-top{
  min-height:82px;
  display:grid;
  grid-template-columns:1fr 1fr .5fr;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.instrument-top>div{
  padding:16px 18px;
  border-right:1px solid rgba(255,255,255,.14);
}
.instrument-top>div:last-child{border-right:0}
.instrument-top span{
  display:block;
  color:#9dafb8;
  font:900 8px/1 "Courier New", monospace;
  letter-spacing:.12em;
  margin-bottom:14px;
}
.instrument-top b{
  font:900 14px/1 "Courier New", monospace;
}
.instrument-top .signal b{color:var(--acid)}
.plot{
  position:relative;
  height:430px;
  overflow:hidden;
}
.plot svg{width:100%;height:100%;display:block}
.grid line{
  stroke:rgba(255,255,255,.09);
  stroke-width:1;
}
.area{fill:url(#fill)}
.trace{
  fill:none;
  stroke:var(--acid);
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(213,255,55,.38));
}
.ylabels{
  position:absolute;
  top:0;right:10px;bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  color:#78909a;
  font:900 8px/1 "Courier New", monospace;
  z-index:2;
}
.plot-note{
  position:absolute;
  left:22px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:5px;
  background:#101517;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
}
.plot-note b{
  font:900 10px/1 "Courier New", monospace;
  color:var(--acid);
}
.plot-note span{
  color:#a6b4ba;
  font:700 9px/1.2 "Courier New", monospace;
}
.plot-note code{color:#fff}
.instrument-bottom{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 18px;
  border-top:1px solid rgba(255,255,255,.15);
  color:#8ea1ab;
  font:900 9px/1 "Courier New", monospace;
}
.instrument-bottom .grow{margin-left:auto;color:#cde1e9}

.contract-zone{
  padding:120px 4vw 130px;
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px;
  align-items:start;
  border-bottom:1px solid var(--line);
}
.contract-title h2{font-size:clamp(70px,9vw,132px)}
.contract-tag{
  border:0;
  cursor:pointer;
  text-align:left;
  position:relative;
  min-height:190px;
  width:100%;
  background:#edf3f5;
  border:1px solid var(--ink);
  box-shadow:14px 16px 0 var(--ink);
  padding:34px 34px 32px 58px;
  color:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 80%,94% 100%,0 100%);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:24px;
  transition:.18s ease;
}
.contract-tag:hover{
  transform:translate(-3px,-3px);
  box-shadow:18px 20px 0 var(--ink);
}
.contract-tag .hole{
  position:absolute;
  left:18px;
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--ink);
  transform:translateY(-50%);
}
.tag-copy small{
  display:block;
  font:900 9px/1 "Courier New", monospace;
  letter-spacing:.12em;
  margin-bottom:28px;
}
.tag-copy code{
  font:900 clamp(18px,2.6vw,40px)/1 "Courier New", monospace;
  word-break:break-all;
}
.contract-tag strong{
  font:950 14px/1 "Courier New", monospace;
  color:#274d00;
}
.fine-print{
  grid-column:2;
  max-width:760px;
  margin:0;
  font:700 12px/1.5 "Courier New", monospace;
}

.closing{
  min-height:650px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  border-bottom:1px solid var(--line);
}
.closing-photo{
  background:
    linear-gradient(90deg, transparent 72%, var(--paper2)),
    linear-gradient(180deg,rgba(13,20,25,.08),rgba(13,20,25,.18)),
    url("assets/gorpcore-cat.png") center 42% / cover;
  filter:saturate(.65) contrast(1.08);
  clip-path:polygon(0 0,92% 0,100% 100%,0 100%);
}
.closing-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:60px 0 60px 30px;
}
.closing-copy h2{margin-bottom:44px}
.closing-copy p{
  margin:0;
  font:900 10px/1 "Courier New", monospace;
  letter-spacing:.14em;
}

footer{
  width:min(var(--max),calc(100% - 36px));
  margin:0 auto;
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:900 9px/1 "Courier New", monospace;
  letter-spacing:.12em;
}

@keyframes drift{
  from{transform:translate3d(0,-20px,0)}
  to{transform:translate3d(-24px,30px,0)}
}

@media(max-width:1000px){
  .cover{
    grid-template-columns:52px 1fr;
    grid-template-rows:auto auto auto;
  }
  .rail{grid-row:1/4}
  .cover-copy{grid-column:2;padding-right:0}
  .cover-photo{grid-column:2;padding-left:42px}
  .cover-photo figure{max-width:680px}
  .link-rack{grid-column:2}
  .field-board,.contract-zone{grid-template-columns:1fr;gap:42px}
  .fine-print{grid-column:1}
  .closing{grid-template-columns:1fr}
  .closing-photo{min-height:500px;clip-path:none}
  .closing-copy{padding:70px 20px}
}

@media(max-width:680px){
  .site-head,main,footer{width:min(var(--max),calc(100% - 20px))}
  .site-head{grid-template-columns:1fr}
  .weather-strip{display:none}
  .cover{grid-template-columns:34px 1fr;min-height:auto}
  .rail{padding-top:22px}
  .cover-copy{padding:42px 0 24px 20px}
  h1{font-size:clamp(70px,22vw,112px)}
  h1 .outline{transform:translateX(10vw)}
  h1 .cat{margin-left:.68em}
  .intro{grid-template-columns:1fr;margin-top:44px}
  .coords{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}
  .cover-photo{padding:20px 0 28px 20px}
  .cover-photo figure{box-shadow:10px 12px 0 rgba(17,22,25,.08)}
  .stamp-a{right:-4px}
  .stamp-b{left:8px}
  .link-rack{grid-template-columns:1fr}
  .link-rack a{min-height:72px;border-right:0;border-bottom:1px solid var(--line)}
  .field-board{padding:80px 20px}
  .spec-grid{grid-template-columns:1fr}
  .patch{right:20px;top:40px;width:74px;height:74px}
  .market-sheet{padding:84px 0}
  .market-head{align-items:flex-start;flex-direction:column}
  .market-head h2,.contract-title h2,.closing h2{font-size:clamp(58px,19vw,96px)}
  .instrument-top{grid-template-columns:1fr}
  .instrument-top>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .plot{height:320px}
  .instrument-bottom{gap:14px}
  .instrument-bottom .grow{display:none}
  .contract-zone{padding:88px 10px 100px}
  .contract-tag{grid-template-columns:1fr;padding:28px 24px 28px 46px}
  .contract-tag strong{justify-self:end}
  .closing-photo{min-height:390px}
  footer{align-items:flex-start;flex-direction:column;justify-content:center;gap:12px}
}