/* ========================================================================
   Code & Insights — Editorial Blog Theme
   PaperMod overrides for magazine/editorial aesthetic
   ========================================================================= */

/* ---- Tokens (align with /tools/shared.css) ---- */
:root{
  --paper:#ffffff;
  --paper-alt:#f7f5f0;
  --ink:#0a0a0a;
  --ink-dim:#555048;
  --ink-light:#8a857c;
  --rule:#e5e2dc;
  --rule-strong:#2a2a2a;
  --accent:#1a2332;
  --accent-warm:#a84c3a;
  --serif:"Source Serif 4","Noto Serif JP",Georgia,"Times New Roman",serif;
  --sans:"Inter","Noto Sans JP",system-ui,-apple-system,sans-serif;

  /* PaperMod variable mapping */
  --theme:var(--paper);
  --entry:var(--paper);
  --primary:var(--ink);
  --secondary:var(--ink-dim);
  --tertiary:var(--rule);
  --content:var(--ink);
  --border:var(--rule);
  --hljs-bg:var(--paper-alt);
  --code-bg:var(--paper-alt);
  --code-block-bg:#1a1a1a;

  --content-gap:28px;
  --radius:0;
  --nav-width:1024px;
  --main-width:820px;
}
:root,.dark{color-scheme:light}

/* ---- Base ---- */
html{background:var(--paper)}
body{
  font-family:var(--sans) !important;
  color:var(--ink) !important;
  background:var(--paper) !important;
  line-height:1.75 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.list{background:var(--paper)}

a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-light)}
a:hover{color:var(--accent-warm);text-decoration-color:var(--accent-warm)}

/* ---- Header / Masthead ---- */
.header{position:relative;z-index:10;border-bottom:1px solid var(--rule);background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
.nav{max-width:var(--nav-width);padding:0 24px;min-height:64px}
.logo a{
  font-family:var(--serif) !important;
  font-size:22px !important;
  font-weight:600 !important;
  letter-spacing:-.015em !important;
  color:var(--ink) !important;
}
.logo-switches{display:none !important}
#menu{gap:4px}
#menu a{
  font-family:var(--sans) !important;
  font-size:11px !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.14em !important;
  color:var(--ink-dim) !important;
  padding:10px 14px !important;
  border-radius:0 !important;
  background:transparent !important;
}
#menu a:hover,#menu a.active{color:var(--ink) !important;background:transparent !important;border-bottom:1px solid var(--ink)}
#menu a .active{background:transparent !important}

/* ---- Profile Mode (homepage) ---- */
.profile{min-height:calc(100vh - 200px);padding:40px 20px}
.profile .profile_inner{max-width:var(--main-width);text-align:left;margin:0 auto}
.profile img{display:none !important}
.profile_inner h1{
  font-family:var(--serif) !important;
  font-size:clamp(40px,7vw,72px) !important;
  font-weight:500 !important;
  letter-spacing:-.03em !important;
  line-height:1.05 !important;
  margin:0 0 20px !important;
  color:var(--ink) !important;
  text-align:left !important;
}
.profile_inner h1::before{
  content:"Code & Insights";display:block;
  font-family:var(--sans);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--accent-warm);
  margin-bottom:24px;letter-spacing:.22em;
}
.profile_inner .post-description{
  font-family:var(--serif) !important;font-style:italic;
  font-size:20px !important;color:var(--ink-dim) !important;
  max-width:640px;margin:0 0 36px !important;text-align:left !important;
  line-height:1.55;
}
.buttons{justify-content:flex-start !important;gap:10px !important;margin-top:10px !important}
.button{
  padding:10px 18px !important;font-size:11px !important;font-weight:700 !important;
  text-transform:uppercase !important;letter-spacing:.12em !important;
  border:1px solid var(--ink) !important;background:transparent !important;
  color:var(--ink) !important;border-radius:0 !important;
  transition:all .15s;
}
.button:hover{background:var(--ink) !important;color:var(--paper) !important}
.button-inner{font-family:var(--sans) !important}

