/*
Theme Name: Kiritaru Child
Template: cocoon-master
Description: キリタルブログ用のCocoon子テーマ。羊毛・エディトリアル風カスタマイズ。
Version: 1.0.0
Author: Kiritaru
*/

/* ===============================================
   Google Fonts
   =============================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===============================================
   Design Tokens
   =============================================== */
:root{
  --k-bg:       #f3ede1;  /* raw wool */
  --k-paper:    #faf6ee;
  --k-ink:      #1f1b16;
  --k-ink-2:    #3b342c;
  --k-mute:     #7a6f60;
  --k-line:     #d9cfbd;
  --k-accent:   #5d6b3b;  /* pasture green */
  --k-accent-2: #3a462a;
  --k-warm:     #b4683a;  /* ochre */
  --k-cream:    #ede3cf;
  --k-serif:    'Noto Serif JP', Georgia, serif;
  --k-sans:     'Noto Sans JP', system-ui, sans-serif;
  --k-mono:     'JetBrains Mono', ui-monospace, monospace;
}

/* ===============================================
   Base
   =============================================== */
body,
body.cocoon{
  background: var(--k-bg) !important;
  color: var(--k-ink) !important;
  font-family: var(--k-sans) !important;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
}

a{ color: var(--k-accent-2); }
a:hover{ color: var(--k-accent); }

/* ===============================================
   Header / Brand
   =============================================== */
