/*!
 * Cascading Style Sheet (CSS) for The Cypherpunk Handbook
 *
 * Copyright (c) 2025-2026 The Cypherpunk Handbook Authors
 *
 * Permission to use, copy, modify, and distribute this cascading style sheet
 * for any purpose with or without fee is hereby granted, provided that the
 * above copyright notice and this permission notice appear in all copies.
 *
 * THE CASCADING STYLE SHEET IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
 * WARRANTIES WITH REGARD TO THIS CASCADING STYLE SHEET INCLUDING ALL IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE
 * LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY
 * DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN
 * AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS CASCADING STYLE SHEET.
 */

/*
 * General Reset and Base Styles
 * Remove default margin/padding and set box-sizing for all elements.
 *
 * Improvement: keep the reset, but avoid wiping focus styles; we'll define
 * :focus-visible later for accessibility.
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
 * Design tokens (keep it simple)
 * Uses reading-width measures (ch) and font-relative sizing (em).
 *
 */
:root {
  /* Dark site palette (local to cypherpunk-handbook) */
  color-scheme: dark;

  --bg: #120b1f;
  --panel: #171029;
  --panel-2: #140d24;

  --text: #ece7ff;
  --muted: #cfc5ea;
  --heading: #f3edff;

  --link: #b084ff;
  --link-hover: #cbb0ff;

  --accent: #a855f7;
  --accent-2: #d8b4fe;
  --blue-dark: #102a63;
  --blue-light: #3ee6ff;

  --border: #2b2040;
  --border-2: #34244f;
  --border-hover: var(--border-2);

  --nav-bg: #1a1230;
  --nav-bg-hover: #241844;

  --radius: 0.875em;
  --radius-soft: 0.75em;
  --radius-pill: 999em;

  --shadow: 0 0.75em 2em #0000003d;
  --shadow-img: 0 0.625em 1.875em #00000040;

  --max-width: 76ch;
  --gutter: 1.25em;
  --pad-y: 2em;
  --pad-x: 1.25em;

  --focus-ring: 0 0 0 0.22em #3ee6ff70, 0 0 0 0.46em #a855f75c;
}

html {
  font-size: clamp(16px, 0.3vw + 15px, 18px);
  text-size-adjust: 100%;
  max-width: 100%;
}