/* ---- Main / Layout widths ---- */
.main{max-width:var(--main-width);padding:24px 20px}
.list .main,.post-single .main{max-width:var(--main-width)}
@media (min-width:1100px){
  .main:has(.post-single.has-sidebar){max-width:1180px}
}
@media (min-width:1280px){
  .main:has(.post-single.has-sidebar){max-width:1300px}
}

/* ---- Home / Post Listings ---- */
.first-entry{
  min-height:auto !important;
  padding:50px 0 40px !important;
  border-bottom:2px solid var(--ink);
  margin-bottom:0 !important;
}
.first-entry .entry-header h1{
  font-family:var(--serif) !important;
  font-size:clamp(32px,5.5vw,52px) !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
  line-height:1.15 !important;
}
.first-entry .entry-content{
  font-family:var(--serif) !important;font-style:italic;
  font-size:18px !important;color:var(--ink-dim);line-height:1.6;
  opacity:1 !important;-webkit-line-clamp:unset !important;
}
.first-entry .entry-footer{font-size:11px !important;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-light)}

.post-entry{
  background:transparent !important;
  border:none !important;border-bottom:1px solid var(--rule) !important;
  border-radius:0 !important;box-shadow:none !important;
  padding:28px 0 !important;margin:0 !important;
  transition:background .15s;
}
.post-entry:hover{background:var(--paper-alt) !important;transform:none !important}
.post-entry:last-of-type{border-bottom:1.5px solid var(--ink) !important}
.post-entry .entry-header{margin:0 0 8px}
.post-entry .entry-header h2{
  font-family:var(--serif) !important;
  font-size:22px !important;font-weight:500 !important;
  letter-spacing:-.015em !important;line-height:1.3 !important;
  color:var(--ink) !important;
}
.post-entry:hover .entry-header h2{color:var(--accent-warm) !important}
.post-entry .entry-content{
  font-family:var(--serif) !important;font-style:italic;
  font-size:15px !important;color:var(--ink-dim) !important;
  line-height:1.65 !important;margin:6px 0 10px !important;
  opacity:1 !important;
}
.post-entry .entry-footer{
  font-family:var(--sans) !important;
  font-size:10.5px !important;color:var(--ink-light) !important;
  text-transform:uppercase !important;letter-spacing:.14em !important;
  font-weight:600 !important;
}
.post-entry .entry-footer svg{display:none}

/* Archives / Terms pages */
.archive-posts{padding-top:20px}
.archive-year,.archive-month{color:var(--ink) !important;border-color:var(--rule) !important}
.archive-year-header,.archive-month-header{font-family:var(--serif) !important;font-weight:500}
.terms-tags a{
  background:transparent !important;border:1px solid var(--rule-strong) !important;
  border-radius:0 !important;padding:8px 14px !important;
  font-family:var(--sans) !important;font-size:11px !important;
  text-transform:uppercase !important;letter-spacing:.12em !important;
  font-weight:600 !important;
}
.terms-tags a:hover{background:var(--ink) !important;color:var(--paper) !important}

/* ---- Post Single (article page) ---- */
.post-header,.page-header{
  padding:60px 0 36px !important;
  margin:0 0 44px !important;
  border-bottom:1px solid var(--rule);
}
.post-title,.page-header h1{
  font-family:var(--serif) !important;
  font-size:clamp(30px,5vw,48px) !important;
  font-weight:500 !important;
  letter-spacing:-.025em !important;
  line-height:1.18 !important;
  color:var(--ink) !important;
  margin-bottom:16px !important;
}
.post-description{
  font-family:var(--serif) !important;font-style:italic;
  font-size:18px !important;color:var(--ink-dim) !important;
  line-height:1.6;margin-top:14px !important;
}
.post-meta,.breadcrumbs{
  font-family:var(--sans) !important;
  font-size:11px !important;color:var(--ink-light) !important;
  text-transform:uppercase !important;letter-spacing:.16em !important;
  font-weight:600 !important;
}
.breadcrumbs{margin-bottom:24px !important}
.breadcrumbs a{font-size:11px !important;color:var(--ink-light) !important;text-decoration:none}
.breadcrumbs a:hover{color:var(--ink) !important}

