/* aesv.io - Terminal aesthetic */

/* Self-hosted Source Code Pro — variable font, latin only */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-code-pro-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-code-pro-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --bg: #16161d;
  --bright: #e0e0e0;
  --normal: #b0b0b0;
  --dim: #808080;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100%;
  font-family: 'Source Code Pro', monospace;
  font-size: clamp(10px, 3.5vw, 14px);
  line-height: 1.4;
  background: var(--bg);
  color: var(--normal);
  overscroll-behavior: none;
  overflow-x: hidden;
}

/* Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--bright);
  color: var(--bg);
  padding: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Layout - Two column grid */
#wrapper {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 24ch 1fr;
  grid-template-rows: 1fr auto;
  max-width: 124ch;
  margin: 0 auto;
  padding: 0;
  column-gap: 2ch;
}

@supports not (min-height: 100dvh) {
  #wrapper {
    min-height: 100vh;
  }
}

.logo {
  font-weight: 900;
}

/* Sidebar */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 24ch;
  height: 100vh;
  padding: 3em 2ch 3em 3ch;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;
}

/* Center the sidebar in wide viewports */
@media (min-width: 768px) {
  #sidebar {
    left: max(0px, calc((100vw - 110ch) / 2));
  }
}

#sidebar .logo {
  color: var(--bright);
  text-decoration: none;
  display: block;
  margin-bottom: 2.8em;
  font-size: 1em;
  font-weight: 900;
  font-family: 'Source Code Pro', monospace;
}

#sidebar .name {
  color: var(--bright);
  display: block;
  margin-bottom: 0;
}

#sidebar .role {
  color: var(--dim);
  display: block;
  line-height: 1.4;
}

#sidebar .sep {
  display: block;
  line-height: 1.4;
}

#sidebar .nav-links,
#sidebar .ext-links {
  list-style: none;
}

#sidebar .nav-links a,
#sidebar .ext-links a {
  color: var(--dim);
  text-decoration: none;
  display: block;
  line-height: 2;
}

#sidebar .nav-links a:hover,
#sidebar .nav-links a:focus {
  color: var(--bright);
}

#sidebar .ext-links a:hover,
#sidebar .ext-links a:focus {
  color: var(--normal);
}

/* Mobile nav */
#mobile-nav {
  display: none;
}

/* Mobile links — hidden on desktop, shown above footer on mobile */
#mobile-links {
  display: none;
}

/* Main content */
main {
  grid-column: 2;
  padding: 10em 3ch 0 2ch;
  min-width: 0;
}

pre {
  font-family: inherit;
  font-size: inherit;
  white-space: pre;
}

code {
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  white-space: pre;
}

/* Sections — top-level with generous spacing */
section {
  margin-bottom: 4em;
}

/* Subsections — case studies, tighter grouping */
.subsection {
  margin-bottom: 2.5em;
}

.subsection:last-child {
  margin-bottom: 0;
}

/* Section headings — bright, full-width rules */
.section-rule {
  color: var(--dim);
}

.section-name {
  color: var(--bright);
}

/* Subsection headings — dimmer, indented feel */
.subsection-rule {
  color: var(--dim);
  opacity: 0.5;
}

.subsection-name {
  color: var(--normal);
}

/* Case study labels */
.label {
  color: var(--dim);
}

/* Footer */
footer {
  grid-column: 2;
  padding: 4em 3ch 2em 2ch;
  color: var(--dim);
}

footer a {
  color: var(--normal);
  text-decoration: underline;
  text-decoration-color: var(--dim);
}

footer a:hover,
footer a:focus {
  text-decoration-color: var(--normal);
}

/* Hide nav clutter when page fits in viewport */
.no-scroll #mobile-nav a:not(.logo),
.no-scroll #sidebar .nav-links,
.no-scroll #sidebar .nav-links + .sep,
.no-scroll footer a[href='#'] {
  display: none;
}

/* Links */
a {
  color: var(--bright);
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 2px;
}

a:hover,
a:focus {
  text-decoration-color: var(--bright);
}

/* GPG copy button */
.gpg-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--dim);
  cursor: pointer;
  padding: 0;
  line-height: 2;
}

.gpg-btn:hover,
.gpg-btn:focus {
  color: var(--normal);
}

/* Garden pages — sidebar and content on the same 1.4em line grid.
   Shared: logo margin 2.8em (2 lines) + name margin 0 (1 line) = name at 7.2em.
   garden-index padding-top = sidebar-pt(3) + logo(4.2) + name(1.4) + 1 blank(1.4) = 10em.
   garden-entry padding-top = 3em — 3 blank pre-lines reach name level (7.2em),
   1 blank after ← index reaches content level (10em). */

main.garden-index {
  padding-top: 10em;
}

main.garden-entry {
  padding-top: 3em;
}

#sidebar .garden-links {
  list-style: none;
}

#sidebar .garden-links a {
  color: var(--dim);
  text-decoration: none;
  display: block;
  line-height: 1.4;
}

#sidebar .garden-links a:hover,
#sidebar .garden-links a:focus {
  color: var(--normal);
}

/* Garden countdown button */
.countdown-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--dim);
  cursor: pointer;
  padding: 0;
  line-height: inherit;
}

.countdown-btn.is-running {
  color: var(--normal);
}

.countdown-btn:disabled {
  cursor: default;
}

/* Dim text */
.nowrap {
  white-space: nowrap;
}

.dim {
  color: var(--dim);
}

/* Selection */
::selection {
  background: var(--bright);
  color: var(--bg);
}

/* Focus */
:focus {
  outline: none;
}

:focus-visible {
  outline: 1px solid var(--bright);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  #wrapper {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    padding: 0;
    column-gap: 0;
  }

  #sidebar {
    display: none;
  }

  #mobile-nav {
    display: flex;
    align-items: center;
    gap: 2ch;
    position: absolute;
    top: 0;
    z-index: 10;
    padding: 1.2em 2ch;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: none;
    order: 1;
  }

  #mobile-nav .logo {
    color: var(--bright);
    text-decoration: none;
    flex-shrink: 0;
    font-weight: 900;
  }

  #mobile-nav a {
    color: var(--dim);
    text-decoration: none;
    font-size: inherit;
  }

  #mobile-nav a:hover,
  #mobile-nav a:focus {
    color: var(--bright);
  }

  main {
    flex: 1;
    padding: calc(2em + 6ch) 2ch 0;
    grid-column: auto;
    order: 2;
  }

  #mobile-links {
    display: flex;
    align-items: baseline;
    gap: 2ch;
    padding: 2em 2ch 0;
    order: 3;
  }

  #mobile-links .gpg-btn {
    line-height: inherit;
  }

  #mobile-links a {
    color: var(--dim);
    text-decoration: none;
  }

  #mobile-links a:hover,
  #mobile-links a:focus {
    color: var(--bright);
  }

  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  section {
    margin-bottom: 3em;
  }

  footer {
    grid-column: auto;
    padding: 3em 2ch 2em;
    order: 4;
  }
}