:root{
  /* Palette: indigo (ai), vermilion (shu), ink, rice-paper */
  --bg: #fcfbf7;            /* rice paper */
  --text: #1a1a1a;          /* sumi ink */
  --muted: #6b6b6b;
  --card: #fffdf7;
  --border: #e7e1d3;
  --primary: #d43c2f;       /* vermilion accent */
  --accent: #234e70;        /* indigo */
  --radius: 14px;
  --measure: 70ch;
  --shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.05);
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0c0d0f;
    --text: #e9e6df;
    --muted: #a7a098;
    --card: #121316;
    --border: #22242a;
    --primary: #ff6a59;  /* brighter vermilion */
    --accent: #7aa2ff;   /* porcelain indigo */
    --shadow: 0 1px 0 rgba(255,255,255,0.03), 0 10px 26px rgba(0,0,0,0.5);
  }
}
[data-theme="light"]{
  --bg: #fcfbf7; --text:#1a1a1a; --muted:#6b6b6b; --card:#fffdf7; --border:#e7e1d3; --primary:#d43c2f; --accent:#234e70;
}
[data-theme="dark"]{
  --bg:#0c0d0f; --text:#e9e6df; --muted:#a7a098; --card:#121316; --border:#22242a; --primary:#ff6a59; --accent:#7aa2ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", "Noto Sans CJK JP", Arial, sans-serif;
  background-image:
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
  background-size: 24px 24px, 36px 36px;
  background-position: 0 0, 12px 12px;
}
a{ color: var(--primary); text-decoration: none }
a:hover, a:focus{ text-decoration: underline }
img{ max-width:100%; height:auto; border-radius: 10px }

.container{ max-width: 1000px; margin: 0 auto; padding: 0 18px }

/* -----------------------------------------------------------------
   Header & navigation (unchanged)
   ----------------------------------------------------------------- */
header{
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(160%) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight: 800; letter-spacing: .5px;
}
.logo{
  inline-size: 42px; block-size: 42px; border-radius: 10px;
  display:grid; place-items:center; font-weight:900;
  background: var(--card);
  border:1px solid var(--border);
  color: var(--accent);
  box-shadow: var(--shadow);
}
.actions{ display:flex; gap:10px; align-items:center }
.btn{
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer; font-weight:600;
  box-shadow: var(--shadow);
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn:focus-visible, input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px }

.searchbar{
  display:flex; gap:8px; align-items:center;
  background: var(--card);
  border:1px solid var(--border);
  padding: 8px 10px; border-radius: 999px;
  width:100%; max-width: 420px;
  box-shadow: var(--shadow);
}
.searchbar input{ flex:1; border:0; background: transparent; color: var(--text) }

/* Wave divider (unchanged) */
.wave-divider{
  height: 18px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'>\
<path d='M0 18c10-10 30-10 40 0s30 10 40 0 30-10 40 0V0H0v18z' fill='%23e7e1d3'/>\
</svg>") repeat-x;
  opacity: .8;
}
.wave-divider.flip{
  transform: scaleY(-1);
  opacity: .7;
}

/* Hero & typography (unchanged) */
.hero{ padding: 28px 0 10px }
.display{
  font-family: "Noto Serif", "Noto Serif JP", "Source Han Serif", Georgia, serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .3px;
  margin: .2rem 0 .5rem;
  background-image: linear-gradient(to right, transparent 70%, rgba(212,60,47,.15) 0);
  background-size: 100% 1.1em;
  background-repeat: no-repeat;
  background-position: 0 90%;
}
.muted{ color: var(--muted) }

/* -----------------------------------------------------------------
   POSTS LIST – now a **single‑column vertical stack**
   ----------------------------------------------------------------- */

/* 1️⃣ Grid container → flex column (gap keeps the spacing) */
.grid{
  display: flex;
  flex-direction: column;
  gap: 18px;               /* same visual gap as before */
}