/* Article body */
.post-content{
  font-family:var(--sans) !important;
  font-size:16.5px !important;
  line-height:1.85 !important;
  color:var(--ink) !important;
  margin:0 0 40px !important;
}
.post-content h1,.post-content h2,.post-content h3{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  letter-spacing:-.015em !important;
  color:var(--ink) !important;
}
.post-content h2{
  font-size:28px !important;
  margin:52px 0 20px !important;
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.post-content h3{
  font-size:22px !important;
  margin:36px 0 14px !important;
}
.post-content h4{
  font-family:var(--sans) !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.12em !important;
  color:var(--ink-dim) !important;
  margin:24px 0 10px !important;
}
.post-content p{margin:0 0 18px}
.post-content blockquote{
  border:none !important;border-left:2px solid var(--ink) !important;
  background:transparent !important;padding:4px 0 4px 20px !important;
  margin:28px 0 !important;font-family:var(--serif);font-style:italic;
  font-size:17px;color:var(--ink-dim);line-height:1.7;
}
.post-content a{color:var(--accent-warm) !important;text-decoration-color:var(--accent-warm) !important}
.post-content strong{font-weight:700;color:var(--ink)}
.post-content ul,.post-content ol{margin:16px 0 18px 24px}
.post-content li{margin-bottom:6px}
.post-content hr{border:none;border-top:1px solid var(--rule);margin:40px 0}
.post-content img{border-radius:0 !important}
.post-content table{
  border-collapse:collapse;margin:20px 0;font-size:14px;
  font-family:var(--sans);
}
.post-content table th{
  background:transparent;color:var(--ink);font-weight:700;
  text-transform:uppercase;font-size:11px;letter-spacing:.12em;
  border-bottom:1.5px solid var(--ink) !important;
  padding:10px 12px 10px 0;text-align:left;
}
.post-content table td{
  border-bottom:1px solid var(--rule) !important;
  padding:10px 12px 10px 0;
}
.post-content code{
  background:var(--paper-alt) !important;
  color:var(--ink) !important;
  font-family:"JetBrains Mono","SF Mono","Menlo",monospace !important;
  font-size:.88em !important;padding:2px 6px !important;border-radius:2px !important;
}
.post-content pre{
  background:#1a1a1a !important;
  border-radius:0 !important;
  border:none !important;
  padding:20px 22px !important;margin:24px 0 !important;
}
.post-content pre code{
  background:transparent !important;color:#e8e6e0 !important;
  font-size:13.5px !important;padding:0 !important;
}
.highlight{background:#1a1a1a !important;border-radius:0 !important;margin:24px 0}

/* ---- TOC (inline / mobile default) ---- */
.toc{
  background:var(--paper-alt) !important;
  border:none !important;border-top:1.5px solid var(--ink) !important;
  border-bottom:1.5px solid var(--ink) !important;
  border-radius:0 !important;margin:36px 0 !important;padding:24px 28px !important;
}
.toc details summary{
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink);
}
.toc .inner{color:var(--ink-dim);font-family:var(--serif)}
.toc ul{padding-left:18px !important;margin-top:10px}
.toc a{color:var(--ink-dim);font-size:14px;line-height:1.65}
.toc a:hover{color:var(--accent-warm)}

/* ---- 2-Column Layout (PC: sticky TOC left, content right) ---- */
.post-layout{display:block}
@media (min-width:1100px){
  .post-single.has-sidebar{max-width:1140px;margin:0 auto}
  .post-single.has-sidebar .post-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:56px;
    align-items:start;
  }
  .post-sidebar{
    position:sticky;top:80px;
    align-self:start;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    padding-right:8px;
  }
  .post-sidebar::-webkit-scrollbar{width:4px}
  .post-sidebar::-webkit-scrollbar-thumb{background:var(--rule);border-radius:0}
  .post-sidebar-inner .toc{
    background:transparent !important;
    border:none !important;border-top:none !important;border-bottom:none !important;
    padding:0 !important;margin:0 !important;
  }
  .post-sidebar-inner .toc details{display:block}
  .post-sidebar-inner .toc details summary{
    list-style:none;cursor:default;
    font-family:var(--sans);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.22em;color:var(--ink);
    padding:0 0 14px;margin-bottom:14px;
    border-bottom:1px solid var(--rule);
  }
  .post-sidebar-inner .toc details summary::-webkit-details-marker{display:none}
  .post-sidebar-inner .toc details summary::marker{display:none}
  .post-sidebar-inner .toc details summary .details::after{content:""}
  .post-sidebar-inner .toc .inner,
  .post-sidebar-inner .toc details:not([open]) .inner{display:block !important}
  .post-sidebar-inner .toc ul{
    padding-left:0 !important;margin:0 !important;list-style:none;
  }
  .post-sidebar-inner .toc ul ul{padding-left:14px !important;margin-top:4px !important}
  .post-sidebar-inner .toc li{margin-bottom:6px;position:relative}
  .post-sidebar-inner .toc a{
    display:block;font-family:var(--sans);font-size:13px;
    color:var(--ink-dim);padding:4px 0 4px 10px;
    border-left:2px solid transparent;line-height:1.45;
    transition:all .12s;text-decoration:none;
  }
  .post-sidebar-inner .toc a:hover{color:var(--ink);border-left-color:var(--ink-dim)}
  .post-sidebar-inner .toc a.active{color:var(--accent-warm);border-left-color:var(--accent-warm);font-weight:500}
  .post-main{min-width:0;max-width:820px}
}
@media (min-width:1280px){
  .post-single.has-sidebar{max-width:1240px}
  .post-single.has-sidebar .post-layout{grid-template-columns:260px 1fr;gap:72px}
}

