/* ============================================
   SteveSec.com
   ============================================ */

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

:root {
  /* Monochrome, warm. The vault's photographs are Leica Q2 Monochrom prints on
     matte cotton paper -- so: no colour doing decorative work, no gloss, and a
     black that is warm rather than blue.  ("the matte cotton paper I prefer",
     opinions/art-beauty/the-objects-of-the-house.md) */
  --bg: #0c0b0a;
  --bg-elevated: #131211;
  --text: #d6d0c6;
  --text-muted: #857f75;
  --text-bright: #f1ede5;

  /* Celadon, not gold.  #b8860b was the default "premium dark portfolio"
     accent.  The one piece of colour named in the house is the celadon vase in
     the alcove that holds the single seasonal sprig; it is quiet, and it earns
     its place by being the only one. */
  --accent: #8a9d90;
  --accent-dim: rgba(138, 157, 144, 0.09);
  --border: #1b1917;
  --border-accent: rgba(138, 157, 144, 0.22);

  /* Two voices, not three.  Restraint is "the right number of things in the
     right relationship", so the decorative display serif and the UI sans are
     gone.  One serif to read in; the mono stays because the hex offsets are
     Steve's own mark, not decoration. */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'SF Mono', monospace;

  --max-width: 720px;
  --nav-height: 72px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

img {
  max-width: 100%;
  height: auto;
}


/* ---- Navigation ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--nav-height);
}

.nav-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.01em;
  margin-right: 2.5rem;
  flex-shrink: 0;
}

.site-logo:hover {
  color: var(--accent);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2.25rem;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-bright);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.hamburger {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text);
  position: relative;
  transition: background 0.2s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.2s ease;
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: translateY(-6px) rotate(-45deg);
}


/* ---- Main Content ---- */

.site-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 3rem) 2rem 4rem;
  min-height: 100vh;
}


/* ---- Homepage ---- */

.home-hero {
  padding: 1rem 0 3.5rem;
}

.home-name {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.hex-offset {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.3;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.home-rule {
  width: 56px;
  height: 1px;
  background: var(--accent);
  border: none;
  margin: 1.5rem 0 2rem;
}

.home-tagline {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin-bottom: 0;
}


/* ---- Pages ---- */

.page-single {
  padding: 2rem 0;
}

.page-header {
  margin-bottom: 3rem;
}

.page-header h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.page-rule {
  width: 48px;
  height: 1px;
  background: var(--accent);
  border: none;
  margin: 1.5rem 0 0;
}

.fn-prologue {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.35;
  margin-top: 0.75rem;
  letter-spacing: 0.02em;
}

.pe-header {
  margin-bottom: 2rem;
}

.pe-header pre {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.4;
  line-height: 1.7;
}

.pe-header code {
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 0.72rem;
}

.page-content {
  color: var(--text);
  line-height: 1.8;
}

.page-content h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.page-content h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.page-content p {
  margin-bottom: 1.25rem;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.page-content li {
  margin-bottom: 0.4rem;
}

.page-content li::marker {
  color: var(--text-muted);
}

.page-content strong {
  color: var(--text-bright);
  font-weight: 600;
}

.page-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--text-muted);
  font-style: italic;
}

.page-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}


/* ---- Code ---- */

code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.page-content p code,
.page-content li code,
.post-content p code,
.post-content li code {
  background: var(--bg-elevated);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: var(--accent);
  border: 1px solid var(--border);
}

.page-content pre,
.post-content pre {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  line-height: 1.55;
}

.page-content pre code,
.post-content pre code {
  background: none;
  padding: 0;
  border: none;
  color: var(--text);
}

.highlight pre {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1.5rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}


/* ---- Services ---- */

.service-list {
  display: flex;
  flex-direction: column;
}

.service {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--border);
}

.service:first-child {
  border-top: 1px solid var(--border);
}

.service-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.75rem;
}

.service p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 580px;
}


/* ---- Writing / Blog Listing ---- */

.blog-listing {
  padding: 2rem 0;
}

.post-list {
  display: flex;
  flex-direction: column;
}

.post-card {
  /* No rule between posts.  The vault's argument for ma is that the thing is
     visible because of what is around it, so the separation is space, not a
     border.  ("the empty space -- ma -- is the carrier of the composition",
     opinions/art-beauty/restraint.md) */
  padding: 0 0 3.25rem;
}

.post-card:last-child {
  padding-bottom: 0;
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
}

.post-title {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.45rem;
}

.post-title a {
  color: var(--text-bright);
  transition: color 0.2s ease;
}

.post-title a:hover {
  color: var(--accent);
}

.post-summary {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.7;
  max-width: 62ch;
}


/* ---- Blog Post ---- */

.blog-post {
  padding: 2rem 0;
}

.post-header {
  margin-bottom: 3rem;
}

.post-header h1 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.post-header .post-meta {
  margin-bottom: 0;
}

.post-content {
  color: var(--text);
  line-height: 1.8;
}

.post-content h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 3rem;
  margin-bottom: 1rem;
}

.post-content h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.post-content p {
  margin-bottom: 1.25rem;
}

.post-content ul,
.post-content ol {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.post-content li {
  margin-bottom: 0.4rem;
}

.post-content li::marker {
  color: var(--text-muted);
}

.post-content strong {
  color: var(--text-bright);
  font-weight: 600;
}

.post-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  margin: 2rem 0;
  color: var(--text-muted);
  font-style: italic;
}

.post-content img {
  border-radius: 3px;
  border: 1px solid var(--border);
  margin: 2rem 0;
}

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

.post-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.back-link {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.back-link:hover {
  color: var(--accent);
}


/* ---- Tags ---- */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.2em 0.55em;
  border-radius: 2px;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}

.tag:hover {
  background: var(--border-accent);
  color: var(--accent);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag-large {
  font-size: 0.82rem;
  padding: 0.3em 0.7em;
}


/* ---- Speaking ---- */


/* ---- Contact ---- */


/* ---- Certifications ---- */

.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.cert {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.25em 0.65em;
  border-radius: 2px;
  letter-spacing: 0.03em;
}




/* ---- 404 ---- */

.four-oh-four {
  min-height: calc(100vh - var(--nav-height) - 10rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.four-oh-four h1 {
  font-family: var(--font-serif);
  font-size: 5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 1rem;
}

.four-oh-four p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 2.5rem;
}

.four-oh-four-link {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.four-oh-four-link:hover {
  color: var(--accent);
}


/* ---- Visitor Awareness ---- */


/* ---- Typing Animation ---- */


@keyframes typing {
  from { width: 0; }
  to { width: 100%; border-right-color: transparent; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  text-align: left;
}

.site-footer p {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.footer-asm {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.3;
  margin-top: 0.4rem;
  letter-spacing: 0.03em;
}


/* ---- Responsive ---- */

@media (max-width: 640px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 0;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .home-hero {
    min-height: auto;
    padding: 3rem 0 2rem;
  }

  .home-name {
    font-size: 2.4rem;
  }


  .page-header h1,
  .post-header h1 {
    font-size: 1.6rem;
  }

}