/* Overprint: Kevan's custom layer on top of Taste.
   Carried over from the Ghost "Site header" code injection. */
/* ---------- 1. THE INKS ------------------------------------- */
:root {
  --op-cyan:    #00a3da;
  --op-magenta: #e5007e;
  --op-yellow:  #ffd500;
  --op-key:     #121212;
  --op-paper:   #ffffff;
  --op-ground:  #f1efea;
  --ghost-accent-color: #e5007e;
}

/* ---------- 2. PAPER + TYPE --------------------------------- */
/* NOTE: your Taste design setting has the page background set to
   #f3ff00 (bright yellow). This line is what's overriding it.
   Delete the next line if you'd rather have the yellow ground. */
html, body { background: var(--op-paper) !important; color: var(--op-key); }

body {
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  /* faint halftone tooth — delete these 3 lines if it's too busy */
  background-image: radial-gradient(var(--op-cyan) 0.9px, transparent 1px);
  background-size: 22px 22px;
  background-attachment: fixed;
}

h1, h2, h3, h4,
.gh-article-title, .gh-list-item-title, .gh-list-title {
  font-family: "Pixelify Sans", "Courier New", monospace !important;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
}

.gh-head-logo {
  font-family: "Pixelify Sans", monospace !important;
  text-shadow: 2px 0 0 var(--op-cyan), -2px 0 0 var(--op-magenta);
}

time, figcaption, .gh-article-meta, .gh-list-action {
  font-family: "DM Mono", monospace !important;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- 3. THE COLOUR BAR ------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: 9999;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
    var(--op-cyan) 0 60px, var(--op-magenta) 60px 120px,
    var(--op-yellow) 120px 180px, var(--op-key) 180px 240px);
}

/* ---------- 4. NAV — all items match ------------------------ */
.gh-head-menu .nav > li > a {
  font-family: "Silkscreen", monospace !important;
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--op-key) !important;
  background: var(--op-yellow);
  border: 2px solid var(--op-key);
  padding: 10px 11px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.gh-head-menu .nav > li > a:hover { background: var(--op-key); color: var(--op-yellow) !important; }
.gh-head-menu .nav > li.nav-current > a { background: var(--op-magenta); color: #fff !important; }

/* ---------- 5. SEARCH — exactly one of them ----------------- */
/* Taste ships TWO search buttons: one beside the logo for phones,
   one in the header actions for desktop, and hides whichever one
   isn't needed. These two rules keep that behaviour locked in so
   nothing can ever show both. Taste's breakpoint is 768px. */
@media (max-width: 767px) { .gh-head-actions .gh-search { display: none !important; } }
@media (min-width: 768px) { .gh-head-brand .gh-search { display: none !important; } }

.gh-search.gh-icon-btn {
  width: auto;
  height: auto;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border: 2px solid var(--op-key);
  border-radius: 0;
  background: var(--op-paper);
  color: var(--op-key);
  cursor: pointer;
}
.gh-search.gh-icon-btn::after {
  content: "SEARCH";
  font-family: "Silkscreen", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.gh-search.gh-icon-btn:hover { background: var(--op-cyan); opacity: 1; }
@media (max-width: 860px) { .gh-search.gh-icon-btn::after { display: none; } }

/* ---------- 6. HOMEPAGE FEED -------------------------------- */
.gh-list-item {
  border: 3px solid var(--op-key);
  background: var(--op-paper);
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
.gh-list-item:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--op-cyan); }
.gh-list-item-inner { padding: 18px; }
.gh-list-item-title { margin-top: 8px; }
.gh-list-item-excerpt { font-family: "Archivo", sans-serif; font-size: 15px; line-height: 1.5; }

.gh-list-header { border-bottom: 3px solid var(--op-key); padding-bottom: 10px; margin-bottom: 22px; }
.gh-list-title { font-size: clamp(28px, 5vw, 42px); }
.gh-list-action { color: var(--op-magenta) !important; text-decoration: none; }

.gh-list-item-primary-tag {
  font-family: "Silkscreen", monospace;
  font-size: 10px;
  background: var(--op-yellow);
  border: 2px solid var(--op-key);
  color: var(--op-key) !important;
  padding: 6px 8px;
  display: inline-block;
  line-height: 1;
}
.tag-portfolio .gh-list-item-primary-tag { background: var(--op-cyan); }
.tag-creative-practice .gh-list-item-primary-tag { background: var(--op-magenta); color: #fff !important; }
.tag-talks .gh-list-item-primary-tag { background: var(--op-key); color: var(--op-yellow) !important; }

/* ---------- 7. READING -------------------------------------- */
.gh-content { font-size: 19px; line-height: 1.65; }
.gh-content a {
  color: var(--op-magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* pixel drop cap. It caps whatever the first character is — if a
   post opens with a bracket, you get a giant bracket. */
.gh-content > p:first-of-type::first-letter {
  font-family: "Pixelify Sans", monospace;
  font-size: 4.2em;
  line-height: 0.72;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--op-magenta);
  text-shadow: 3px 0 0 var(--op-cyan);
}

.gh-content blockquote {
  background: var(--op-key);
  color: var(--op-paper);
  border: 0 !important;
  padding: 24px 22px;
  font-family: "Pixelify Sans", monospace;
  font-size: 1.5em;
  line-height: 1.1;
}

/* ---------- 8. BOOKMARK CARDS ------------------------------- */
/* The card Ghost builds when you paste a link on its own line. */
.kg-bookmark-card, .kg-bookmark-container {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 3px solid var(--op-key) !important;
  background: var(--op-paper);
  overflow: hidden;
  transition: transform 0.08s linear, box-shadow 0.08s linear;
}
.kg-bookmark-card { border: 0 !important; }
.kg-bookmark-container { text-decoration: none !important; align-items: stretch; }
.kg-bookmark-container:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--op-cyan) !important; }

.kg-bookmark-content {
  padding: 18px 20px !important;
  border-left: 10px solid var(--op-yellow);
}
.kg-bookmark-title {
  font-family: "Pixelify Sans", monospace !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  color: var(--op-key) !important;
}
.kg-bookmark-description {
  font-family: "Archivo", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #3d3a36 !important;
  margin-top: 8px !important;
}
.kg-bookmark-metadata {
  font-family: "DM Mono", monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--op-key) !important;
  margin-top: 12px !important;
}
.kg-bookmark-metadata::after {
  content: "↗";
  margin-left: 8px;
  color: var(--op-magenta);
}
.kg-bookmark-icon { border-radius: 0 !important; }
.kg-bookmark-thumbnail { border-left: 3px solid var(--op-key); }
.kg-bookmark-thumbnail img { border-radius: 0 !important; border: 0 !important; }
/* a link to your own site gets cyan instead of yellow */
.kg-bookmark-container[href*="kevangilbert.com"] .kg-bookmark-content { border-left-color: var(--op-cyan); }

