/* ============================================================
   KEMUHUA — journal (archive + article pages)
   Extends style.css
   ============================================================ */

body{background:var(--paper)}

/* ---------- solid nav for inner pages ---------- */
.nav--solid{background:rgba(244,240,230,.96);color:var(--ink);box-shadow:0 1px 0 rgba(14,17,14,.1);backdrop-filter:blur(14px)}
.nav--solid .btn--ghost{border-color:rgba(14,17,14,.24);color:var(--ink)}
.nav--solid .btn--ghost:hover{color:#fff}
.nav--solid .brand__txt i{opacity:.5}

.wrap--narrow{max-width:820px}

/* ============================================================
   PAGE HEAD (archive)
   ============================================================ */
.page-head{padding:clamp(120px,15vh,180px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.page-head .label{margin-bottom:22px}
.page-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6.2vw,5.2rem);line-height:.98;letter-spacing:-.032em;
  max-width:14ch;
}
.page-head__dek{
  margin-top:26px;max-width:56ch;font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.72;color:var(--mute);
}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;padding:26px 0 0}
.filters button{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  border:1px solid rgba(14,17,14,.16);padding:9px 15px;line-height:1;
  transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.filters button:hover{color:var(--ink);border-color:rgba(14,17,14,.4)}
.filters button.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ============================================================
   ARCHIVE LIST
   ============================================================ */
.archive{padding:clamp(30px,4vw,50px) 0 clamp(70px,9vw,120px)}
.archive__row{border-top:1px solid var(--line)}
.archive__row:last-child{border-bottom:1px solid var(--line)}
.archive__row>a{
  display:grid;grid-template-columns:118px 128px minmax(0,1fr) 34px;
  grid-template-rows:auto auto;
  column-gap:clamp(12px,2.4vw,34px);row-gap:9px;align-items:start;
  padding:clamp(22px,2.6vw,34px) 0;
  transition:padding-left .55s var(--ease),background .5s var(--ease);
}
.archive__date{grid-column:1;grid-row:1 / span 2}
.archive__cat{grid-column:2;grid-row:1 / span 2}
.archive h2{grid-column:3;grid-row:1}
.archive p{grid-column:3;grid-row:2}
.archive__arrow{grid-column:4;grid-row:1 / span 2}
.archive__row>a:hover{padding-left:14px;background:rgba(14,17,14,.022)}
.archive__date{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:6px}
.archive__cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding-top:6px}
.archive h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,1.85vw,1.6rem);line-height:1.26;letter-spacing:-.015em;
  transition:color .4s var(--ease);
}
.archive__row>a:hover h2{color:#7A5723}
.archive p{margin-top:9px;font-size:13.2px;line-height:1.7;color:var(--mute);max-width:62ch}
.archive__arrow{
  justify-self:end;padding-top:8px;color:var(--brass);font-size:14px;
  transition:transform .5s var(--ease);
}
.archive__row>a:hover .archive__arrow{transform:translateX(6px)}
.archive__empty{padding:60px 0;color:var(--mute);font-size:14px}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-head{padding:clamp(112px,14vh,168px) 0 clamp(34px,4vw,52px)}
.crumb{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}
.crumb a{color:var(--brass);transition:color .3s}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.45}
.article-head h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.028em;
}
.article-head__dek{
  margin-top:24px;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.68;color:var(--mute);
  max-width:54ch;
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.article-meta b{font-weight:500;color:var(--ink)}

.article-hero{margin:0}
.article-hero img{
  width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 45%;background:var(--sand);
  filter:saturate(.9) contrast(1.05);
}
.article-hero__cap{
  margin:16px 0 clamp(36px,4.6vw,56px);padding-left:14px;
  border-left:1px solid var(--brass);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  line-height:1.65;
}

/* ---------- prose ---------- */
.prose{padding-bottom:clamp(50px,7vw,90px)}
.prose p{margin-bottom:1.45em;font-size:16.5px;line-height:1.86;color:#363A32}
.prose .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.7;color:var(--ink);letter-spacing:-.008em}
.prose h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.25;letter-spacing:-.018em;
  margin:2.4em 0 .7em;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  margin:2.2em 0 .8em;
}
.prose strong{font-weight:500;color:var(--ink)}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:0 0 1.6em;padding:0}
.prose ul li,.prose ol li{
  position:relative;padding-left:24px;margin-bottom:.7em;
  font-size:15.8px;line-height:1.8;color:#363A32;
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--brass);
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;
  font-size:10px;letter-spacing:.1em;color:var(--brass);padding-top:.55em;
}
.prose blockquote{
  margin:2.4em 0;padding:4px 0 4px 26px;border-left:1px solid var(--brass);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.45;letter-spacing:-.015em;color:var(--ink);
}
.prose blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.prose figure{margin:2.4em 0}
.prose figure img{width:100%;filter:saturate(.92) contrast(1.04)}
.prose figcaption{margin-top:12px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.prose hr{border:0;height:1px;background:var(--line);margin:2.6em 0}
.prose .statline{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:2.4em 0;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.prose .statline b{
  display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;
}
.prose .statline span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.6;display:block}

/* ---------- article footer ---------- */
.article-foot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.article-foot p{font-size:11.5px;letter-spacing:.06em;color:var(--mute)}
.article-foot a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:3px}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 clamp(60px,8vw,110px);background:var(--line)}
.pager a{
  display:flex;flex-direction:column;gap:10px;padding:clamp(26px,3.4vw,42px) 0;
  background:var(--paper);transition:background .5s var(--ease);
}
.pager a:hover{background:var(--sand)}
.pager a:first-child{padding-right:30px}
.pager a:last-child{padding-left:30px;text-align:right;align-items:flex-end}
.pager span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.pager b{
  font-family:var(--serif);font-weight:400;font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.3;letter-spacing:-.012em;max-width:34ch;
}
.pager.is-one{grid-template-columns:1fr;background:transparent}
.pager.is-one a{padding-left:0;padding-right:0;background:transparent}
.pager.is-one a.is-next{text-align:right;align-items:flex-end}
.pager.is-one a.is-prev{text-align:left;align-items:flex-start}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .archive__row>a{grid-template-columns:1fr 34px;grid-template-rows:auto auto auto;gap:4px 14px}
  .archive__date{grid-column:1;grid-row:1;padding-top:0}
  .archive__cat{grid-column:1;grid-row:2;padding-top:0;font-size:9.5px}
  .archive h2{grid-column:1;grid-row:3;margin-top:8px}
  .archive p{grid-column:1;grid-row:4;margin-top:8px}
  .archive__arrow{grid-column:2;grid-row:1 / span 2;align-self:start}
  .article-hero img{aspect-ratio:4/3}
  .article-hero figcaption{margin-left:var(--pad)}
  .prose .statline{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left;align-items:flex-start;padding-left:0;border-top:1px solid var(--line)}
  .pager a:first-child{padding-right:0}
}
@media (max-width:760px){
  .prose p{font-size:15.8px;line-height:1.8}
  .article-head{padding-top:104px}
  .page-head{padding-top:104px}
}