/*
Theme Name: FOND/SOUND
Theme URI: https://www.fondsound.com/
Author: FOND/SOUND
Author URI: https://www.fondsound.com/
Description: A MUJI-inspired, woodblock-flavored theme for FOND/SOUND — a music & blog listening diary. Warm paper ground, ink type, a single hanko-red accent, Japanese titles set in a mincho serif, and a subtle woodblock paper grain. Classic PHP theme with a Grid / Editorial home feed toggle and tag browsing.
Version: 1.1
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fondsound
*/

:root{
  --bg:#f5f3ef;
  --ink:#1c1a17;
  --soft:#4a4238;
  --muted:#6f675d;
  --faint:#8a8172;
  --fade:#a89f8d;
  --line:#cfc8ba;
  --line2:#ddd6c8;
  --paper2:#efece4;
  --accent:#a8432e;
  --mincho:"Zen Old Mincho", serif;
  --top-font:"Zen Old Mincho", serif;
  --grain-body:0.04;
  --grain-cover:0.07;
  --sans:"Zen Kaku Gothic New", system-ui, sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
  opacity:var(--grain-body);
  mix-blend-mode:multiply;
}
img{max-width:100%;display:block;}
a{color:var(--ink);text-decoration:none;transition:color .15s;}
a:hover{color:var(--accent);}
::selection{background:var(--accent);color:var(--bg);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.container{max-width:1180px;margin:0 auto;padding-left:40px;padding-right:40px;}

/* ---------- header ---------- */
.site-header{padding-top:26px;}
.header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:16px;color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand-mark{width:44px;height:44px;flex:none;border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--top-font);font-size:22px;font-weight:700;transform:rotate(-3deg);}
.brand-mark.small{width:34px;height:34px;font-size:16px;}
.brand-name{display:block;font-family:var(--top-font);font-weight:700;font-size:27px;letter-spacing:.06em;line-height:1;}
.brand-tag{display:block;font-size:10px;letter-spacing:.42em;color:var(--faint);margin-top:7px;}

.main-nav{padding-top:10px;}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px;}
.nav-list a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;}
.nav-list .btn-donate,.btn-donate{font-size:11px;letter-spacing:.16em;text-transform:uppercase;border:1.5px solid var(--accent);color:var(--accent);padding:7px 14px;}
.btn-donate:hover{background:var(--accent);color:var(--bg);}

.header-sub{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;}
.header-tools{display:flex;align-items:center;gap:16px;}
.theme-toggle{cursor:pointer;font-family:inherit;background:transparent;border:1.5px solid var(--line);color:var(--muted);width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
.theme-toggle .tt-day{display:none;}
body.fs-dark .theme-toggle .tt-night{display:none;}
body.fs-dark .theme-toggle .tt-day{display:inline;}
.subnav{display:flex;align-items:center;gap:20px;}
.subnav-link{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px;border-bottom:2px solid transparent;}
.subnav-link.is-active{border-bottom-color:var(--ink);}
.search-box{display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--line);padding-bottom:5px;width:220px;}
.search-box svg{flex:none;}
.search-box input{border:none;background:transparent;outline:none;font-family:inherit;font-size:12px;letter-spacing:.04em;color:var(--ink);width:100%;}
.rule2{height:2px;background:var(--ink);}
.rule1{height:1px;background:var(--ink);margin-top:3px;}
.site-header .rule2{margin-top:14px;}
.rule-thin{height:1px;background:var(--line);margin:20px 0;}