/* ---- Share Buttons / Footer on article ---- */
.share-buttons{margin:40px 0}
.share-buttons a{background:transparent !important;border:1px solid var(--rule-strong) !important;padding:8px 12px !important;border-radius:0 !important;color:var(--ink) !important;transition:all .15s}
.share-buttons a:hover{background:var(--ink) !important;color:var(--paper) !important;border-color:var(--ink) !important}

.post-footer{border-top:1px solid var(--rule);padding-top:32px;margin-top:40px}
.post-tags a{
  background:transparent !important;border:1px solid var(--rule-strong) !important;
  border-radius:0 !important;padding:5px 12px !important;
  font-family:var(--sans) !important;font-size:10.5px !important;
  text-transform:uppercase !important;letter-spacing:.12em !important;
  font-weight:600 !important;color:var(--ink) !important;
}
.post-tags a:hover{background:var(--ink) !important;color:var(--paper) !important}

.paginav{border:none !important;background:transparent !important;border-radius:0 !important;border-top:1px solid var(--rule) !important;border-bottom:1px solid var(--rule) !important;padding:20px 0 !important;margin:40px 0 !important}
.paginav a{font-family:var(--serif) !important;color:var(--ink) !important;border-radius:0 !important}
.paginav .title{font-family:var(--sans) !important;font-size:10px !important;text-transform:uppercase !important;letter-spacing:.18em !important;color:var(--ink-light) !important}