/* ---------- 9. BUTTONS (only the real ones) ----------------- */
a.gh-button, .gh-button, .kg-btn, input[type="submit"], .gh-head-button {
  font-family: "Silkscreen", monospace !important;
  font-size: 12px !important;
  border: 3px solid var(--op-key) !important;
  border-radius: 0 !important;
  background: var(--op-magenta) !important;
  color: #fff !important;
  box-shadow: 5px 5px 0 var(--op-cyan);
  padding: 14px 16px !important;
  min-height: 44px;
}
a.gh-button:hover, .gh-button:hover, .kg-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--op-cyan); }

/* ---------- 10. THE FOOTER ---------------------------------- */
/* Breathing room, then a colophon that looks like the back page
   of something printed. */
.gh-foot {
  margin-top: 90px;
  background: var(--op-key);
  color: var(--op-paper);
  padding-block: 40px 34px !important;
  position: relative;
}
.gh-foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background-image: repeating-linear-gradient(90deg,
    var(--op-cyan) 0 60px, var(--op-magenta) 60px 120px,
    var(--op-yellow) 120px 180px, var(--op-paper) 180px 240px);
}
.gh-foot a { color: var(--op-cyan) !important; }
.gh-foot-menu .nav > li > a {
  font-family: "Silkscreen", monospace !important;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--op-key) !important;
  background: var(--op-yellow);
  border: 2px solid var(--op-paper);
  padding: 10px 11px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.gh-foot-menu .nav > li > a:hover { background: var(--op-cyan); }
.gh-copyright {
  font-family: "DM Mono", monospace !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a9a6a0 !important;
}

/* the colophon block the footer script adds */
.op-colophon {
  border-top: 2px solid #3a3a3a;
  margin-top: 28px;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.op-colophon-mark {
  font-family: "Pixelify Sans", monospace;
  font-size: 30px;
  line-height: 1;
  color: var(--op-paper);
  text-shadow: 2px 0 0 var(--op-cyan), -2px 0 0 var(--op-magenta);
}
.op-colophon-text {
  flex: 1 1 320px;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #a9a6a0;
}
.op-colophon-links { display: flex; flex-wrap: wrap; gap: 8px; }
.op-colophon-links a {
  font-family: "Silkscreen", monospace;
  font-size: 10px;
  text-decoration: none;
  color: var(--op-paper) !important;
  border: 2px solid var(--op-paper);
  padding: 10px 11px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.op-colophon-links a:hover { background: var(--op-paper); color: var(--op-key) !important; }
.op-regmarks { display: flex; gap: 10px; opacity: 0.65; }

/* ---------- 11. SMALL PRINT --------------------------------- */
.gh-article-image img, .kg-image, .gh-list-item-image img {
  border-radius: 0 !important;
  border: 3px solid var(--op-key);
}
::selection { background: var(--op-yellow); color: var(--op-key); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--op-magenta); outline-offset: 2px; }
hr { border: 0; height: 10px; background-image: linear-gradient(90deg,
  var(--op-cyan) 0 25%, var(--op-magenta) 25% 50%,
  var(--op-yellow) 50% 75%, var(--op-key) 75% 100%); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 12. TICKER (was injected by footer script) ------ */
.op-ticker{background:#121212;color:#ffd500;font-family:'Silkscreen',monospace;font-size:11px;letter-spacing:.08em;padding:9px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:10}
.op-ticker span{display:inline-block;padding-left:100%;animation:op-slide 32s linear infinite}
@keyframes op-slide{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.op-ticker span{animation:none;padding-left:16px}}
@media print{.op-ticker{display:none}}