/*
 * Body Styles
 * Set font, background, and text color for the main site.
 */
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  background:
    radial-gradient(circle at 12% 18%, #3ee6ff2e 0, transparent 42%),
    radial-gradient(circle at 88% 5%, #2a56c538 0, transparent 36%),
    radial-gradient(circle at 52% 100%, #1b3f8b30 0, transparent 38%),
    var(--bg);
  color: var(--text);
  padding: var(--pad-y) var(--pad-x);
  text-rendering: optimizeLegibility;
  max-width: 100%;
  overflow-x: clip;
}

.skip-link {
  position: absolute;
  left: 0.75em;
  top: -9999px;
  z-index: 1000;
  padding: 0.5em 0.7em;
  border: thin solid var(--border-2);
  border-radius: var(--radius-soft);
  background: var(--panel);
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75em;
  box-shadow: var(--focus-ring);
}

/* Ensure very long words can break and wrap to the next line for readability */
html, body, p, li, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Protect code and pre from forced breaks */
code, pre, kbd, samp {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

pre {
  white-space: pre;
  overflow-x: auto;
}

code {
  white-space: pre-wrap;
}

/*
 * Link Styles
 * Color and hover effect for all links.
 */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.08em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

a:hover {
  color: color-mix(in srgb, var(--link-hover) 52%, var(--blue-light) 48%);
  text-decoration-thickness: 0.1em;
  text-shadow: 0 0 0.45em #3ee6ff4f;
}

nav a {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 0.4em;
}

/* Utility: underlined text */
.underline,
.u-underline {
  text-decoration: underline;
  text-decoration-thickness: max(0.06em, 0.04lh);
  text-decoration-skip-ink: auto;
}

/*
 * Layout Containers
 * Center and constrain width for main sections.
 */
header,
main,
footer {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  max-width: 100%;
  min-width: 0;
}

nav {
  width: min(var(--max-width), 100%);
  margin: 0 auto;
}

main,
section,
article,
aside,
div,
figure,
ul,
ol,
dl,
li {
  max-width: 100%;
  min-width: 0;
}

header {
  padding: 2em 0 1.25em;
  text-align: center;
}

article header {
  margin-bottom: 1.1em;
  text-align: justify;
}

/*
 * Kicker Style for Article Headers
 */
.kicker {
  margin: 0 0 0.35em;
  color: color-mix(in srgb, var(--accent) 85%, var(--accent-2) 15%);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85em;
}

/*
 * Meta and lead text
 */
.meta {
  margin: 0 0 0.6em;
  color: var(--muted);
  font-size: 0.95em;
}

.lede {
  margin: 0.2em 0 1em;
  color: var(--heading);
  font-size: 1.05em;
  line-height: 1.7;
}

/*
 * Page title
 */
header h1,
header .site-title {
  margin: 0 0 0.75em;
  font-size: clamp(1.6em, 2.5vw + 1em, 2.25em);
  line-height: 1.2;
  font-weight: 700;
  color: var(--heading);
  text-shadow: 0 0 0.7em #3ee6ff2b;
}

header h2 {
  margin: 0 0 1em;
  font-size: clamp(1.05em, 1.1vw + 0.85em, 1.35em);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/*
 * Navigation list styles
 */

nav * {
  vertical-align: middle;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  padding: 0;
  margin: 0 0 1.5em;
  justify-content: center;
}

/*
 * Navigation link styles
 */
nav a {
  display: inline-block;
  padding: 0.45em 0.8em;
  border: thin solid var(--border-2);
  border-radius: var(--radius-pill);
  background: var(--nav-bg);
  color: var(--heading);
  margin: 0 0.35em;
  font-weight: 600;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

nav a:hover {
  background: linear-gradient(
    180deg,
    var(--nav-bg-hover),
    color-mix(in srgb, var(--blue-dark) 52%, var(--nav-bg-hover) 48%)
  );
  border-color: color-mix(in srgb, var(--border-2) 42%, var(--blue-light) 58%);
  box-shadow: 0 0 0.8em #3ee6ff21, inset 0 0 0.4em #3ee6ff1f;
}

nav a:active,
nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--blue-light) 72%, var(--accent) 28%);
  box-shadow: 0 0 1em #3ee6ff33, inset 0 0 0.45em #3ee6ff29;
}

/*
 * Icon style for inline SVG or img icons
 */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 0.4em;
  border-radius: 0;
  border: none;
  background: inherit;
  box-shadow: none;
}

/*
 * Main content panel
 */
main {
  background: var(--panel);
  border: thin solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.1em, 2vw, 1.75em);
  max-width: 100%;
  min-width: 0;
  box-shadow:
    var(--shadow),
    0 0 1.1em #3ee6ff1a;
}

/*
 * Sections
 */
section {
  margin-bottom: 1.5em;
}

section h2 {
  margin: 0 0 0.5em;
  font-size: clamp(1.25em, 1.2vw + 1em, 1.6em);
  color: color-mix(in srgb, var(--heading) 84%, var(--blue-light) 16%);
  line-height: 1.25;
  text-shadow: 0 0 0.55em #3ee6ff1f;
}

section h3 {
  margin: 1em 0 0.45em;
  font-size: clamp(1.1em, 1vw + 0.95em, 1.35em);
  line-height: 1.3;
}

section p,
main p {
  margin: 0.45em 0 0.95em;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0 1.4em;
  font-size: 0.98em;
  background: color-mix(in srgb, var(--panel) 90%, black 10%);
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  table-layout: auto;
}

.table-wrap,
.table-scroll {
  max-width: 100%;
  margin: 1em 0 1.4em;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  background: color-mix(in srgb, var(--panel) 90%, black 10%);
}

.table-wrap table,
.table-scroll table {
  margin: 0;
  border: none;
  border-radius: 0;
  min-width: 100%;
}

caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.5em;
}

thead th {
  background: color-mix(in srgb, var(--panel-2) 85%, #000000 15%);
  color: var(--heading);
  text-align: left;
  font-weight: 600;
  padding: 0.7em 0.8em;
  border-bottom: thin solid var(--border);
}

tbody td {
  padding: 0.6em 0.8em;
  border-bottom: thin solid var(--border);
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--panel-2) 92%, #000000 8%);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--panel-2) 64%, var(--blue-dark) 36%);
}

