:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e1eaf0;
  background: #080809;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { position: relative; isolation: isolate; margin: 0; min-height: 100vh; min-height: 100svh; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    repeating-linear-gradient(92deg, #ffffff01 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 30%, #171719, #080809 75%);
  pointer-events: none;
}
main { width: min(100% - clamp(36px, 5vw, 112px), 1920px); margin: 0 auto; padding: clamp(32px, 6vh, 72px) 0 48px; }
h1 {
  width: fit-content;
  margin: 0 auto 40px;
  font-family: ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
  font-size: clamp(28px, 6vw, 58px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.title-link { color: inherit; text-decoration: none; }
.title-link:focus-visible { outline: 2px solid #a4dff4; outline-offset: 6px; border-radius: 4px; }
.title-name {
  color: #d1e2ee;
  background: linear-gradient(180deg, #f2faff 8%, #9fb6c7 40%, #536c80 48%, #d1e2ee 57%, #8ea8bd 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px #6cb6e326);
}
.title-extension {
  color: #6bc9ef;
  font-weight: 400;
  letter-spacing: .01em;
  text-shadow: 0 0 16px #35b7ed50;
}
nav { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 32px; }
nav:not(.services--all) { width: 100%; max-width: 620px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.sites-link {
  display: block;
  width: fit-content;
  text-decoration: none;
  margin: 28px auto 0;
  padding: 10px 18px;
  border: 1px solid #d4eaff26;
  border-radius: 8px;
  background: #171719;
  color: #b6c6d0;
  font: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.sites-link:hover { background: #222225; border-color: #d4eaff42; box-shadow: 0 0 18px #6bc9ef12; }
.sites-link:focus-visible { outline: 2px solid #a4dff4; outline-offset: 5px; }
.service-zone { min-width: 0; }
.service-zone h2 {
  margin: 0 0 12px;
  color: #787a7c;
  font-family: ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 -1px 1px #000, 0 1px 0 #ffffff24;
}
.service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 12px 16px;
  min-height: 172px;
  padding: clamp(20px, 1.8vw, 26px);
  overflow: hidden;
  border: 1px solid #d4eaff26;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #e6f5ff12, transparent 45%, #c9eaff04),
    linear-gradient(90deg, #0a0a0de8, #0a0a0db3),
    var(--service-background, linear-gradient(#171719, #080809)) var(--service-position, center) / cover;
  box-shadow: 0 10px 26px #0006, inset 0 1px 0 #ffffff24, inset 0 -1px 0 #c3e6ff0d;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s;
}
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, #ffffff0c, transparent 38%);
  pointer-events: none;
}
.name { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Code", "Liberation Mono", monospace; font-size: clamp(20px, 1.5vw, 24px); font-weight: 500; letter-spacing: -.025em; text-shadow: 0 0 18px #83ceff25; }
.domain { grid-column: 1 / -1; grid-row: 2; align-self: end; color: #93b4c5; font-family: ui-monospace, "Cascadia Code", "Liberation Mono", monospace; font-size: 12px; overflow-wrap: anywhere; }
.service:hover { border-color: #d4eaff42; box-shadow: 0 12px 30px #0008, inset 0 1px 0 #ffffff38, inset 0 -1px 0 #c3e6ff14; }
.service--harlan {
  isolation: isolate;
  --service-background: url("img/harnal-background.png");
  --service-position: center 48%;
}
.harlan-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 146px; height: calc(100% - 24px); object-fit: contain; object-position: right center; }
.service--harlan > span { position: relative; }
.service--harlan .name, .service--harlan .domain { text-shadow: 0 2px 6px #000; }
.service--harlan .harlan-image { opacity: .65; }
.service--harlan .chrome-image { width: 116px; opacity: .5; }
.service--cloud {
  grid-column: 1 / -1;
  isolation: isolate;
  --service-background: url("img/cloud-background.jpg");
}
.cloud-image { position: absolute; top: 12px; right: 18px; z-index: -1; width: 146px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .85; }
.service--cloud > span { position: relative; }
.service--cloud .name, .service--cloud .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--harlan-md {
  isolation: isolate;
  --service-background: url("img/harlan-md-background.jpg");
}
.harlan-md-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 116px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--harlan-md > span { position: relative; }
.service--harlan-md .name, .service--harlan-md .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--home {
  isolation: isolate;
  --service-background: url("img/home-background.jpg");
}
.home-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 146px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--home > span { position: relative; }
.service--home .name, .service--home .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--dslx { isolation: isolate; --service-background: url("img/dslx-background.png"); }
.dslx-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 146px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--dslx > span { position: relative; }
.service--dslx .name, .service--dslx .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--justinmemo {
  isolation: isolate;
  --service-background: url("img/justinmemo-background.png");
}
.justinmemo-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 190px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--justinmemo > span { position: relative; }
.service--justinmemo .name, .service--justinmemo .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--vpn, .service--monitoring, .service--tracking { isolation: isolate; }
.service--vpn { --service-background: url("img/vpn-background.png"); }
.vpn-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 116px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--vpn > span { position: relative; }
.service--vpn .domain { visibility: hidden; }
.service--vpn .name, .service--vpn .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--monitoring { --service-background: url("img/grafana-background.webp"); }
.monitoring-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 116px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--monitoring > span { position: relative; }
.service--monitoring .name, .service--monitoring .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service--tracking { --service-background: url("img/umami-background.png"); }
.tracking-image { position: absolute; top: 12px; right: 8px; z-index: -1; width: 116px; height: calc(100% - 24px); object-fit: contain; object-position: right center; opacity: .65; }
.service--tracking > span { position: relative; }
.service--tracking .name, .service--tracking .domain { text-shadow: 0 2px 6px #000, 0 0 12px #000; }
.service:focus-visible { outline: 2px solid #a4dff4; outline-offset: 5px; }
@media (min-width: 800px) {
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .services--all .service--cloud { min-height: 362px; }
}
@media (min-width: 1280px) {
  nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 600px) {
  main { width: calc(100% - 36px); padding-top: 48px; }
  h1 { margin-bottom: 28px; }
  nav { gap: 28px; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service { min-height: 150px; padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .service, .sites-link { transition: none; } }