/* dmcdonald.net prototype - operational terminal style */

:root {
  --bg: #0e0e0e;
  --fg: #d8cfb8;
  --muted: #7d7768;
  --accent: #ff9933;
  --warn: #ff5544;
  --rule: #2a2620;
  --link: #ffb866;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "JetBrains Mono", "Berkeley Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.55;
}

body {
  margin: 0;
  padding: 0;
}

main {
  max-width: 78ch;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

header .banner {
  color: var(--accent);
  font-size: 0.95rem;
  margin: 0 0 2rem;
  white-space: pre;
  line-height: 1.3;
}

.intro h1 {
  font-size: 1.6rem;
  margin: 0 0 0.3rem;
  letter-spacing: 0.04em;
  color: var(--fg);
  font-weight: 700;
}

.tagline {
  color: var(--accent);
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}

.bio {
  margin: 0 0 2rem;
  color: var(--fg);
}

nav {
  margin: 0 0 2.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

nav a {
  color: var(--link);
  text-decoration: none;
}

nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}

nav a.current {
  color: var(--accent);
}

/* Brackets are present on every nav item to reserve their layout width, but
   only visible on the current page. Without this, the brackets only appear on
   the active link and the rest of the nav reflows around the wider item,
   making the menu spacing jump as you navigate between pages. */
nav a::before {
  content: "[";
  margin-right: 0.15em;
  color: transparent;
}

nav a::after {
  content: "]";
  margin-left: 0.15em;
  color: transparent;
}

nav a.current::before,
nav a.current::after {
  color: var(--accent);
}

.block {
  margin: 0 0 2.2rem;
}

.block h2 {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0 0 0.8rem;
  letter-spacing: 0.02em;
}

ul.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.entries li {
  display: grid;
  grid-template-columns: 7ch 18ch 1fr auto;
  gap: 1rem;
  padding: 0.25rem 0;
  align-items: baseline;
}

/* fallback for entries without a date or venue */
ul.entries li:not(:has(.date)) {
  grid-template-columns: 22ch 1fr;
}

.date {
  color: var(--muted);
  font-size: 0.9rem;
}

.venue {
  color: var(--accent);
  font-size: 0.95rem;
}

.title {
  color: var(--fg);
}

.desc {
  color: var(--muted);
  font-size: 0.95rem;
}

.status {
  color: var(--warn);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.warn {
  color: var(--warn);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

a {
  color: var(--link);
}

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

footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}

footer .contact {
  margin: 0 0 0.3rem;
}

footer .muted {
  color: var(--muted);
  margin: 0;
  font-size: 0.85rem;
}

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

.more {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}

.more a {
  color: var(--muted);
}

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

.page-title {
  margin: 0 0 0.3rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.page-blurb {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.year-marker {
  margin: 1.8rem 0 0.6rem;
  font-size: 0.9rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.entry-block {
  margin: 0 0 1.6rem;
}

.entry-block h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

.entry-block .meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.03em;
}

.entry-block .body {
  margin: 0 0 0.3rem;
  color: var(--fg);
  font-size: 0.95rem;
}

.entry-block .links {
  font-size: 0.9rem;
  color: var(--muted);
}

.entry-block .links a {
  color: var(--link);
}

.deprecated h3,
.deprecated .body {
  color: var(--muted);
}

.section-rule {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
  letter-spacing: 0.02em;
}

.warning-box {
  border: 1px solid var(--warn);
  padding: 0.8rem 1rem;
  margin: 0 0 1.6rem;
  color: var(--warn);
  font-size: 0.9rem;
}

.warning-box strong {
  color: var(--warn);
}

.about-body h1 {
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.04em;
  color: var(--fg);
}

.about-body h2 {
  font-size: 1rem;
  margin: 2rem 0 0.8rem;
  color: var(--accent);
  letter-spacing: 0.03em;
}

.about-body h3 {
  font-size: 0.95rem;
  margin: 1.4rem 0 0.6rem;
  color: var(--fg);
}

.about-body p {
  margin: 0 0 1rem;
  color: var(--fg);
}

.about-body ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.about-body ul li {
  margin: 0.3rem 0;
  color: var(--fg);
  position: relative;
  padding-left: 1.4rem;
}

.about-body ul li::before {
  content: "─";
  position: absolute;
  left: 0;
  color: var(--muted);
}

.about-body code {
  background: #050505;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  font-size: 0.9em;
  color: var(--link);
}

.about-body em {
  color: var(--muted);
  font-style: italic;
}

.reveal-email button {
  background: transparent;
  color: var(--link);
  border: 1px solid var(--rule);
  padding: 0.3em 0.8em;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.reveal-email button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.reveal-email button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.reveal-email .muted {
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: 0.6em;
}

.reveal-email .scramble {
  color: var(--accent);
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
  margin-left: 0.6em;
}

.reveal-email .scramble:empty {
  margin-left: 0;
}

#reveal-email-output {
  margin-left: 0.6em;
}

#reveal-email-output:empty {
  margin-left: 0;
}

.post-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
  letter-spacing: 0.02em;
}

.post-source {
  border-left: 2px solid var(--rule);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.post-context {
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 0 0 2rem;
  color: var(--fg);
  font-size: 0.95rem;
  font-style: italic;
}

.post-context p {
  margin: 0;
}

.post-body {
  margin: 0 0 2rem;
}

.post-body p {
  margin: 0 0 1rem;
  color: var(--fg);
}

.post-body h2 {
  margin: 2rem 0 0.8rem;
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.post-body h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1rem;
  color: var(--fg);
  font-weight: 700;
}

.post-body pre {
  background: #050505;
  border: 1px solid var(--rule);
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg);
}

.post-body code {
  background: #050505;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  font-size: 0.9em;
  color: var(--link);
}

.post-body pre code {
  background: transparent;
  padding: 0;
  color: var(--fg);
}

.post-body ul, .post-body ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  color: var(--fg);
}

.post-body li {
  margin: 0.2rem 0;
}

.post-body .placeholder-image {
  border: 1px dashed var(--rule);
  padding: 1rem;
  margin: 1rem 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
  font-style: italic;
}

.post-body figure {
  margin: 1.5rem 0;
  text-align: center;
}

.post-body figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  display: block;
  margin: 0 auto;
}

.post-body figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

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

.headshot {
  float: right;
  width: 200px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--rule);
}

@media (max-width: 600px) {
  .headshot {
    float: none;
    display: block;
    margin: 0 auto 1.5rem;
  }
}

.post-footer-note {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}

.gallery {
  position: relative;
  margin: 1.2rem 0;
  border: 1px solid var(--rule);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
}

.gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.gallery-1 img {
  opacity: 1;
}

.gallery-2 img { animation: gallery-rotate-2 8s infinite; }
.gallery-3 img { animation: gallery-rotate-3 12s infinite; }
.gallery-4 img { animation: gallery-rotate-4 16s infinite; }

.gallery img:nth-child(1) { animation-delay: 0s; }
.gallery img:nth-child(2) { animation-delay: 4s; }
.gallery img:nth-child(3) { animation-delay: 8s; }
.gallery img:nth-child(4) { animation-delay: 12s; }

@keyframes gallery-rotate-2 {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gallery-rotate-3 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  30%  { opacity: 1; }
  34%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes gallery-rotate-4 {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  22%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}