/* 2️⃣ Card layout – image on top, text below */
article.card{
  display: flex;
  flex-direction: column;          /* stack children vertically */
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* 3️⃣ Image column – full‑width of the card */
.card > a{
  flex: 0 0 auto;                  /* don’t grow/shrink */
  width: 100%;                     /* take the whole line */
  max-width: none;
  border-left: none;               /* remove the old divider */
}

/* 4️⃣ Image itself */
.card .thumb{
  width: 30%;
  height: auto;                    /* natural height – no forced aspect‑ratio */
  object-fit: cover;
  border-radius: 0;                /* flush with card edges */
}

/* 5️⃣ Text column – padding stays the same */
.card .pad{
  flex: 1 1 auto;
  padding: 16px;
}

/* Mobile media query – the previous “stack again” rule is now redundant,
   but we keep it for safety (it simply re‑applies the same layout). */
@media (max-width: 700px){
  article.card{ flex-direction: column; }
  .card > a{
    flex-basis: auto;
    max-width: none;
    border-left: 0;
  }
  .card .thumb{
    aspect-ratio: auto;
    height: auto;
    border-radius: 0;
  }
}

/* Hover effect (still works) */
article.card:hover{ transform: translateY(-3px) }

/* -----------------------------------------------------------------
   Remaining components (unchanged)
   ----------------------------------------------------------------- */
.thumb{ aspect-ratio: 16/9; object-fit: cover }
.pad{ padding: 14px }
.card-title{ margin:.2rem 0 .4rem; font-family: "Noto Serif", "Noto Serif JP", Georgia, serif }

/* Prose / post view (unchanged) */
.prose{
  max-width: var(--measure);
  margin: 0 auto;
}
.post-header{ margin: 18px 0 8px }
.back-link{ border-bottom: 1px dashed color-mix(in oklab, var(--primary), transparent 30%) }
.post-cover{
  aspect-ratio: 16/9; object-fit: cover; width: 100%;
  border-radius: 14px; margin: 10px 0 20px; border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.prose h1,.prose h2,.prose h3{
  font-family: "Noto Serif", "Noto Serif JP", Georgia, serif;
  line-height: 1.25;
}
.prose h1{ font-size: clamp(28px, 4vw, 42px) }
.prose h2{ margin-top: 1.6rem }
.prose h3{ margin-top: 1.2rem }
.prose p{ margin: 1rem 0 }
.prose blockquote{
  margin: 1rem 0; padding: 1rem 1.2rem;
  border-left: 6px solid var(--accent);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--card), black 2%), color-mix(in oklab, var(--card), black 2%)),
    radial-gradient(circle at 20% 20%, rgba(0,0,0,.03), transparent 40%);
  border-radius: 10px;
}
.prose pre{
  overflow:auto; padding: 14px;
  background: #0d1117; color: #eaeef3;
  border-radius: 12px; border:1px solid #2a2f39;
  box-shadow: var(--shadow);
}
.prose code{
  background: color-mix(in oklab, var(--card), black 4%);
  padding: .1em .3em; border-radius: 6px
}

/* Footer (unchanged) */
footer{
  border-top: 1px solid var(--border);
  padding: 0 0 26px;
  color: var(--muted);
  margin-top: 40px;
}

/* Pagination (unchanged) */
.pager{ margin-top:18px; display:flex; align-items:center; gap:12px }

/* A11y (unchanged) */
.skip-link{
  position:absolute; left:-999px; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto;
  padding: 8px; background: var(--card);
  border:1px solid var(--border); border-radius: 8px
}

/* Submit tab (unchanged) */
#submitTab{
  border: 1px dashed color-mix(in oklab, var(--primary), transparent 40%);
}
#submitTab:hover{
  border-style: solid;
}

/* Tags (unchanged) */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: .25rem 0 .5rem;
}
.tags .tag + .tag { margin-left: 8px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1;
  text-decoration: none;
  color: var(--accent, var(--primary));
  background: color-mix(in oklab, var(--card), black 2%);
}
.tag:hover { text-decoration: none; background: color-mix(in oklab, var(--card), black 6%); }

/* Markdown tables (unchanged) */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.table-wrap th,
.table-wrap td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table-wrap thead th {
  background: color-mix(in oklab, var(--card), black 4%);
  font-weight: 700;
}
.table-wrap tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--card), black 2%);
}

/* Utilities */
.hidden{ display:none !important }
.post-meta{ display:flex; gap:10px; align-items:center; color: var(--muted); font-size:.95rem }
.excerpt{ margin:0 0 .6rem }