.c-language-table {
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 0.06em
    color-mix(in srgb, var(--border-2) 65%, transparent 35%);
}

.c-language-table thead th {
  font-size: 0.82em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.c-language-table td:nth-child(1),
.c-language-table th:nth-child(1) {
  text-align: center;
}

.c-language-table td:nth-child(n+2),
.c-language-table th:nth-child(n+2) {
  text-align: right;
}

.c-language-table tbody td:last-child {
  font-weight: 700;
  color: color-mix(in srgb, var(--blue-light) 62%, var(--heading) 38%);
}

th, td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Footer: justify list text for readability */
footer ul,
footer ol {
  text-align: start;
}

/* List indentation: make lists visually indented from normal paragraph text */
ul, ol {
  padding-left: 1.8em;
  margin: 0.5em 0 0.9em;
}

li + li {
  margin-top: 0.28em;
}

/* Nested lists get an additional indent to show hierarchy */
ul ul, ol ol, ul ol, ol ul {
  padding-left: 1.4em;
}

.toc {
  margin: 0.8em 0 1.2em;
  padding: 0.8em 1em;
  border: thin solid var(--border-2);
  border-radius: var(--radius-soft);
  background: color-mix(in srgb, var(--panel-2) 85%, #000000 15%);
}

.toc h2 {
  margin-bottom: 0.45em;
}

.toc ol {
  margin: 0.2em 0 0;
  column-count: 2;
  column-gap: 1.5em;
}

.toc li {
  break-inside: avoid;
  margin: 0.2em 0;
}

@media (max-width: 60em) {
  .toc ol {
    column-count: 1;
  }

  .table-wrap table,
  .table-scroll table {
    min-width: 0;
  }
}

/*
 * Articles box
 */
.articles {
  border: thin solid var(--border);
  border-radius: var(--radius-soft);
  padding: 1.25em;
  background: var(--panel-2);
}

.articles ul {
  list-style: disc;
  padding-left: 1.2em;
}

.articles ul ul {
  list-style: circle;
}

.articles li {
  margin: 0.35em 0;
}

/* Grid layout for articles: two columns on wide screens, stacked on small screens */
.articles-grid {
  display: grid;
  /* Use a more readable minimum column width and allow the grid to
     adapt fluidly across breakpoints. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5em;
  align-items: start;
  grid-auto-rows: minmax(0, auto);
}

.article-column {
  padding: 0.6em;
  border-radius: calc(var(--radius-soft) * 0.9);
  background: linear-gradient(
    160deg,
    #5ad7ff0d,
    #ffffff03 40%,
    transparent 100%
  );
  border: thin solid color-mix(in srgb, var(--border) 85%, transparent 15%);
}

.article-column h3 {
  margin: 0 0 0.5em;
  font-size: 1.05em;
  color: var(--accent);
}

.article-list {
  list-style: none;
  padding-left: 0;
}

.article-list > li {
  margin: 0.45em 0;
}

.topic-list {
  list-style: none;
  padding-left: 0.75em;
  margin-top: 0.35em;
}

.topic-list li {
  margin: 0.3em 0;
  font-size: 0.97em;
}

.article-column a {
  color: var(--link);
}

@media (max-width: 48em) {
  .articles {
    padding: 1em;
  }
  .article-column h3 {
    font-size: 1em;
  }
}

/*
 * Footer
 * Center footer content, except footnote paragraphs.
 */
footer {
  margin-top: 1.5em;
  padding: 1em 0;
  color: var(--muted);
  font-size: 0.95em;
  text-align: center;
}

footer p {
  margin: 0.35em 0;
  text-align: center;
}

#footnotes p,
#footnotes li {
  text-align: start;
}

#footnotes p sup,
#footnotes li sup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  min-height: 1.55em;
  margin-right: 0.45em;
  padding: 0 0.38em;
  border-radius: var(--radius-pill);
  border: thin solid
    color-mix(in srgb, var(--blue-light) 55%, var(--accent) 45%);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--blue-dark) 72%, var(--panel) 28%),
    color-mix(in srgb, var(--accent) 35%, var(--blue-dark) 65%)
  );
  color: #eefdff;
  font-weight: 800;
  font-size: 0.76em;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  box-shadow: 0 0 0.55em #3ee6ff30;
}

/* Footer motto */
footer .motto {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0.35em 0;
}

