:root{
  color-scheme:light dark;
  --paper:#edf1e9;
  --ink:#183d32;
  --muted:#526b5f;
  --line:#b2c1b3;
  --grid:#dfe6dc;
  --accent:#386953;
  --button:#183d32;
  --button-text:#f1f6e9
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif
}
a{
  color:inherit;
  text-decoration:none
}
a:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:6px
}
.skip{
  position:absolute;
  left:24px;
  top:-90px;
  padding:12px;
  z-index:3;
  background:var(--ink);
  color:var(--paper)
}
.skip:focus{
  top:10px
}
.sheet{
  min-height:100svh;
  max-width:1600px;
  margin:auto;
  padding:30px 44px 22px;
  display:flex;
  flex-direction:column
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-bottom:26px;
  border-bottom:1px solid var(--ink)
}
.wordmark{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.6px
}
.wordmark span{
  font-family:Consolas,'Courier New',monospace;
  margin-right:12px;
  font-weight:400
}
.status{
  font-family:Consolas,'Courier New',monospace;
  font-size:11px
}
.status span{
  font-size:9px;
  margin-right:8px
}
main{
  flex:1;
  display:grid;
  grid-template-columns:50px 1fr;
  position:relative;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  padding:52px 0 48px
}
.margin{
  display:flex;
  flex-direction:column;
  gap:81px;
  align-items:flex-start;
  border-right:1px solid var(--line);
  font:11px Consolas,'Courier New',monospace;
  color:var(--muted);
  padding-top:4px
}
.content{
  padding-left:44px;
  position:relative;
  z-index:1
}
.comment{
  font:13px/1.6 Consolas,'Courier New',monospace;
  color:var(--muted);
  margin:0 0 30px
}
h1{
  font-size:clamp(75px,9.7vw,150px);
  line-height:.9;
  letter-spacing:-.065em;
  font-weight:500;
  margin:0 0 40px
}
.cursor{
  font-weight:400;
  color:var(--accent)
}
.suffix{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:.6em;
  font-weight:400
}
.definition{
  font:14px/1.6 Consolas,'Courier New',monospace;
  display:flex;
  gap:20px;
  padding:16px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.key{
  color:var(--muted)
}
.value{
  color:var(--accent)
}
.enquiry{
  margin-top:30px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px
}
h2{
  font-size:17px;
  font-weight:500;
  margin:0 0 10px
}
p{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0
}
.action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--button);
  color:var(--button-text);
  padding:17px 20px;
  font:12px Consolas,'Courier New',monospace;
  border:1px solid var(--button);
  transition:background .15s,color .15s
}
.action:hover{
  color:var(--ink);
  background:var(--paper)
}
.action span{
  font-size:20px
}
.stamp{
  position:absolute;
  right:6%;
  top:100px;
  width:150px;
  transform:rotate(12deg);
  color:var(--accent);
  opacity:.7
}
.stamp svg{
  display:block;
  width:100%;
  stroke:currentColor;
  stroke-width:3
}
.stamp span{
  display:block;
  margin-top:18px;
  font:10px Consolas,'Courier New',monospace;
  text-align:center;
  letter-spacing:.18em
}
footer{
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:20px;
  font:11px Consolas,'Courier New',monospace;
  color:var(--muted)
}
footer a{
  text-decoration:underline;
  text-underline-offset:4px
}
.error main{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:30px;
  padding-left:45px;
  align-items:flex-start
}
.error h1{
  margin:0
}
.error .comment{
  margin:0
}
.error p{
  font-size:16px
}
@media(prefers-color-scheme:dark){
  :root{
    --paper:#18251e;
    --ink:#e0efd5;
    --muted:#acbda5;
    --line:#4f6656;
    --grid:#223229;
    --accent:#a0c99e;
    --button:#d6e8c9;
    --button-text:#18251e
  }
}
@media(max-width:640px){
  .sheet{
    padding:24px 20px 20px
  }
  header{
    align-items:flex-start;
    gap:12px;
    padding-bottom:23px
  }
  .wordmark{
    font-size:16px
  }
  .wordmark span{
    margin-right:4px
  }
  .status{
    font-size:10px;
    max-width:70px;
    line-height:1.5
  }
  .status span{
    display:none
  }
  main{
    grid-template-columns:24px 1fr;
    padding:38px 0
  }
  .margin{
    font-size:9px;
    gap:90px
  }
  .content{
    padding-left:16px
  }
  .comment{
    font-size:10px;
    max-width:220px;
    margin-bottom:36px
  }
  h1{
    font-size:clamp(70px,20vw,110px);
    margin-bottom:36px
  }
  .stamp{
    display:none
  }
  .definition{
    font-size:11px;
    gap:12px;
    padding:15px 0
  }
  .enquiry{
    display:block;
    margin-top:26px
  }
  h2{
    font-size:16px
  }
  p{
    font-size:12px
  }
  .action{
    font-size:11px;
    gap:15px;
    padding:14px 14px;
    margin-top:24px
  }
  footer{
    display:block;
    font-size:10px;
    line-height:1.8
  }
  footer>span{
    display:block
  }
  footer a{
    display:inline-block;
    margin-top:4px
  }
  .error main{
    padding-left:18px
  }
  .error h1{
    font-size:70px
  }
  .error .action{
    margin-top:0
  }
}
@media(prefers-reduced-motion:reduce){
  .action{
    transition:none
  }
}