#header-container,
.header-container{
  background: var(--k-paper) !important;
  border-bottom: 1px solid var(--k-line);
  box-shadow: none !important;
}
#header .site-name-text,
.site-name-text a{
  font-family: var(--k-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  color: var(--k-ink) !important;
}
.tagline,
.tagline-wrap{
  font-family: var(--k-mono) !important;
  font-size: 11px !important;
  letter-spacing: .18em;
  color: var(--k-mute) !important;
  text-transform: uppercase;
}

/* Global nav */
#navi,
.navi{
  background: var(--k-paper) !important;
  border-top: 1px solid var(--k-line);
  border-bottom: 1px solid var(--k-line);
}
#navi .menu-header li a,
.navi .menu-header li a{
  color: var(--k-ink-2) !important;
  font-size: 13px !important;
  letter-spacing: .04em;
  font-weight: 500;
}
#navi .menu-header li a:hover,
.navi .menu-header li a:hover{
  background: transparent !important;
  color: var(--k-accent) !important;
}

/* ===============================================
   Main content area
   =============================================== */
#main,
.main{
  background: transparent !important;
  box-shadow: none !important;
  padding: clamp(20px,3vw,40px) !important;
}

.entry-title,
.article h1,
.article h2,
.article h3{
  font-family: var(--k-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .015em;
  color: var(--k-ink) !important;
}
.entry-title{ font-size: clamp(26px, 3vw, 40px) !important; line-height: 1.35; }

.article h2{
  border: none !important;
  border-bottom: 1px solid var(--k-line) !important;
  padding: 0 0 10px !important;
  margin: 48px 0 24px !important;
  font-size: 24px !important;
}
.article h3{
  border-left: 3px solid var(--k-accent) !important;
  background: transparent !important;
  padding: 2px 0 2px 14px !important;
  font-size: 20px !important;
  margin: 32px 0 16px !important;
}
.article p{
  font-size: 15.5px;
  color: var(--k-ink-2);
}

/* ===============================================
   Entry Card List (homepage / archive)
   =============================================== */
#list,
.list{ background: transparent !important; }

.entry-card,
.a-wrap,
.entry-card-wrap{
  background: var(--k-paper) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 28px !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.entry-card:hover,
.a-wrap:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.18) !important;
}

.entry-card-thumb img,
.card-thumb img{
  border-radius: 0 !important;
  filter: saturate(.95) contrast(1.02);
}

.entry-card-title,
.card-title,
.e-card-title{
  font-family: var(--k-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: var(--k-ink) !important;
  letter-spacing: .015em;
}
.entry-card-snippet{
  color: var(--k-ink-2) !important;
  font-size: 13px !important;
  line-height: 1.8;
}

.cat-label,
.category-label,
.entry-card-category{
  background: var(--k-accent) !important;
  color: var(--k-paper) !important;
  font-family: var(--k-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .12em !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
}

.post-date,
.entry-card-post-date,
.post-update{
  font-family: var(--k-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  color: var(--k-mute) !important;
}

/* ===============================================
   Sidebar
   =============================================== */
#sidebar,
.sidebar{
  background: transparent !important;
}
.sidebar h3,
.widget-sidebar h3,
.sidebar-bottom h3{
  font-family: var(--k-serif) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none !important;
  border-bottom: 1px solid var(--k-line) !important;
  background: transparent !important;
  padding: 0 0 10px !important;
  color: var(--k-ink) !important;
}
.sidebar .widget,
.widget-sidebar{
  background: var(--k-paper) !important;
  border: 1px solid var(--k-line);
  padding: 22px !important;
  margin-bottom: 28px !important;
  box-shadow: none !important;
}
.sidebar ul li{
  border-bottom: 1px dotted var(--k-line) !important;
  padding: 8px 0 !important;
  font-size: 13px;
}
.sidebar ul li a{
  color: var(--k-ink-2) !important;
  transition: padding .2s ease;
}
.sidebar ul li a:hover{
  color: var(--k-accent) !important;
  padding-left: 6px;
}

/* Author widget */
.author-box,
.profile-widget{
  text-align: center;
  background: var(--k-paper) !important;
  border: 1px solid var(--k-line) !important;
  padding: 28px 22px !important;
}
.author-box .avatar,
.profile-widget .avatar{
  border: 2px solid var(--k-cream) !important;
  border-radius: 50% !important;
}
.author-box h4,
.profile-widget .author-name{
  font-family: var(--k-serif) !important;
  font-size: 17px !important;
  margin: 8px 0 4px !important;
}
.author-box p,
.profile-widget p{
  font-size: 12.5px !important;
  color: var(--k-ink-2) !important;
  text-align: left;
  line-height: 1.9;
}

/* ===============================================
   Search box
   =============================================== */
.search-box,
.widget_search input[type="search"]{
  background: var(--k-bg) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 999px !important;
  font-family: var(--k-sans) !important;
  padding: 8px 16px !important;
}

/* ===============================================
   Breadcrumb
   =============================================== */
#breadcrumb,
.breadcrumb{
  background: transparent !important;
  border: none !important;
  font-family: var(--k-mono) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
  color: var(--k-mute) !important;
  padding: 14px 0 !important;
}
.breadcrumb a{ color: var(--k-mute) !important; }
.breadcrumb a:hover{ color: var(--k-accent) !important; }

/* ===============================================
   Pagination
   =============================================== */
.pagination a,
.pagination .current,
.pagination-next-link{
  background: var(--k-paper) !important;
  border: 1px solid var(--k-line) !important;
  color: var(--k-ink-2) !important;
  border-radius: 0 !important;
  font-family: var(--k-mono) !important;
  font-size: 12px !important;
  letter-spacing: .05em;
  padding: 10px 16px !important;
}
.pagination .current{
  background: var(--k-ink) !important;
  color: var(--k-paper) !important;
  border-color: var(--k-ink) !important;
}
.pagination a:hover{
  background: var(--k-accent) !important;
  color: var(--k-paper) !important;
  border-color: var(--k-accent) !important;
}

/* ===============================================
   Related / Comments
   =============================================== */
.related-entry-card-wrap{
  background: var(--k-paper) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 0 !important;
}
.related-entry-card-title{
  font-family: var(--k-serif) !important;
  font-weight: 600 !important;
}

/* ===============================================
   Footer
   =============================================== */
#footer,
.footer{
  background: var(--k-paper) !important;
  border-top: 1px solid var(--k-line);
  color: var(--k-ink-2) !important;
}
.footer-bottom,
.copyright{
  font-family: var(--k-mono) !important;
  font-size: 11px !important;
  letter-spacing: .1em;
  color: var(--k-mute) !important;
}

/* ===============================================
   Buttons / CTAs
   =============================================== */
.btn,
.wp-block-button__link,
input[type="submit"]{
  background: var(--k-ink) !important;
  color: var(--k-paper) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--k-sans) !important;
  letter-spacing: .08em;
  padding: 12px 24px !important;
  font-weight: 500;
}
.btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover{
  background: var(--k-accent) !important;
}

/* ===============================================
   Blockquote
   =============================================== */
blockquote,
.blogcard-wrap{
  background: var(--k-cream) !important;
  border-left: 3px solid var(--k-accent) !important;
  font-family: var(--k-serif) !important;
  font-style: italic;
  padding: 20px 24px !important;
  color: var(--k-ink-2) !important;
  border-radius: 0 !important;
}

/* ===============================================
   Highlights / Accents
   =============================================== */
::selection{ background: var(--k-accent); color: var(--k-paper); }
hr{ border: none; border-top: 1px solid var(--k-line); }

/* ===============================================
   Responsive tweaks
   =============================================== */
@media screen and (max-width: 834px){
  .entry-card-title{ font-size: 16px !important; }
  .entry-title{ font-size: 24px !important; }
}