/* ---------- cover / grain ---------- */
.cover{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border:1.5px solid rgba(28,26,23,.5);background:#e7e3da;}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cover-grain{position:absolute;inset:0;background-image:var(--grain);background-size:120px;opacity:var(--grain-cover);mix-blend-mode:multiply;pointer-events:none;}
.cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-size:88px;color:#b8b2a6;}

/* ---------- featured ---------- */
.featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:52px;padding:46px 0 44px;align-items:center;}
.cover-wrap{position:relative;}
.stamp{position:absolute;top:-14px;right:-14px;z-index:2;width:66px;height:66px;border:2px solid var(--accent);color:var(--accent);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-6deg);font-family:var(--mincho);}
.stamp-new{font-size:9px;letter-spacing:.2em;}
.stamp-jp{font-size:20px;font-weight:700;line-height:1;}
.stamp-featured{border-color:var(--ink);color:var(--ink);}
.kicker{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);}
.featured-body .kicker{margin-bottom:22px;}
.featured-title{display:block;font-family:var(--mincho);font-size:40px;font-weight:700;line-height:1.14;color:var(--ink);}
.featured-title:hover{color:var(--accent);}
.meta-row{display:flex;align-items:center;gap:18px;margin-top:18px;}
.meta-row .date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.meta-row .read{font-size:11px;letter-spacing:.05em;color:var(--accent);}
.byline{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
.byline a{color:var(--faint);}
.byline a:hover{color:var(--accent);}
.post-head .byline{color:var(--muted);}
.post-head .byline a{color:var(--muted);}
.post-head .byline a:hover{color:var(--accent);}

/* ---------- feed head + toggle ---------- */
.feed-head{display:flex;align-items:baseline;justify-content:space-between;padding:26px 0 22px;}
.feed-title{font-family:var(--mincho);font-size:22px;font-weight:600;margin:0;}
.feed-title-jp{color:var(--faint);font-size:14px;font-weight:400;}
.view-toggle{display:flex;align-items:center;gap:14px;}
.view-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);}
.toggle{display:flex;border:1.5px solid var(--ink);}
.toggle-btn{cursor:pointer;font-family:inherit;border:none;background:transparent;color:var(--ink);padding:7px 15px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.toggle-btn+.toggle-btn{border-left:1.5px solid var(--ink);}
.toggle-btn.is-active{background:var(--ink);color:var(--bg);}

/* ---------- cards ---------- */
.card-type{position:absolute;top:10px;left:10px;z-index:1;font-size:9px;letter-spacing:.16em;text-transform:uppercase;background:rgba(28,26,23,.78);color:var(--bg);padding:3px 7px;}
.card-title{display:block;font-family:var(--mincho);font-weight:600;line-height:1.3;color:var(--ink);}
.card-title:hover{color:var(--accent);}
.card-metatop{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.card-excerpt{font-size:13px;color:var(--muted);line-height:1.6;}
.card-date{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fade);}

/* grid mode */
.feed.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 34px;}
.feed.is-grid .card-metatop{display:none;}
.feed.is-grid .card-excerpt{display:none;}
.feed.is-grid .card-title{font-size:19px;margin-top:14px;}
.feed.is-grid .card-date{margin-top:8px;}

/* editorial mode */
.feed.is-editorial .card{display:grid;grid-template-columns:230px minmax(0,1fr);gap:44px;padding:34px 0;border-bottom:1px solid var(--line2);align-items:center;}
.feed.is-editorial .card-date{display:none;}
.feed.is-editorial .card-metatop{margin-bottom:14px;}
.feed.is-editorial .card-title{font-size:30px;font-weight:700;}
.feed.is-editorial .card-excerpt{margin-top:14px;}
.card:hover .cover-img{opacity:.92;}

/* ---------- pagination ---------- */
.pagination,.nav-links{margin-top:52px;}
.nav-links{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.page-numbers{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-size:13px;color:var(--ink);}
.page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.page-numbers.dots{border:none;}
.page-numbers.prev,.page-numbers.next{width:auto;padding:0 14px;letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:var(--accent);border:none;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* ---------- single ---------- */
.single,.page,.archive,.search-results{padding-bottom:80px;}
.back-link{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:34px 0 30px;}
.post-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.post-head .kicker{color:var(--accent);}
.post-head .date{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fade);}
.dot-sep{width:24px;height:1px;background:var(--line);}
.post-title{font-family:var(--mincho);font-size:48px;font-weight:700;line-height:1.14;margin:0 0 6px;}
.single .container,.page .container{max-width:900px;}
.rule-post{margin:30px 0 34px;}
.post-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:start;}
.post-cover{aspect-ratio:1/1;}
.post-content{font-size:16px;line-height:1.95;color:var(--soft);letter-spacing:.01em;}
.post-content p{margin:0 0 22px;}
.post-content h2,.post-content h3{font-family:var(--mincho);color:var(--ink);line-height:1.3;}
.post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.post-content img,.post-content iframe,.post-content .wp-block-embed{width:100%;margin:20px 0;border:1.5px solid rgba(28,26,23,.4);}
.post-content iframe{border:none;}
.post-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;}
.tag-chip{font-size:11px;letter-spacing:.1em;border:1px solid var(--line);padding:6px 13px;color:var(--muted);}
.tag-chip:hover{border-color:var(--accent);color:var(--accent);}
.related-title{font-family:var(--mincho);font-size:20px;font-weight:600;margin:30px 0 24px;}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.related .card-metatop,.related .card-excerpt{display:none;}
.related .card-title{font-size:15px;margin-top:10px;}
.related .card-date{display:none;}
.single .rule2{margin:50px 0 0;}

/* ---------- comments ---------- */
.comments{margin-top:44px;}
.comments-title{font-family:var(--mincho);font-size:20px;font-weight:600;margin:0 0 22px;}
#disqus_thread{margin-top:6px;}
.comment-list{list-style:none;margin:0 0 30px;padding:0;}
.comment-list ol.children{list-style:none;margin:0;padding-left:24px;border-left:1px solid var(--line2);}
.comment-list li{padding:18px 0;border-bottom:1px solid var(--line2);}
.comment-list .comment-author{font-family:var(--mincho);font-weight:600;}
.comment-list .comment-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fade);margin-top:4px;}
.comment-list .comment-meta a{color:var(--fade);}
.comment-respond{border-top:2px solid var(--ink);padding-top:24px;}
.comment-reply-title{font-family:var(--mincho);font-size:18px;font-weight:600;margin:0 0 16px;}
.comment-form label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:10px 12px;margin-bottom:16px;}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--ink);}
.form-submit .submit,.comment-form .submit{cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);padding:11px 22px;}
.form-submit .submit:hover,.comment-form .submit:hover{background:var(--accent);border-color:var(--accent);}