/* ---- Footer ---- */
.footer{
  background:transparent !important;border-top:1px solid var(--rule) !important;
  padding:36px 20px !important;margin-top:60px;
  color:var(--ink-light) !important;font-size:11px !important;
  text-align:center;text-transform:uppercase;letter-spacing:.14em;
}
.footer a{color:var(--ink-light) !important}
.footer a:hover{color:var(--ink) !important}
.top-link{
  background:var(--ink) !important;color:var(--paper) !important;
  border-radius:0 !important;border:1px solid var(--ink) !important;
}

/* ---- Search ---- */
#searchbox input{
  background:transparent !important;border:none !important;
  border-bottom:2px solid var(--ink) !important;border-radius:0 !important;
  font-family:var(--serif);font-size:20px;padding:12px 0;
}
#searchResults li{
  background:transparent !important;border:none !important;
  border-bottom:1px solid var(--rule) !important;border-radius:0 !important;
  padding:20px 0 !important;
}
#searchResults li.active{background:var(--paper-alt) !important}

/* ---- Pagination ---- */
.pagination{margin:40px 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pagination a{font-family:var(--sans) !important;font-size:11px !important;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--ink) !important;background:transparent !important;border:1px solid var(--rule-strong) !important;border-radius:0 !important;padding:8px 16px !important}
.pagination a:hover{background:var(--ink) !important;color:var(--paper) !important}

/* ---- Mermaid diagrams ---- */
.post-content .mermaid{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:24px 0;
  padding:8px 0;
}
.post-content .mermaid svg{
  min-width:680px;
  max-width:none !important;
  height:auto;
}
@media (max-width:680px){
  .post-content .mermaid{
    margin-left:-16px;
    margin-right:-16px;
    padding:8px 16px;
  }
  .post-content .mermaid svg{min-width:600px}
}

/* ---- Affiliate card (editorial sidenote style) ---- */
.affiliate-card{
  display:flex;gap:24px;align-items:flex-start;
  margin:44px 0;padding:22px 0 22px 20px;
  border-left:2px solid var(--accent-warm, #b8502d);
  font-family:var(--serif, Georgia, serif);
}
.affiliate-card__image{flex:0 0 140px;max-width:140px}
.affiliate-card__image img{width:100%;height:auto;display:block;border:1px solid var(--rule, #e0dcd4)}
.affiliate-card__body{flex:1;min-width:0}
.affiliate-card__label{
  font-family:var(--sans, -apple-system, sans-serif);
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-warm, #b8502d);margin-bottom:12px;
}
.affiliate-card__title{
  font-family:var(--serif, Georgia, serif);
  font-size:18px;font-weight:500;line-height:1.4;
  color:var(--ink, #1a1a1a);margin:0 0 10px;letter-spacing:-.01em;
}
.affiliate-card__desc{
  font-size:14.5px;line-height:1.75;color:var(--ink-dim, #555);
  margin:0 0 14px;font-style:italic;
}
.affiliate-card__link{
  font-family:var(--sans, -apple-system, sans-serif);
  font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--accent-warm, #b8502d) !important;text-decoration:none !important;
  border-bottom:1px solid var(--accent-warm, #b8502d);padding-bottom:2px;
}
.affiliate-card__link:hover{color:var(--ink, #1a1a1a) !important;border-bottom-color:var(--ink, #1a1a1a)}
@media (max-width:640px){
  .affiliate-card{flex-direction:column;gap:16px}
  .affiliate-card__image{flex:initial;max-width:160px}
}

/* ---- Mobile ---- */
@media (max-width:680px){
  .profile_inner h1{font-size:40px !important}
  .profile_inner .post-description{font-size:17px !important}
  .first-entry .entry-header h1{font-size:30px !important}
  .post-title{font-size:30px !important}
  .post-content{font-size:16px !important}
  .post-content h2{font-size:24px !important}
  .post-content h3{font-size:19px !important}
  #menu a{padding:8px 10px !important;font-size:10px !important}
  .nav{padding:0 16px}
}