/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg: #0b0d0e;
  --panel: #14171a;
  --panel-alt: #1a1e21;
  --border: #2b3136;
  --border-soft: #21262a;

  --text: #c8d1d6;
  --text-dim: #7d8891;
  --text-faint: #565f66;

  --green: #4a6b4d;
  --green-bright: #8ab98d;
  --brown: #9c7043;
  --brown-dim: #6e5233;
  --link: #6f9bc7;
  --link-visited: #8a7bb0;

  --mono: "JetBrains Mono", "Fira Code", ui-monospace, Consolas,
          "Noto Sans Mono CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
          monospace;
  --sans: "IBM Plex Sans", "Segoe UI", Verdana,
          "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
          sans-serif;

  --radius: 3px;
}

* {
  box-sizing: border-box;
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
/* visited color only for prose links, not UI chrome (tabs, cards, pills) */
.post-body a:visited,
.project-writeup a:visited,
.panel-body p a:visited {
  color: var(--link-visited);
}

h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.6em 0;
}

code, .mono {
  font-family: var(--mono);
}

::selection {
  background: var(--green);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page {
  width: 100%;
  max-width: 880px;
  margin: 32px auto;
  padding: 0 16px;
  flex: 1;
}

/* ============================================================
   HEADER / CHROME BAR / TAB STRIP  (signature element)
   Styled like an old app window title bar with folder-style
   tabs underneath it -- the thing this whole site is dressed as.
   ============================================================ */
#site-header {
  /* body is a column flex container; this has auto side-margins for
     centering, and a flex item with auto cross-axis margins skips
     stretch and shrink-to-fits its content instead -- which for the
     unwrapped tab strip means the full max-width, on any screen
     size. width:100% (matching .page) forces it to track the
     viewport so .tab-strip's own overflow-x:auto can scroll
     internally instead of widening the whole page. */
  width: 100%;
  max-width: 880px;
  margin: 24px auto 0 auto;
  padding: 0 16px;
}

.chrome-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 12px;
}

.chrome-dots {
  display: flex;
  gap: 6px;
}
.chrome-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--text-faint);
}
.chrome-dots span:nth-child(1) { border-color: var(--brown-dim); }
.chrome-dots span:nth-child(2) { border-color: var(--text-faint); }
.chrome-dots span:nth-child(3) { border-color: var(--green); }

.chrome-path {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.chrome-cursor {
  animation: blink 1.1s steps(1) infinite;
  color: var(--green-bright);
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.tab-strip {
  display: flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: hidden;
  /* hide the scrollbar (strip still scrolls on narrow screens) */
  scrollbar-width: none;      /* firefox */
  -ms-overflow-style: none;   /* old edge/ie */
}
.tab-strip::-webkit-scrollbar {
  display: none;              /* chrome, safari, edge */
}

.tab {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  padding: 10px 16px 9px 16px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  margin-top: 6px;
  position: relative;
  white-space: nowrap;
}
.tab:hover {
  color: var(--text);
  text-decoration: none;
  background: var(--panel-alt);
}
.tab--active {
  color: var(--green-bright);
  background: var(--bg);
  border-color: var(--border);
  border-bottom: 1px solid var(--bg);
  margin-bottom: -1px;
}
.tab::before {
  content: "#";
  color: var(--brown);
  margin-right: 6px;
  opacity: 0.7;
}

/* ============================================================
   PANELS (the boxed "forum post" look)
   ============================================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.panel-title {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-alt);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-title::before {
  content: "// ";
  color: var(--green);
}

.panel-body {
  padding: 16px;
}

/* ============================================================
   HOME PAGE
   ============================================================ */
.intro-panel .panel-body {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.intro-avatar {
  width: 84px;
  height: 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--panel-alt);
}
.intro-text h1 {
  font-size: 20px;
  margin-bottom: 4px;
}
.intro-text .subtitle {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 10px;
}

.latest-post-card {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
}
.latest-post-card:hover {
  background: var(--panel-alt);
  text-decoration: none;
}
.latest-post-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.latest-post-title {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}
.latest-post-card:hover .latest-post-title {
  color: var(--green-bright);
}
.latest-post-summary {
  color: var(--text-dim);
  font-size: 14px;
}

/* ============================================================
   BLOG INDEX ( ls -la style listing )
   ============================================================ */
.blog-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-alt);
}

.blog-search {
  flex: 1 1 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 10px;
}
.blog-search::placeholder {
  color: var(--text-faint);
}

select.blog-filter {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 10px;
}

.blog-sort-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
  padding: 7px 10px;
  cursor: pointer;
}
.blog-sort-btn:hover {
  color: var(--green-bright);
  border-color: var(--green);
}

