/* =====================
   WHITE COLOR REFERENCE
   =====================
   #ffffff  pure white
   #f5f5f5  near white
   #eeeeee  very light gray
   #e8e8e8  soft white
   #e0e0e0  light gray white
   #d9d9d9  muted white
   #d0d0d0  cool light gray
   #cccccc  classic light gray
   #c0c0c0  silver
   #bbbbbb  soft silver
   #aaaaaa  medium light gray
   ===================== */
:root {
  --color-bg: #000;
  --color-text: #fff;
  --color-text-bright: #c8c8c8;
  --color-text-muted: #d9d9d9d9;
  --color-text-dim: #444;
  --color-text-faint: #777;
  --color-border: #222;
  --color-border-dim: #1a1a1a;
  --color-surface: #111;
  --color-surface-alt: #0d0d0d;
}

html {
  overflow-y: scroll;
  background: var(--color-bg);
}

body {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 16px;
  font:
    14px/1.6 "JetBrains Mono",
    monospace;
  color: var(--color-text);
  background: var(--color-bg);
}

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

a:visited {
  color: var(--color-text-muted);
}

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

h1,
h2,
h3 {
  line-height: 1.3;
  color: var(--color-text-bright);
  letter-spacing: -0.02em;
}

h1 {
  font-size: 1.6rem;
}
h2 {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.1rem;
}

p > code,
code {
  color: var(--color-text-bright);
  background: var(--color-surface);
  padding: 2px 4px;
  font-size: 0.9em;
}

pre {
  color: var(--color-text);
  background: var(--color-surface);
  padding: 16px;
  overflow-x: auto;
  font-size: 0.85em;
  margin: 16px 0;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

pre code {
  color: inherit;
  background: transparent;
}

.chroma {
  background-color: var(--color-surface) !important;
  border-radius: 4px;
  padding: 16px;
  margin: 16px 0;
  border: 1px solid var(--color-border);
}

.chroma code {
  background: transparent !important;
}

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

figure {
  margin: auto;
}

figcaption {
  color: var(--color-text-muted);
  font:
    12px/1.5 "JetBrains Mono",
    monospace;
  text-align: center;
  margin-top: 6px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* =====================
   HEADER
   ===================== */
header {
  --image-width: 150px;
  --col-gap: 1rem;

  display: grid;
  gap: 0.6rem var(--col-gap);
  grid-template:
    "name-and-subtitle site-image" auto
    "links             site-image" auto
    "nav               nav       " auto
    / auto var(--image-width);

  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border-dim);
  color: var(--color-text-bright);
}

header .name-and-subtitle {
  grid-area: name-and-subtitle;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

header .site-title a {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--color-text-bright) !important;
  text-decoration: none !important;
  line-height: 1.2;
}

header .site-title a:hover {
  color: var(--color-text) !important;
}

.header-handle {
  font-size: 1rem;
  color: var(--color-text-dim);
  font-weight: 400;
}

header .site-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

header a.site-image {
  grid-area: site-image;
  display: flex;
  align-items: center;
  justify-content: center;
}

header a.site-image img {
  width: var(--image-width) !important;
  height: var(--image-width) !important;
  border-radius: 50%;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  opacity: 1;
  filter: grayscale(20%);
  transition: filter 0.2s ease;
}

header a.site-image img:hover {
  filter: grayscale(0%);
  transform: none;
}

header .links {
  grid-area: links;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin: 0;
}

header .links a {
  color: var(--color-text-bright) !important;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

header .links a:hover {
  opacity: 0.5;
  text-decoration: none !important;
}

header .links a svg {
  width: 22px;
  height: 22px;
}

header nav {
  grid-area: nav;
  padding-top: 10px;
  margin-top: 4px;
}

header nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

header nav .nav-links a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

header nav .nav-links a:hover {
  color: var(--color-text-bright) !important;
}

header nav .nav-links .posts {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

header nav .nav-links .categories-tags-collapsed {
  display: none;
}

/* =====================
   MAIN / ARTICLES
   ===================== */
main {
  padding-top: 0px;
}

main > div:first-child {
  margin-bottom: 32px;
}

main > div:first-child h1 {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-dim);
}

main > div:first-child .description,
main > div:first-child p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

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

main li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-dim);
}

