/* Full Japanese glyph coverage for new CMS posts; existing local subsets remain primary. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400&display=swap');
#af-portfolio { --af-jp:"Atelier Noto Sans JP","Noto Sans JP",sans-serif; --af-jp-serif:"Atelier Noto Serif JP","Noto Serif JP","Yu Mincho",serif; }
.cms-page #af-portfolio { min-height:100vh; display:flex; flex-direction:column; }
#af-portfolio .cms-header { margin-bottom:24px; }
#af-portfolio .cms-header-row { display:flex; align-items:center; justify-content:space-between; }
#af-portfolio .cms-contact-arrow { display:none; }
#af-portfolio .cms-main { display:flex; flex-direction:column; gap:32px; padding-top:64px; padding-bottom:64px; margin-bottom:24px; flex:1; }
#af-portfolio h1.cms-index-title { font:400 104px/1.1 var(--af-serif); letter-spacing:0; color:var(--af-ink); }
#af-portfolio .cms-summary { font:400 16px/1.9 var(--af-jp); color:var(--af-muted); overflow-wrap:anywhere; }
#af-portfolio .cms-list { display:grid; gap:32px; }
#af-portfolio .cms-list-podcast { grid-template-columns:repeat(2,minmax(0,1fr)); }
#af-portfolio .cms-card { display:flex; flex-direction:column; gap:16px; min-width:0; }
#af-portfolio .cms-card h2 { font:400 30px/1.5 var(--af-jp-serif); overflow-wrap:anywhere; }
#af-portfolio .cms-card a:hover { text-decoration:underline; text-underline-offset:5px; }
#af-portfolio .cms-date { font:400 14px/1.7 var(--af-jp); color:var(--af-muted); }
#af-portfolio .cms-cover { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#fff; }
#af-portfolio .cms-read,#af-portfolio .cms-back { font:400 14px/1.5 var(--af-sans); }
#af-portfolio h1.cms-detail-title { font:400 48px/1.5 var(--af-jp-serif); letter-spacing:0; color:var(--af-ink); overflow-wrap:anywhere; }
#af-portfolio .cms-player { width:100%; aspect-ratio:16/9; background:var(--af-surface); }
#af-portfolio .cms-player iframe { display:block; width:100%; height:100%; border:0; }
#af-portfolio .cms-body { font:400 16px/1.9 var(--af-jp); color:var(--af-muted); overflow-wrap:anywhere; }
#af-portfolio .cms-body p + p { margin-top:1.9em; }
#af-portfolio .cms-body :where(h2,h3,h4,h5,h6) { font-family:var(--af-jp-serif); color:var(--af-ink); margin:1.8em 0 .8em; line-height:1.6; }
#af-portfolio .cms-body h2 { font-size:28px; }
#af-portfolio .cms-body h3 { font-size:22px; }
#af-portfolio .cms-body a { text-decoration:underline; text-underline-offset:4px; color:var(--af-ink); }
#af-portfolio .cms-body :where(ul,ol) { padding-left:1.6em; margin:1.2em 0; }
#af-portfolio .cms-body img { max-width:100%; height:auto; margin:24px 0; }
#af-portfolio .cms-body blockquote { margin:24px 0; padding:12px 24px; border-left:2px solid var(--af-line); }
#af-portfolio .cms-body pre { padding:20px; overflow:auto; background:var(--af-surface); }
#af-portfolio .cms-body table { display:block; overflow:auto; border-collapse:collapse; max-width:100%; }
#af-portfolio .cms-body :where(th,td) { padding:12px; border:1px solid var(--af-line); }
#af-portfolio .cms-empty { color:var(--af-muted); padding:32px 0; grid-column:1/-1; }
#af-portfolio .cms-pagination { display:flex; align-items:center; justify-content:center; gap:32px; margin-top:24px; }
#af-portfolio .af-nav [aria-current="page"] { text-decoration:underline; text-underline-offset:5px; }
.cms-demo { padding:10px 24px; color:#24558c; background:#e6eef8; font:12px/1.7 sans-serif; text-align:center; }
#af-portfolio .cms-log-tools { display:flex; flex-direction:column; gap:16px; }
#af-portfolio .cms-search { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; }
#af-portfolio .cms-search-field { display:flex; flex-direction:column; gap:8px; min-width:0; flex:1 1 220px; }
#af-portfolio .cms-search label,#af-portfolio .cms-results { font:400 13px/1.7 var(--af-jp); color:var(--af-muted); }
#af-portfolio .cms-search :where(input,select,button) { font:400 16px/1.5 var(--af-jp); padding:13px 16px; border:1px solid var(--af-line); border-radius:3px; color:var(--af-ink); background:transparent; min-height:50px; width:100%; }
#af-portfolio .cms-search button { width:auto; cursor:pointer; background:var(--af-ink); color:white; }
#af-portfolio .cms-search :where(input,select,button):focus-visible,#af-portfolio .cms-tag:focus-visible { outline:2px solid var(--af-ink); outline-offset:4px; }
#af-portfolio .cms-results a { margin-left:16px; text-decoration:underline; text-underline-offset:4px; }
#af-portfolio .cms-tags { display:flex; flex-wrap:wrap; gap:8px; }
#af-portfolio a.cms-tag { font:400 12px/1.6 var(--af-jp); padding:6px 12px; border:1px solid var(--af-line); border-radius:20px; color:var(--af-muted); overflow-wrap:anywhere; }
#af-portfolio .cms-media { margin:24px 0; }
#af-portfolio .cms-media figcaption { font-size:13px; margin-top:10px; }
#af-portfolio a.cms-link-card { display:flex; justify-content:space-between; gap:20px; border:1px solid var(--af-line); border-radius:4px; padding:20px; margin:24px 0; text-decoration:none; color:var(--af-ink); overflow:hidden; }
#af-portfolio .cms-link-card:hover { background:var(--af-surface); }
#af-portfolio .cms-link-copy { display:flex; flex-direction:column; gap:8px; min-width:0; }
#af-portfolio .cms-link-copy strong { font:500 16px/1.6 var(--af-jp); }
#af-portfolio .cms-link-description { font-size:13px; color:var(--af-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#af-portfolio .cms-link-host { font-size:12px; color:var(--af-muted); }
#af-portfolio .cms-link-card img { width:140px; max-width:30%; height:100px; object-fit:cover; margin:0; flex-shrink:0; }
@media(max-width:760px) {
  #af-portfolio .cms-search-field { flex-basis:100%; }
  #af-portfolio .cms-search button { width:100%; }
  #af-portfolio a.cms-link-card { padding:16px; gap:12px; }
  #af-portfolio .cms-header { align-items:stretch; flex-direction:column; gap:16px; padding-top:22px; padding-bottom:22px; }
  #af-portfolio .cms-header-row { min-height:24px; }
  #af-portfolio .cms-contact-arrow { display:block; font:400 26px/1 var(--af-sans); }
  #af-portfolio .cms-header .af-nav { display:flex; width:100%; justify-content:space-between; gap:24px; min-height:100px; align-items:flex-start; }
  #af-portfolio .cms-contact-link { display:none; }
  #af-portfolio .cms-main { padding-top:32px; }
  #af-portfolio h1.cms-index-title { font-size:64px; }
  #af-portfolio h1.cms-detail-title { font-size:32px; }
  #af-portfolio .cms-list-podcast { grid-template-columns:1fr; }
  #af-portfolio .cms-card h2 { font-size:24px; }
  #af-portfolio .cms-body h2 { font-size:24px; }
  /* Keep both posting sections reachable on mobile home. */
  #af-portfolio .af-header:not(.cms-header) { flex-wrap:wrap; }
  #af-portfolio .af-header:not(.cms-header) .af-nav { display:flex; order:3; width:100%; justify-content:space-between; gap:12px; font-size:12px; }
}