footer p.motto,
footer h4.motto {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

footer img.motto {
  width: 1em;
  height: 1em;
}

/*
 * Inline code
 */
code {
  padding: 0.2em 0.35em;
  border-radius: 0.35em;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  background: var(--nav-bg);
  border: thin solid color-mix(in srgb, var(--border-2) 70%, var(--accent) 30%);
}

/*
 * Code blocks
 */
pre {
  background: #000;
  color: #39ff14;
  border: thin solid #0f5f0f;
  border-radius: calc(var(--radius-soft) * 0.9);
  padding: 1em;
  overflow-x: auto;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;
  margin: 1em 0;
  line-height: 1.5;
  box-shadow: inset 0 0 1.1em #39ff1422, 0 0 0.85em #39ff1418;
  tab-size: 2;
  font-size: 0.95em;
}

dl {
  margin: 0.35em 0 0.85em;
}

dt {
  margin-top: 0.7em;
  font-weight: 700;
}

dd {
  margin-left: 1.2em;
}

address {
  font-style: normal;
}

pre code {
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  text-shadow: 0 0 0.24em #39ff14a8;
}

/* Quotation styles */
blockquote {
  margin: 0 0 1em;
  padding: 0.9em 1.05em;
  background: var(--panel-2);
  border-left: clamp(0.18em, 0.35vw, 0.32em) solid
    color-mix(in srgb, var(--blue-light) 58%, var(--accent) 42%);
  border-radius: calc(var(--radius) * 0.35);
  color: var(--muted);
  font-style: italic;
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.95em;
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

/*
 * Responsive Image Styles for Articles
 * Use .article-content img for default, and .img-small/.img-medium/.img-large for size variants.
 */
.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto;
  border-radius: calc(var(--radius-soft) * 0.85);
  box-shadow: var(--shadow-img);
  border: thin solid color-mix(in srgb, var(--border) 80%, var(--link) 20%);
}

/* Small images (e.g., icons, inline) */
.article-content img.img-small {
  max-width: clamp(16ch, 30vw, 28ch);
  margin: 1em auto;
  box-shadow: none;
}

/* Medium images (e.g., half-width) */
.article-content img.img-medium {
  max-width: clamp(32ch, 70vw, 56ch);
}

/* Large images (e.g., full-width banners) */
.article-content img.img-large {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Generic image styling (outside article content)
 */
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em auto;
  border-radius: calc(var(--radius-soft) * 1.1);
  border: thin solid var(--border);
  box-shadow: var(--shadow-img);
}

/*
 * Responsive Styles
 */
@media (max-width: 48em) {
  section p,
  main p {
    text-align: start;
  }

  nav ul {
    flex-direction: column;
  }

  nav ul li {
    margin: 0.625em 0;
  }

  section h2 {
    font-size: clamp(1.5em, 3vw + 1em, 2.1em);
  }

  .articles {
    padding: 1.25em;
  }
}

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

@media print, (forced-colors: active) {
  body {
    background: #000;
    color: #fff;
    line-height: 1.8;
  }

  main,
  header,
  footer,
  .toc,
  .articles,
  .article-column {
    background: transparent;
    border-color: currentcolor;
    box-shadow: none;
    text-shadow: none;
  }

  nav ul {
    display: block;
  }

  nav li {
    margin: 0.25em 0;
  }

  nav a {
    display: inline;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
  }

  img {
    border: none;
    box-shadow: none;
  }

  a,
  a:visited {
    color: LinkText;
    text-decoration: underline;
    text-shadow: none;
  }

  pre,
  code {
    background: transparent;
    color: inherit;
    border-color: currentcolor;
    box-shadow: none;
    text-shadow: none;
  }
}

@media tty, speech {
  body {
    background: #000;
    color: #fff;
    padding: 1em;
    line-height: 1.8;
  }

  main,
  header,
  footer,
  #footnotes,
  .toc,
  .articles,
  .article-column,
  nav a,
  .table-wrap,
  .table-scroll,
  table,
  pre,
  code {
    background: transparent !important;
    border-color: currentcolor !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .icon[aria-hidden="true"] {
    display: none !important;
  }

  nav ul {
    display: block;
  }

  nav a {
    display: inline;
    border: none;
    padding: 0;
    margin: 0;
  }

  section p,
  main p,
  article header {
    text-align: start;
    text-justify: auto;
  }
}