main li:last-child {
  border-bottom: none;
}

main .post-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

main .post-title a {
  color: var(--color-text-bright) !important;
  font-size: 1rem;
  transition: opacity 0.2s ease;
}

main .post-title a:hover {
  opacity: 0.6;
}

main .post-title span.date,
main .post-title .date {
  font-size: 0.78rem;
  color: var(--color-text-dim);
}

main h2 {
  margin: 24px 0 16px;
  font-size: 1.1rem;
  color: var(--color-text-bright);
}

main .content > p {
  margin: 8px 0 16px;
  color: var(--color-text);
  line-height: 1.7;
}

main .content ul {
  list-style: disc;
  padding-left: 20px;
  margin: 16px 0;
}

main .content ul li {
  padding: 4px 0;
  border-bottom: none;
  color: var(--color-text);
}

main .content ul li a,
main .content a:not(.btn) {
  color: var(--color-text-bright) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-text-dim) !important;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

main .content ul li a:hover,
main .content a:not(.btn):hover {
  text-decoration-color: var(--color-text-bright) !important;
}

article {
  background: var(--color-bg);
  padding: 14px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border-dim);
}

article:last-of-type {
  border-bottom: none;
}

article h1 {
  font-size: 1.3rem;
  margin: 0 0 8px 0;
}

article .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

article .meta .tag {
  display: inline-block;
  text-decoration: none;
  padding: 1px 5px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.68rem;
  color: var(--color-text-muted) !important;
}

article .meta .tag:hover {
  border-color: var(--color-text-dim);
  color: var(--color-text) !important;
  text-decoration: none !important;
}

article .read-more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

/* Article cards */
article .article-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

article .article-content-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

article .article-thumb {
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  overflow: hidden;
  border-radius: 4px;
  display: block;
}

article .article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  opacity: 0.85;
}

article .article-thumb:hover img {
  transform: scale(1.05);
  opacity: 1;
}

article .article-body {
  flex: 1;
  min-width: 0;
}

article .article-body a {
  text-decoration: none;
}

a.article-title {
  text-decoration: none !important;
}

a.article-title h1 {
  font-size: 1.3rem;
  margin: 0;
  color: var(--color-text-bright);
  font-weight: 500;
  transition: opacity 0.2s ease;
}

a.article-title:hover h1 {
  opacity: 0.6;
}

article .summary-text {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================
   SINGLE POST
   ===================== */
.post-hero-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 3px;
  margin: 0 0 24px 0;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin-bottom: 24px;
}

.post-meta .tag {
  display: inline-block;
  padding: 1px 5px;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.68rem;
  color: var(--color-text-muted) !important;
}

.post-meta .tag:hover {
  border-color: var(--color-text-dim);
  color: var(--color-text) !important;
  text-decoration: none !important;
}

/* =====================
   GITHUB LINK
   ===================== */
.github-link {
  display: inline-block;
}

.github-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-surface);
  color: var(--color-text) !important;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 500;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.github-link a svg {
  fill: currentColor;
}

.github-link a:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text-bright) !important;
  text-decoration: none !important;
}

/* =====================
   NOTE SHORTCODE
   ===================== */
.note {
  background: var(--color-surface-alt) !important;
  border-left: 2px solid var(--color-border);
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.6;
}

.note-label {
  font-weight: 700;
  margin-right: 10px;
  color: var(--color-text-bright) !important;
}

.note-text {
  color: var(--color-text-muted) !important;
}

.note-text a {
  color: var(--color-text) !important;
  text-decoration: underline !important;
}

/* =====================
   TERMINAL STYLES
   ===================== */
.term-line {
  font-size: 0.82rem;
  color: var(--color-text-faint);
  margin-bottom: 4px;
}

.term-path {
  color: var(--color-text-dim);
}

.term-prompt {
  color: var(--color-text-bright);
  font-weight: 700;
}

.term-output {
  margin: 0 0 16px 0;
}

.term-output p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 2px 0;
  line-height: 1.6;
}

.term-output p strong {
  color: var(--color-text);
  font-weight: 400;
}

