/* Blog — terminal window content */

/* Atmosphere: grid + halo (shared DNA with maintenance) */
body {
  background-image:
    radial-gradient(640px circle at 50% 18%, color-mix(in oklab, var(--color-accent) 7%, transparent), transparent 65%),
    linear-gradient(color-mix(in oklab, var(--color-border) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--color-border) 30%, transparent) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}

/* Two-pane layout — main content left, tmux rail right */

.main-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) clamp(15rem, 42vw, 33rem);
  width: 100%;
  box-sizing: border-box;
  padding-left: max((100% - 76rem) / 2, 0px);
}

html.js .main-grid {
  transition: grid-template-columns 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js:not(.revealed) .main-grid,
html.panes-zoomed .main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0px, 0px);
}

/* The collapsed rail has no room: fade it out instead of letting it
   wrap one word per line at zero width. Its inner padding must not
   spill past the viewport edge either (the rail now sits flush right). */
.side-pane {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

html.js:not(.revealed) .side-pane,
html.panes-zoomed .side-pane {
  opacity: 0;
  visibility: hidden;
  border-left-width: 0;
}

html.js.revealed:not(.panes-zoomed) .side-pane {
  opacity: 1;
  visibility: visible;
  border-left-width: 1px;
}

html.panes-zoomed .side-pane {
  overflow: hidden;
}

/* Collapsed rail: the freed column goes to the prose, like the title. */
html.panes-zoomed .prose {
  max-width: none;
}

html.panes-zoomed .pane-main {
  max-width: 76rem;
}

.pane-main {
  min-width: 0;
  padding: 2.75rem clamp(1.25rem, 4vw, 3rem) 4rem;
}

/* Main */

.site-main {
  position: relative;
  flex: 1;
}

/* Boot sequence overlay */

.term-boot {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--color-bg);
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 2;
  color: var(--color-text-muted);
}

html.js.boot-active .term-boot {
  display: block;
}

html.js.boot-active .site-main > :not(.term-boot) {
  visibility: hidden;
}

.tb-lines {
  max-width: none;
  margin: 0;
  padding: clamp(1rem, 10vh, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}

.tb-line {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 2em;
  opacity: 0;
}

.tb-line.tb-shown {
  opacity: 1;
}

.tb-prompt {
  color: var(--color-text-subtle);
  font-weight: 600;
}

.tb-ok {
  color: var(--color-accent);
  font-weight: 600;
}

.stat-dot {
  color: var(--color-accent);
  text-shadow: 0 0 6px color-mix(in oklab, var(--color-accent) 60%, transparent);
}

.tb-skip-hint {
  position: absolute;
  right: 1.4rem;
  bottom: 1.1rem;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  animation: hintPulse 2.4s ease-in-out infinite;
}

@keyframes hintPulse {
  50% { opacity: 0.35; }
}

/* Reveal choreography */

html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rd, 0ms), var(--rd, 0ms);
}

html.js.revealed .reveal {
  opacity: 1;
  transform: none;
}

/* Post cards — translucent so the game of life behind stays visible */

.post-card {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface) 50%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  padding: 1.4rem 1.5rem 1.3rem;
}

/* Cards own their full transition list (the plain .reveal rule would
   otherwise swallow it) and carry the stagger only until the choreography
   has played, so hover never waits on --rd. */

html.js .post-card.reveal {
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.35s ease, background 0.35s ease;
  transition-delay: var(--rd, 0ms), var(--rd, 0ms), 0ms, 0ms, 0ms;
}

html.js.revealed-settled .post-card.reveal {
  transition-delay: 0ms;
}

.post-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--color-accent) 70%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.post-card::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent);
  transform: translateX(-130%) skewX(-20deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in oklab, var(--color-accent) 18%, transparent);
}

.post-card:hover::before {
  opacity: 1;
}

.post-card:hover::after {
  transform: translateX(340%) skewX(-20deg);
}

.post-card h2,
.post-card h3 {
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
}

.post-card p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0 0 0.6rem;
}

.post-card .post-meta {
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
}

/* Post list page */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Posts head + tail: shell commands framing the card list */

.posts-head {
  margin: 0 0 1.4rem;
}

.posts-cmd {
  margin: 0 0 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: pre-wrap;
  color: var(--color-text);
}

.posts-out {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-accent);
  padding-left: 2ch;
  text-indent: -2ch;
}

.posts-more {
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

.posts-more a,
.posts-cmd a {
  color: var(--color-accent);
  text-decoration: none;
}

.posts-more a:hover,
.posts-cmd a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Single post */

.single-post h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 0.5rem;
}

.post-meta {
  font-size: 0.8rem;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  margin-bottom: 2rem;
}

.post-tags a {
  color: var(--color-accent);
  text-decoration: none;
}

.post-tags a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Post navigation (prev / home / next) */

.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

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

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

