/* ==========================================================================
   energyyxdev.xyz

   Written phone first. Everything below reads as the phone layout, then two
   breakpoints add to it:

     640px   two up form fields, wider gutters
     900px   the desktop layout: inline menu, three column list, side rails

   Nothing else changes size at any other width, so resizing the window can
   never leave the page half in one layout and half in another.
   ========================================================================== */

/* ----------------------------------------------------------- fonts ---- */
@font-face {
  font-family: 'Plex Sans';
  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------- tokens ---- */
:root {
  --ground:     #0a1a21;
  --ground-2:   #0d222b;
  --panel:      #0f2832;
  --line:       #1b3a47;
  --line-soft:  #143039;
  --text:       #e7eff2;
  --text-soft:  #cddbe1;
  --muted:      #92aab5;
  --dim:        #63838f;
  --signal:     #ffb020;
  --signal-ink: #2a1c05;

  --sans: 'Plex Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --gutter: clamp(18px, 4.6vw, 56px);
  --bleed:  8px;   /* how far the list rows reach past the text column */
  --bar:    58px;
  --ease:   cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------ base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(255, 176, 32, .15);
  overflow-x: hidden;
}

/* one soft light behind the top of the page, nothing else */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 380px;
  background: radial-gradient(130% 100% at 20% 0%, rgba(43, 96, 116, .34), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

h1, h2, h3 { overflow-wrap: break-word; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--signal); color: var(--signal-ink); }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------- header ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 26, 33, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.topbar[data-stuck='true'] { border-bottom-color: var(--line-soft); }

/* browsers without backdrop-filter get a solid bar instead of a see through one */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .topbar { background: var(--ground); }
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bar);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark svg { width: 19px; height: 19px; flex: none; }

.nav-toggle {
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 3px;
  padding: 9px 13px;
  font: 500 .8125rem/1 var(--mono);
  cursor: pointer;
  min-height: 38px;
}

/* the menu is closed by default in CSS, so it cannot flash open before the
   script loads */
.nav {
  display: none;
  position: absolute;
  top: var(--bar);
  left: calc(var(--gutter) * -1);
  right: calc(var(--gutter) * -1);
  flex-direction: column;
  padding: 4px var(--gutter) 12px;
  background: var(--ground);
  border-bottom: 1px solid var(--line-soft);
}
.nav[data-open='true'] { display: flex; }

.nav a {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--muted);
  font-size: 1rem;
}
.nav a:last-child { border-bottom: 0; }
.nav a[aria-current='true'] { color: var(--text); }

/* ------------------------------------------------------------ hero ---- */
/* padding-top only. A `padding` shorthand here would reset the horizontal
   padding that .wrap sets, and the whole hero would sit against the edge. */
.hero { padding-top: 48px; }

.hero__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font: 400 .75rem/1.5 var(--mono);
  color: var(--dim);
}
.hero__rail .who { color: var(--muted); }
.hero__rail .clock { font-variant-numeric: tabular-nums; }
.hero__rail .clock b { color: var(--muted); font-weight: 400; }

.hero__statement {
  margin: 28px 0 0;
  font-size: clamp(2rem, 8.6vw, 4.25rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero__intro {
  margin: 18px 0 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 1rem;
}

/* -------------------------------------------------------- registry ---- */
/* The rows reach a little past the text column on both sides so the hover
   background has room, while the addresses stay on the same left edge as every
   heading and paragraph further down the page. */
.registry {
  margin-top: 36px;
  margin-inline: calc(var(--bleed) * -1);
  border-top: 1px solid var(--line);
}

.reg-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 62px;
  padding: 14px var(--bleed);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.reg-row::before {
  content: '';
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transition: transform .24s var(--ease);
}
.reg-row:hover, .reg-row:focus-visible { background: var(--ground-2); }
.reg-row:hover::before, .reg-row:focus-visible::before { transform: scaleY(1); }

.reg-addr {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: break-word;
}
.reg-kicker {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.4;
}
.reg-state {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 .75rem/1 var(--mono);
  color: var(--dim);
  white-space: nowrap;
}
.reg-state .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.reg-state[data-state='live'] { color: var(--signal); }

/* -------------------------------------------------------- sections ---- */
.section { padding-top: 56px; }
.section:last-of-type { padding-bottom: 8px; }

/* Each section opens with a hairline across the full column and a short amber
   segment at the left. No vertical rules anywhere, so nothing can ever run
   through a paragraph. */
.section__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin: 0 0 26px;
}
.section__head::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 44px; height: 2px;
  background: var(--signal);
}
.section__head h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.section__head .count {
  font: 400 .75rem/1.6 var(--mono);
  color: var(--dim);
}