.term-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.term-tag {
  font-size: 0.72rem;
  padding: 2px 7px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dim);
  color: var(--color-text-muted);
  border-radius: 3px;
}

.term-cursor {
  display: inline-block;
  width: 8px;
  height: 13px;
  background: var(--color-text-bright);
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* =====================
   LIST / TAXONOMY
   ===================== */
.list-content {
  margin: 12px 0 24px 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.list-content h2 {
  font-size: 0.72rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 16px 0 8px 0;
}

.list-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.list-content ul li {
  border: none;
  padding: 0;
}

.list-content ul li a {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dim);
  border-radius: 3px;
  font-size: 0.78rem;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
}

.list-content ul li a:hover {
  border-color: var(--color-border);
  color: var(--color-text) !important;
}

.taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
}

.taxonomy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-dim);
  border-radius: 3px;
  font-size: 0.8rem;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.taxonomy-pill:hover {
  border-color: var(--color-border);
  color: var(--color-text) !important;
}

.taxonomy-count {
  font-size: 0.65rem;
  color: var(--color-text-faint);
}

.taxonomy-pill:hover .taxonomy-count {
  color: var(--color-text-muted);
}

/* =====================
   PAGINATION
   ===================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.pagination a {
  display: inline-block;
  text-decoration: none;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted) !important;
  font-size: 0.85rem;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.pagination a:hover {
  border-color: var(--color-text-dim);
  color: var(--color-text-bright) !important;
}

.pagination .page-info {
  font-size: 0.82rem;
  color: var(--color-text-dim);
}

.view-all {
  display: inline-block;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted) !important;
  font-size: 0.82rem;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.view-all:hover {
  border-color: var(--color-text-dim);
  color: var(--color-text-bright) !important;
  text-decoration: none !important;
}

/* =====================
   SEARCH
   ===================== */
.search-page #search-form {
  display: flex;
  gap: 10px;
  margin: 16px 0 24px;
}

.search-page #search-input {
  flex: 1;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-family: "JetBrains Mono", monospace;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-bright);
}

.search-page #search-input:focus {
  outline: none;
  border-color: var(--color-text-muted);
}

.search-page button {
  padding: 10px 20px;
  font-size: 0.85rem;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  background: var(--color-text-bright);
  color: var(--color-bg);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-page button:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

#search-results .no-results {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.search-results-list {
  list-style: none;
  padding: 0;
}

.search-results-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-dim);
}

.search-results-list li:last-child {
  border-bottom: none;
}

.search-results-list h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.search-results-list .search-meta {
  font-size: 0.78rem;
  color: var(--color-text-dim);
  margin: 0;
}

/* =====================
   QUOTES
   ===================== */
.quote-entry {
  margin: 0 0 20px 0;
  padding: 16px 20px;
  border-left: 2px solid var(--color-border);
  background: var(--color-bg);
  transition: border-color 0.2s ease;
}

.quote-text {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 10px 0;
}

.quote-attribution {
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

.quote-attribution cite {
  font-style: normal;
  color: var(--color-text-muted);
}

.quote-source {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--color-text-faint);
}

.quote-single {
  margin-top: 24px;
  padding: 20px 24px;
}

.recent-quotes {
  margin-top: 32px;
}

.quote-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.quote-link:hover .quote-entry {
  border-left-color: var(--color-text-muted);
}

.quote-attribution a {
  color: var(--color-text-muted) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--color-border) !important;
  text-underline-offset: 3px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.quote-attribution a:hover {
  color: var(--color-text) !important;
  text-decoration-color: var(--color-text) !important;
}

/* =====================
   MISC
   ===================== */
blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border-dim);
  margin: 24px 0;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 1.55rem;
  font-weight: 500;
  font-family: "JetBrains Mono", monospace;
  text-decoration: none !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  border-radius: 3px;
}

.btn-primary {
  background: var(--color-text) !important;
  color: #000 !important;
  border: 1px solid var(--color-text);
}

.btn-primary:hover {
  background: var(--color-text-bright) !important;
  color: #000 !important;
  border-color: var(--color-text-bright);
  text-decoration: none !important;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-muted) !important;
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: transparent;
  border-color: var(--color-text-muted);
  color: var(--color-text-bright) !important;
}