.post-nav-prev {
  justify-self: start;
}

.post-nav .back-home {
  justify-self: center;
  white-space: nowrap;
}

.post-nav-next {
  justify-self: end;
  text-align: right;
}

.post-nav-title {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Tags */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-list a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  padding: 0.2rem 0.5rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

/* Hero (home) */

.hero {
  padding: 3rem 0 2rem;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 0.5rem;
}

.hero p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  max-width: 42ch;
}

.pane-hero {
  padding: 0.4rem 0 1.6rem;
}

.pane-hero .hero-lead {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  max-width: 56ch;
  margin-top: 0;
}

/* Side pane terminal session */

.pane-session {
  display: block;
}

.pane-cmd {
  margin: 0.9rem 0 0.15rem;
  white-space: pre-wrap;
}

.pane-cmd:first-child {
  margin-top: 0;
}

.pane-prompt {
  color: var(--color-text-subtle);
}

.pane-out {
  margin: 0;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  padding-left: 2ch;
  text-indent: -2ch;
}

.pane-cmd a,
.pane-out a {
  color: var(--color-accent);
  text-decoration: none;
}

.pane-cmd a:hover,
.pane-out a:hover {
  color: var(--color-accent-hover);
}

/* Side pane: the grid column carries the separator for its full height;
   the sticky scroller lives inside so the border never stops early. */

.side-pane {
  align-self: stretch;
  border-left: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.side-inner {
  position: sticky;
  top: 3rem;
  max-height: calc(100dvh - 3rem - 2.5rem);
  overflow-y: auto;
  padding: 2rem 1.5rem 2rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.pane-section {
  margin-bottom: 2rem;
}

.pane-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}

.pane-tags a {
  color: var(--color-accent);
}

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

.tag-more a {
  color: var(--color-text-subtle);
}

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

.tag-count {
  color: var(--color-text-subtle);
}

/* Page /tags/ : inventaire trie par nombre d'articles (wc -l style) */
.tag-index-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.tag-index-item {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.18rem 0;
}

.tag-index-item a {
  color: var(--color-accent);
}

.tag-index-item a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.tag-index-item .tag-count {
  min-width: 3ch;
  text-align: right;
  font-size: 0.72rem;
}

/* Tag nav on tag pages: lateral switch between top tags + link to index. */
.tag-nav {
  margin-top: 1.6rem;
}

.tag-nav-list {
  margin: 0.3rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.9;
}

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

.tag-nav-list a:hover {
  color: var(--color-accent-hover);
}

.tag-nav-list a.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tag-nav-list .tag-more a {
  color: var(--color-text-subtle);
}

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

@media (max-width: 1023px) {
  .tag-index-list {
    columns: 1;
  }
}

/* Mobile */

/* Hamburger: blog-only nav control, hidden on desktop (panes-toggle takes over). */
.nav-toggle {
  display: none;
}

@media (max-width: 1023px) {
  .main-grid,
  html.js:not(.revealed) .main-grid,
  html.panes-zoomed .main-grid {
    grid-template-columns: 1fr;
  }

  .side-pane {
    display: none;
  }

  .panes-toggle {
    display: none;
  }

  .task-btn[data-task="legal"] {
    display: none;
  }

  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
  }

  .nav-menu:not([hidden]) {
    display: block;
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    z-index: 55;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0.8rem 1.2rem 1rem;
    font-family: var(--font-mono);
  }

  .nav-menu .pane-cmd {
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
  }

  .nav-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-menu-list a {
    display: block;
    min-height: 44px;
    line-height: 44px;
    color: var(--color-accent);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-menu-list li:last-child a {
    border-bottom: none;
  }

  .nav-menu-list a:hover {
    color: var(--color-accent-hover);
  }

  .prose {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .term-boot {
    font-size: 0.74rem;
  }

  .posts-more {
    text-align: center;
  }

  .post-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .post-nav .back-home {
    order: -1;
    white-space: normal;
  }

  .post-nav-next {
    text-align: left;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .post-card.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .main-grid,
  .side-pane,
  .side-inner {
    transition: none;
  }
}

/* Project banners */

.project-banner {
  margin: 1.6rem 0;
}

.project-banner img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 0.35rem;
  background: var(--color-surface);
}

.project-banner a {
  display: block;
}

.project-banner a:hover img,
.project-banner a:focus-visible img {
  border-color: var(--color-accent);
}

.project-banner figcaption {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-subtle);
}

.project-banner-pair {
  display: grid;
  grid-template-columns: 3fr 4fr;
  gap: 1rem;
  margin: 1.6rem 0;
  align-items: start;
}

.project-banner-pair .project-banner {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.project-banner-pair figcaption {
  margin-top: auto;
  padding-top: 0.45rem;
}

@media (max-width: 640px) {
  .project-banner-pair {
    grid-template-columns: 1fr;
  }
}