.listing-header-row,
.listing-row {
  display: grid;
  grid-template-columns: 96px 1fr 200px;
  gap: 12px;
  align-items: baseline;
  padding: 10px 16px;
}
.listing-header-row {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-soft);
}
.listing-row {
  border-bottom: 1px solid var(--border-soft);
}
.listing-row:last-child {
  border-bottom: none;
}
.listing-row:hover {
  background: var(--panel-alt);
}
.listing-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.listing-main a.listing-title {
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
}
.listing-row:hover .listing-title {
  color: var(--green-bright);
}
.listing-cat {
  display: block;
  font-size: 11px;
  color: var(--brown);
  font-family: var(--mono);
  margin-top: 3px;
}
.listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.tag-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown);
  border: 1px solid var(--brown-dim);
  border-radius: var(--radius);
  padding: 2px 7px;
  background: rgba(156, 112, 67, 0.08);
}
a.tag-pill:hover {
  color: var(--bg);
  background: var(--brown);
  text-decoration: none;
}

.empty-state {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 13px;
}

.year-separator {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green-bright);
  background: var(--panel-alt);
  padding: 6px 16px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: 0.15em;
}
.year-separator::before {
  content: "== ";
  color: var(--text-faint);
}
.year-separator::after {
  content: " ==";
  color: var(--text-faint);
}

.milestone-star {
  color: var(--brown);
  font-size: 12px;
}

.milestone-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.milestone-filter input {
  accent-color: var(--green);
}
.milestone-filter:hover {
  color: var(--brown);
}

/* ============================================================
   MEDIA REVIEWS
   ============================================================ */
.media-row {
  display: grid;
  grid-template-columns: 96px 1fr 170px;
  gap: 12px;
  align-items: baseline;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.media-row:last-child {
  border-bottom: none;
}
.media-row:hover {
  background: var(--panel-alt);
}
.media-row:hover .listing-title {
  color: var(--green-bright);
}
.media-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-top: 4px;
}
.media-row-score {
  text-align: right;
}

.type-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--green-bright);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 2px 7px;
  background: rgba(74, 107, 77, 0.12);
}
a.type-pill:hover {
  color: var(--bg);
  background: var(--green);
  text-decoration: none;
}

.series-link {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--link);
}
.series-link::before {
  content: "\2261 ";
  color: var(--text-faint);
}

.score-display {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.score-num {
  color: var(--text);
}
.score-track {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.score-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--green-bright);
}
/* segment ticks every 10% to keep the 10-notch terminal feel */
.score-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    var(--bg) calc(10% - 1px),
    var(--bg) 10%
  );
  pointer-events: none;
}

.series-filter-note {
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-alt);
}

.series-list {
  padding: 0;
}
.series-entry {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.series-entry:last-child {
  border-bottom: none;
}
a.series-entry:hover {
  background: var(--panel-alt);
  text-decoration: none;
}
.series-entry-title {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
a.series-entry:hover .series-entry-title {
  color: var(--green-bright);
}
.series-entry--current {
  background: rgba(74, 107, 77, 0.08);
}
.series-you-are-here {
  color: var(--brown);
  font-size: 11px;
}

@media (max-width: 640px) {
  .media-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .media-row-score {
    text-align: left;
  }
}

/* ============================================================
   BLOG POST TEMPLATE
   ============================================================ */
.post-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.post-breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.post-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.post-meta-row .listing-cat {
  margin-top: 0;
}
.post-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.post-where-row {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.post-where-row::before {
  content: "\2261 played on: ";
  color: var(--text-faint);
}

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-alt);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.lang-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
}

.post-image {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--border-soft);
}

.post-summary {
  padding: 18px 24px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-dim);
  font-style: italic;
  font-size: 16px;
  line-height: 1.75;
}
.post-summary .panel-title {
  margin: -18px -24px 12px -24px;
}

/* ------------------------------------------------------------
   Long-form reading typography (blog posts, media reviews,
   project write-ups). Larger type, taller line height, extra
   space between paragraphs, and a capped line length -- second-
   language reading especially benefits from all three.
   Index/about pages keep the denser 15px UI sizing.
   ------------------------------------------------------------ */
.post-body,
.project-writeup {
  padding: 24px;
  font-size: 17px;
  line-height: 1.85;
  margin: 0 auto;
}
.post-body p,
.project-writeup p {
  margin: 0 0 1.5em 0;
}
.post-body p:last-child,
.project-writeup p:last-child {
  margin-bottom: 0;
}

.body-figure {
  margin: 1.4em 0;
}
.body-figure img {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.body-figure figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
}
.body-figure figcaption::before {
  content: "fig. ";
  color: var(--brown);
}

/* code blocks */
.code-block {
  margin: 1.4em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.code-block-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border-soft);
}
.code-block-lang {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown);
}
.code-copy-btn {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
}
.code-copy-btn:hover {
  color: var(--green-bright);
  border-color: var(--green);
}
.code-block pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
}
.code-block code {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
  tab-size: 4;
}

