/* Specimen plate: a natural-history plate in a cold dark room: bone type on green-black,
   one formalin-chartreuse accent, an etched creature eye. Grotesque sans + a serif-italic caption voice. */
:root{
  --bg:#0d100f;
  --plate:#151a18;
  --text:#dde1d4;
  --muted:#a3ab9f;
  --acid:#c5d46a;
  --gut:2.75rem;
  --sans:"Helvetica Neue",Helvetica,"Arial Nova",Arial,Roboto,system-ui,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;overflow-x:hidden;
  min-height:100vh;display:flex;flex-direction:column;
  color:var(--text);
  background-color:var(--bg);
  /* fine cold grain, like a dusty glass plate */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .32 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font:18px/1.6 var(--sans);
}

a{color:var(--text);text-decoration-color:var(--acid);text-decoration-thickness:2px;text-underline-offset:.22em}
a:hover{color:var(--acid)}
a:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:9;background:var(--acid);color:var(--bg);padding:.6rem 1rem;font-weight:700}
.skip:focus{left:8px}

header,main{width:100%;max-width:62rem;margin:0 auto;padding-left:16px;padding-right:16px}
header{padding-top:20px}
.mark{
  font-weight:800;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--text);
}
.mark:hover{color:var(--acid)}

main{flex:1 0 auto;padding-bottom:3.5rem}

/* the specimen: an etched eye, pushed to the right */
.plate{margin:.25rem 0 0 auto;width:min(66vw,17rem);color:var(--acid)}
.eye{display:block;width:100%;height:auto}
.scale{display:block;width:4.5rem;height:auto;margin:.5rem .5rem 0 auto;color:var(--muted)}

h1{
  margin:.5rem 0 1.5rem;
  font-weight:800;font-size:clamp(3.4rem,19vw,7.5rem);line-height:.9;
  letter-spacing:-.045em;
}

.lead,.body,.note,h2{position:relative}
.lead{margin-top:0;margin-bottom:1.25rem;max-width:24ch;font-weight:700;font-size:1.3rem;line-height:1.35;letter-spacing:-.01em}
.body{max-width:32ch;margin-top:0;margin-bottom:1rem}
.note{margin-top:0;font:italic 1.05rem/1.5 var(--serif);color:var(--muted)}

h2{
  margin-top:3rem;margin-bottom:.5rem;
  font-weight:800;font-size:.8rem;line-height:1.6;letter-spacing:.24em;text-transform:uppercase;color:var(--acid);
}

/* icons */
.social{list-style:none;padding:0;margin:.25rem 0 0 -6px;display:flex;flex-wrap:wrap;gap:6px 14px}
.social li{display:flex}
.social a{display:grid;place-items:center;width:52px;height:52px;color:var(--acid)}
.social svg{width:30px;height:30px}
.social a:hover,.social a:focus-visible{background:var(--acid);color:var(--bg)}
.social a:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* footer: plate-coloured slab with an engraved hatch edge */
footer{
  background:var(--plate);color:var(--muted);
  padding:2.25rem 16px 2.75rem;font-size:.9rem;
  background-image:repeating-linear-gradient(-45deg,var(--acid) 0 2px,transparent 2px 8px);
  background-size:100% 8px;background-repeat:no-repeat;
}
footer>*{max-width:calc(62rem - 32px);margin:.35rem auto}
footer a{color:var(--text)}
.mail{font-size:1.05rem;font-weight:700;overflow-wrap:anywhere;margin-bottom:.9rem}

@media (min-width:52rem){
  :root{--gut:3.5rem}
  main{
    display:grid;grid-template-columns:minmax(0,1fr) 20rem;column-gap:3rem;align-content:start;
    padding-top:2rem;
  }
  main>*{grid-column:1}
  .plate{grid-column:2;grid-row:1 / span 7;width:100%;margin:0;align-self:start}
  h1{margin-top:3rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}