@font-face {
  font-family: 'Libre Caslon Display';
  src: url('/fonts/libre-caslon-display.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --ground: #eaf0f3;
  --ink: #243e52;
  --secondary: #4b6a7d;
  --resonance: #396e91;
  --construction: #b6c7d0;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; color: var(--ink); font-family: Georgia, serif; }
.plate { position: relative; min-height: 740px; height: 100svh; overflow: hidden; }
.contact {
  position: absolute;
  top: 40px;
  right: 60px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  text-underline-offset: 6px;
  transition: color 180ms ease;
}
.contact svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1; }
.contact:hover { color: var(--resonance); text-decoration: underline; }
.contact:active { color: var(--secondary); }
.study {
  position: absolute;
  width: min(61vw, 820px);
  aspect-ratio: 1;
  left: 39%;
  top: 43%;
  margin: 0;
  transform: translateY(-50%);
  user-select: none;
  -webkit-user-select: none;
}
.molecule { display: block; width: 100%; height: 100%; overflow: visible; }
.construction { stroke: var(--construction); stroke-width: .8; }
#bonds { stroke: var(--ink); stroke-width: 1.8; }
#bonds .inner-bond { stroke: var(--resonance); stroke-width: 1.5; }
#resonance { stroke: var(--resonance); stroke-width: 1; }
#hydrogens line { stroke: var(--secondary); stroke-width: 1; opacity: .65; }
#hydrogens text { fill: var(--secondary); font: 17px Georgia, serif; }
#carbons text { fill: var(--ink); font: 21px Georgia, serif; }
.identity { position: absolute; left: 6.25%; bottom: 9.5%; }
h1 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(105px, 10.8vw, 170px);
  letter-spacing: -.052em;
  line-height: .95;
  margin: 0 0 25px -5px;
}
.identity p { color: var(--secondary); font-size: 19px; letter-spacing: .005em; margin: 0; line-height: 1.5; }
.plate-corner { position: absolute; height: 16px; width: 16px; pointer-events: none; border-color: var(--construction); border-style: solid; }
.corner-top { left: 34px; top: 34px; border-width: 1px 0 0 1px; }
.corner-bottom { right: 34px; bottom: 34px; border-width: 0 1px 1px 0; }

@media (min-width: 1700px) {
  .study { left: 43%; }
}
@media (max-width: 800px) {
  .plate { min-height: 700px; }
  .contact { top: 21px; right: 27px; font-size: 14px; gap: 11px; }
  #carbons text { font-size: 26px; }
  #hydrogens text { font-size: 22px; }
  .study { width: min(104vw, 640px); left: 50%; top: 41%; transform: translate(-50%, -50%); }
  .identity { left: 8%; bottom: 11%; }
  h1 { font-size: clamp(88px, 22.8vw, 150px); margin-bottom: 20px; margin-left: -3px; }
  .identity p { font-size: 17px; }
  .corner-top { left: 19px; top: 24px; width: 12px; height: 12px; }
  .corner-bottom { right: 22px; bottom: 24px; width: 12px; height: 12px; }
}
@media (min-width: 600px) and (max-width: 800px) {
  .study { width: min(78vw, 56svh); top: 36%; }
}
@media (max-height: 700px) and (min-width: 801px) {
  .plate { min-height: 600px; }
  .study { width: min(56vw, 650px); top: 43%; }
  .identity { bottom: 10%; }
}