/* ---------- page (About etc.) ---------- */
.page-head{padding:46px 0 0;}
.page-title{font-family:var(--mincho);font-size:40px;font-weight:700;line-height:1.2;margin:14px 0 26px;}
.page-content{max-width:640px;margin-top:30px;}

/* ---------- archive / search ---------- */
.archive-head,.search-head{padding:46px 0 22px;}
.archive-head .kicker,.search-head .kicker{margin-bottom:14px;}
.archive-title,.search-title{font-family:var(--mincho);font-size:34px;font-weight:700;margin:0;}
.tag-list{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:26px;}
.chip{font-size:12px;letter-spacing:.06em;padding:8px 15px;border:1.5px solid var(--line);color:var(--ink);}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.chip-count{opacity:.6;font-size:10px;}
.archive-count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:16px 0 24px;}
.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px;}
.archive-grid .card-metatop,.archive-grid .card-excerpt{display:none;}
.archive-grid .card-title{font-size:15px;margin-top:11px;}
.archive-grid .card-date{margin-top:7px;}
.empty{font-size:16px;color:var(--muted);padding:40px 0;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;padding:36px 0 0;}
.contact-intro{max-width:560px;margin-bottom:30px;}
.fs-form{max-width:560px;}
.fs-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.fs-field{margin-bottom:18px;}
.fs-field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}
.fs-field input,.fs-field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);padding:11px 13px;}
.fs-field input:focus,.fs-field textarea:focus{outline:none;border-color:var(--ink);}
.fs-field textarea{resize:vertical;line-height:1.7;}
.fs-submit{cursor:pointer;font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--bg);border:1.5px solid var(--ink);padding:12px 24px;margin-top:6px;}
.fs-submit:hover{background:var(--accent);border-color:var(--accent);}
.fs-notice{font-size:13px;letter-spacing:.02em;padding:12px 16px;margin:0 0 24px;border:1.5px solid var(--line);}
.fs-notice-ok{border-color:var(--ink);color:var(--ink);}
.fs-notice-err{border-color:var(--accent);color:var(--accent);}
.contact-elsewhere{border-top:2px solid var(--ink);padding-top:16px;}
.contact-elsewhere .tags-label{margin-bottom:12px;}
.contact-elsewhere a{display:block;font-size:13px;padding:7px 0;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------- year index ---------- */
.year-index{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px;}
.year-index a{font-size:12px;letter-spacing:.06em;border:1px solid var(--line);padding:6px 12px;color:var(--muted);}
.year-index a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- focus ---------- */
.card a:focus-visible,.chip:focus-visible,.tag-chip:focus-visible,.toggle-btn:focus-visible,.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- evening (dark) mode ---------- */
body.fs-dark{
  --bg:#211f1b;--ink:#ece7dd;--soft:#cfc7b8;--muted:#b3aa98;--faint:#8f8676;
  --line:#3c372e;--line2:#332e27;--paper2:#2a2721;--accent:#dd6e52;
}
body.fs-dark .card-type{background:rgba(0,0,0,.6);}
body.fs-dark .cover{background:#2b2721;}
body.fs-dark .cover-fallback{color:#4a453b;}

/* ---------- footer ---------- */
.site-footer{margin-top:40px;}
.tags-section{padding:40px 40px 6px;}
.tags-label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;}
.footer-bar{border-top:2px solid var(--ink);margin-top:26px;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.footer-brand{display:flex;align-items:center;gap:14px;}
.footer-brand .copy{font-size:11px;letter-spacing:.1em;color:var(--faint);}
.footer-social{display:flex;gap:24px;}
.footer-social a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .featured{grid-template-columns:1fr;gap:28px;}
  .featured-title{font-size:34px;}
  .feed.is-grid{grid-template-columns:repeat(2,1fr);gap:26px 20px;}
  .feed.is-editorial .card{grid-template-columns:120px minmax(0,1fr);gap:22px;}
  .feed.is-editorial .card-title{font-size:24px;}
  .archive-grid{grid-template-columns:repeat(2,1fr);}
  .post-grid{grid-template-columns:1fr;gap:26px;}
  .post-title{font-size:36px;}
  .related{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .container{padding-left:22px;padding-right:22px;}
  .header-top{flex-direction:column;gap:16px;}
  .main-nav{padding-top:0;}
  .nav-list{flex-wrap:wrap;gap:14px 18px;}
  .header-sub{flex-direction:column;align-items:stretch;gap:14px;}
  .search-box{width:100%;}
  .feed.is-grid,.archive-grid{grid-template-columns:1fr;}
  .feed.is-editorial .card{grid-template-columns:100px minmax(0,1fr);gap:16px;}
  .feed.is-editorial .card-title{font-size:20px;}
  .related{grid-template-columns:1fr;}
  .tags-section,.footer-bar{padding-left:22px;padding-right:22px;}
}