.recent-posts h2 {
  margin: 24px 0 16px;
  color: var(--color-text-bright);
  font-size: 1.1rem;
}

footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-dim);
  color: var(--color-text-faint);
  font-size: 0.78rem;
  text-align: center;
}

#search-query {
  width: 100%;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-bright);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9rem;
  box-sizing: border-box;
  margin-top: 0.5rem;
}

#search-query:focus {
  outline: none;
  border-color: var(--color-text-dim);
}

#search-results a {
  text-decoration: none !important;
}

/* =====================
   EXPERIENCE
   ===================== */
.exp-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
}
.exp-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.exp-logo-fallback {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted, #666);
}
.exp-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.exp-summary {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
/* hide default triangle marker in various browsers */
.exp-summary::-webkit-details-marker {
  display: none;
}
.exp-summary::marker {
  content: "";
}
.exp-summary-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exp-title {
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2px 0;
}
.exp-meta-line {
  font-size: clamp(0.8rem, 2vw, 0.875rem);
  line-height: 1.4;
  color: var(--text-muted, #666);
}
.exp-dates,
.exp-location {
  font-size: clamp(0.75rem, 1.8vw, 0.8125rem);
  opacity: 0.85;
}
.exp-chevron {
  flex-shrink: 0;
  margin-top: 4px;
  transition: transform 0.2s ease;
  color: var(--text-muted, #666);
}
.exp-card[open] .exp-chevron {
  transform: rotate(180deg);
}
.exp-body {
  padding: 0 16px 16px 16px;
  margin-left: 56px; /* aligns under text, past logo width + gap */
}

/* ===== Responsive ===== */

@media (min-width: 1024px) {
  main {
    padding-top: 20px;
  }
}

@media (max-width: 600px) {
  .exp-summary {
    padding: 12px;
    gap: 10px;
  }
  .exp-logo {
    width: 38px;
    height: 38px;
  }
  .exp-body {
    margin-left: 0;
    padding: 0 12px 14px 12px;
  }
  .exp-title {
    font-size: 0.95rem;
  }
  .exp-meta-line,
  .exp-dates,
  .exp-location {
    font-size: 0.78rem;
  }
}

/* =====================
   MOBILE
   ===================== */
@media (max-width: 480px) {
  body {
    padding: 16px 12px;
    overflow-x: hidden;
  }

  h1 {
    font-size: 1.4rem;
  }
  h2 {
    font-size: 1.2rem;
  }

  header {
    --image-width: 80px;
    --col-gap: 0.5rem;
    overflow: hidden;
    width: 100%;
  }

  header .site-title a {
    font-size: 1.5rem;
  }

  header nav .nav-links a svg {
    display: none;
  }

  header nav .nav-links .categories-link,
  header nav .nav-links .tags-link {
    display: none;
  }

  /* Show the collapsed (# 🏷) version */
  header nav .nav-links .categories-tags-collapsed {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  header nav .nav-links .categories-tags-collapsed a svg {
    display: block;
  }

  .hero h1 {
    font-size: 1.3rem;
  }

  .hero-cta {
    flex-direction: column;
  }

  .btn {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  pre {
    padding: 12px;
    font-size: 0.8em;
  }

  main .post-title {
    flex-direction: column;
    gap: 4px;
  }

  main .post-title .date {
    order: -1;
  }

  .post-hero-image {
    height: 200px;
  }

  article .article-content-row {
    flex-direction: column;
  }

  article .article-thumb {
    width: 100% !important;
    height: 200px;
  }

  header nav .nav-links {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0.4rem 0.8rem;
    justify-content: flex-start;
  }

  header nav .nav-links .search-link {
    margin-left: auto;
  }

  header nav .nav-links .search-link span {
    display: none;
  }

  header nav .nav-links .search-link svg {
    display: block;
  }
}

@media (min-width: 481px) {
  header nav {
    display: grid;
    grid-template:
      "nav-links . search-link" auto
      "search-container search-container search-container" auto
      / auto 1fr auto;
  }

  header nav .nav-links {
    grid-area: nav-links;
  }

  #toggle-search {
    grid-area: search-link;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #search-container {
    grid-area: search-container;
  }
}