/* project status badges */
.status-badge {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid;
  white-space: nowrap;
  align-self: flex-start;
}
.status-badge--green {
  color: var(--green-bright);
  border-color: var(--green);
  background: rgba(74, 107, 77, 0.15);
}
.status-badge--brown {
  color: var(--brown);
  border-color: var(--brown-dim);
  background: rgba(156, 112, 67, 0.12);
}
.status-badge--blue {
  color: var(--link);
  border-color: #3d5a75;
  background: rgba(111, 155, 199, 0.1);
}
.status-badge--dim {
  color: var(--text-faint);
  border-color: var(--border);
  background: transparent;
  text-decoration: line-through;
}
.status-badge--neutral {
  color: var(--text-dim);
  border-color: var(--border);
  background: var(--panel-alt);
}

.project-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.project-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.project-card-title-row .project-card-name {
  margin-bottom: 0;
}

.post-project-link {
  margin: 0 20px 20px 20px;
  padding: 12px 14px;
  border: 1px dashed var(--green);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
}
.post-project-link a {
  color: var(--green-bright);
}

/* prev/next post navigation */
.post-nav {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px 20px;
}
.post-nav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
}
.post-nav-link:hover {
  border-color: var(--green);
  text-decoration: none;
}
.post-nav-newer {
  text-align: right;
}
.post-nav-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown);
}
.post-nav-title {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
}
.post-nav-link:hover .post-nav-title {
  color: var(--green-bright);
}
.post-nav-spacer {
  flex: 1;
}
@media (max-width: 640px) {
  .post-nav {
    flex-direction: column;
  }
  .post-nav-newer {
    text-align: left;
  }
}

/* links / blogroll page */
.links-intro {
  margin: 0;
  color: var(--text-dim);
}
.link-section-body {
  padding: 0;
}
.link-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.link-entry:last-child {
  border-bottom: none;
}
.link-entry:hover {
  background: var(--panel-alt);
}
.link-entry-name {
  font-family: var(--mono);
  font-size: 14px;
}
.link-entry-name::before {
  content: "> ";
  color: var(--green);
}
.link-entry-desc {
  font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================
   PROJECTS INDEX
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.project-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.project-card:hover {
  border-color: var(--green);
  text-decoration: none;
}
.project-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}
.project-card-body {
  padding: 12px 14px;
}
.project-card-name {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}
.project-card:hover .project-card-name {
  color: var(--green-bright);
}
.project-card-desc {
  font-size: 13px;
  color: var(--text-dim);
}
.project-card-count {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown);
}

/* ============================================================
   PROJECT TEMPLATE
   ============================================================ */
.project-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-soft);
}
.project-header h1 {
  font-size: 22px;
}
.project-tagline {
  color: var(--text-dim);
}
.project-image {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--border-soft);
}
/* .project-writeup reading typography defined with .post-body above */

.linked-posts-panel .panel-body {
  max-height: 480px;
  overflow-y: auto;
  padding: 0;
}
.linked-post-entry {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.linked-post-entry:last-child {
  border-bottom: none;
}
.linked-post-entry:hover {
  background: var(--panel-alt);
  text-decoration: none;
}
.linked-post-entry .listing-date {
  margin-right: 10px;
}
.linked-post-entry .latest-post-title {
  font-size: 14px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-hero {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
}
.about-avatar {
  width: 120px;
  height: 120px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--panel-alt);
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.contact-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 10px;
}
.contact-list li:last-child {
  border-bottom: none;
}
.contact-label {
  color: var(--brown);
  width: 90px;
  flex-shrink: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--border-soft);
  padding: 16px;
}
.footer-inner {
  max-width: 880px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-sep {
  color: var(--border);
}

/* ============================================================
   PHOTOLOG
   Single-column feed -- each entry is its own panel: a slim
   date/title header, then the photo full-width.
   ============================================================ */
.photolog-entry {
  overflow: hidden;
}
.photolog-entry-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  font-family: var(--mono);
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border-soft);
}
.photolog-entry-title {
  color: var(--text);
  font-size: 13px;
}
.photolog-entry-image {
  width: 100%;
  display: block;
}

/* ============================================================
   NOW PAGE
   Glanceable: an intro panel, then one divided-row panel per
   entry -- thumbnail (if any) beside the text, never full-width.
   ============================================================ */
.now-intro p {
  margin: 0 0 8px 0;
}
.now-updated {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
}
.now-entries-body {
  padding: 0;
}
.now-entry {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.now-entry:last-child {
  border-bottom: none;
}
.now-entry-image {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  flex-shrink: 0;
}
.now-entry-title {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.now-entry-blurb {
  font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================
   BACKLOG
   One panel per section: a visually distinct "up next" spotlight,
   then the plain list of everything else below it.
   ============================================================ */
.backlog-upnext {
  padding: 14px 16px;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border-soft);
}
.backlog-upnext-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brown);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.backlog-upnext-title {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--text);
}
.backlog-upnext-note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dim);
}
.backlog-list {
  padding: 0;
}
.backlog-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.backlog-item:last-child {
  border-bottom: none;
}
.backlog-item-title {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
}
.backlog-item-note {
  font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .listing-header-row,
  .listing-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .listing-tags {
    justify-content: flex-start;
  }
  .intro-panel .panel-body,
  .about-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-list li {
    justify-content: center;
  }
}