/* -------------------------------------------------------- projects ---- */
.proj {
  display: grid;
  gap: 18px;
  padding: 30px 0;
  border-top: 1px solid var(--line-soft);
}
.proj:first-of-type { border-top: 0; padding-top: 0; }

.proj__meta { min-width: 0; }

/* The logo sits beside the name, not above it, so a project with a logo and
   one without still line up with their first paragraph. */
.proj__id {
  display: flex;
  align-items: center;
  gap: 11px;
}
.proj__mark {
  width: 34px; height: 34px;
  flex: none;
  object-fit: contain;
}

.proj__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.proj__name a { text-decoration: none; }
.proj__name a:hover { color: var(--signal); }

.proj__line {
  margin: 8px 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font: 400 .75rem/1 var(--mono);
  color: var(--dim);
}
.proj__line .state[data-state='live'] { color: var(--signal); }
.proj__line .sep { width: 1px; height: 11px; background: var(--line); }

.facts { margin: 0; }
.facts dt {
  font: 400 .6875rem/1.6 var(--mono);
  color: var(--dim);
  margin-top: 14px;
}
.facts dd {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.45;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.chips li {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 3px 8px;
  font: 400 .75rem/1.45 var(--mono);
  color: var(--muted);
}

.proj__body p {
  margin: 0 0 1em;
  max-width: 64ch;
  color: var(--text-soft);
}
.proj__body p:last-child { margin-bottom: 0; }

.visit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: .9375rem;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.visit:hover { color: var(--signal); border-bottom-color: var(--signal); }
.visit svg { width: 12px; height: 12px; flex: none; }

/* ----------------------------------------------------------- stack ---- */
.stack__group {
  display: grid;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.stack__group:first-child { border-top: 0; padding-top: 0; }
.stack__group h3 {
  margin: 0;
  font: 400 .75rem/1.6 var(--mono);
  color: var(--dim);
}

/* ----------------------------------------------------------- about ---- */
.about { display: grid; gap: 26px; }
.about p {
  margin: 0 0 1em;
  max-width: 62ch;
  color: var(--text-soft);
}
.about p:last-of-type { margin-bottom: 0; }

.langs {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.langs dt {
  font-size: .9375rem;
  font-weight: 500;
  margin-top: 12px;
}
.langs dt:first-of-type { margin-top: 0; }
.langs dd {
  margin: 1px 0 0;
  font: 400 .75rem/1.5 var(--mono);
  color: var(--dim);
}

/* --------------------------------------------------------- contact ---- */
.contact { display: grid; gap: 34px; }

.mailto {
  display: inline-block;
  font-size: clamp(1.05rem, 4.6vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: 3px;
  overflow-wrap: anywhere;
  transition: border-color .2s var(--ease);
}
.mailto:hover { border-bottom-color: var(--signal); }

.contact__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.contact__list li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: .9375rem;
  align-items: baseline;
}
.contact__list .k { font: 400 .6875rem/1.9 var(--mono); color: var(--dim); }
.contact__list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.contact__list a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.avail {
  margin-top: 22px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: 2px;
  background: var(--ground-2);
  color: var(--muted);
  font-size: .9375rem;
}

/* ------------------------------------------------------------ form ---- */
.form { display: grid; gap: 15px; }

.field { display: grid; gap: 6px; }
.field label {
  font: 400 .6875rem/1.6 var(--mono);
  color: var(--dim);
}
.field input,
.field textarea {
  width: 100%;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 13px;
  color: var(--text);
  /* 16px minimum, otherwise iOS zooms the page when the field is focused */
  font: 400 1rem/1.5 var(--sans);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: #4d6975; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal);
  background: var(--panel);
}
.field textarea { resize: vertical; min-height: 132px; }

.field--half { display: grid; gap: 15px; }

.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 3px;
  background: var(--signal);
  color: var(--signal-ink);
  padding: 14px 20px;
  font: 600 1rem/1 var(--sans);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: filter .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }

.note {
  padding: 13px 15px;
  margin: 0 0 16px;
  border-radius: 3px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  background: var(--ground-2);
  font-size: .9375rem;
  color: var(--muted);
}
.note--bad { border-left-color: #ff6b5e; }
.note strong { color: var(--text); font-weight: 500; }

.copy-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--dim);
  font: 400 .6875rem/1 var(--mono);
  padding: 7px 9px;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.copy-btn:hover { color: var(--signal); border-color: var(--signal); }

/* ---------------------------------------------------------- footer ---- */
.footer {
  margin-top: 64px;
  border-top: 1px solid var(--line-soft);
  padding: 22px 0 36px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
  font: 400 .75rem/1.6 var(--mono);
  color: var(--dim);
}
.footer a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.footer a:hover { color: var(--signal); }

/* ======================================================================
   640px and up
   ====================================================================== */
@media (min-width: 640px) {
  .field--half { grid-template-columns: 1fr 1fr; }
  .btn { width: auto; justify-self: start; }
  .hero { padding-top: 64px; }
  .hero__intro { font-size: 1.0625rem; }
}

/* ======================================================================
   900px and up: the desktop layout
   ====================================================================== */
@media (min-width: 900px) {
  :root { --bar: 64px; --bleed: 14px; }

  body { font-size: 1.0625rem; }

  /* menu goes inline and the button disappears */
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
  }
  .nav a {
    padding: 7px 12px;
    border: 0;
    border-radius: 3px;
    font-size: .9375rem;
    transition: color .18s var(--ease), background-color .18s var(--ease);
  }
  .nav a:hover { color: var(--text); background: var(--ground-2); }
  .nav a[aria-current='true']::after {
    content: '';
    display: block;
    height: 2px;
    margin-top: 4px;
    background: var(--signal);
  }

  .wordmark { font-size: 1rem; }
  .wordmark svg { width: 20px; height: 20px; }

  /* hero */
  .hero { padding-top: 104px; }
  .hero__rail { font-size: .8125rem; padding-bottom: 14px; }
  .hero__rail .clock { margin-left: auto; }
  .hero__statement { margin-top: 44px; max-width: 22ch; letter-spacing: -.035em; }
  .hero__intro { margin-top: 22px; font-size: 1.1875rem; }

  /* the list becomes one line per entry */
  .registry { margin-top: 68px; }
  .reg-row {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 26px;
    padding: 24px var(--bleed);
  }
  .reg-addr { font-size: clamp(1.7rem, 2.7vw, 2.3rem); letter-spacing: -.03em; }
  .reg-kicker { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
  .reg-state { grid-column: 3; grid-row: 1; font-size: .8125rem; }

  /* sections */
  .section { padding-top: 92px; }
  .section__head { padding-top: 22px; margin-bottom: 40px; gap: 16px; }

  /* projects get a meta rail beside the prose */
  .proj {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 56px;
    padding: 48px 0;
  }
  .proj__mark { width: 38px; height: 38px; }
  .proj__name { font-size: 1.375rem; }
  .facts dt { font-size: .75rem; }

  /* stack rows become label plus chips */
  .stack__group {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 8px 28px;
    align-items: start;
    padding: 20px 0;
  }
  .stack__group h3 { font-size: .8125rem; }

  .about { grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; }
  .langs { padding-top: 0; border-top: 0; }

  .contact { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 60px; }
  .contact__list li { grid-template-columns: 88px minmax(0, 1fr); }

  .footer { margin-top: 104px; }
  .footer__inner .right { margin-left: auto; }
}

/* ======================================================================
   very wide screens, only the hero grows
   ====================================================================== */
@media (min-width: 1200px) {
  .hero__statement { font-size: 4.25rem; }
}

/* ------------------------------------------------- load sequence ---- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(12px);
    animation: rise .6s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ print -- */
@media print {
  body::before, .topbar, .nav-toggle, .form, .copy-btn { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
}